n8n-editor-ui 1.81.3 → 1.82.1

package/dist/assets/{WorkflowsView-B8AX9T7c.js → WorkflowsView-A_2DIum0.js}

@@ -1,11 +1,11 @@
-import { d as defineComponent, W as useRoute, b as useRouter, q as computed, g4 as ProjectTypes, V as VIEWS, m as resolveComponent, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, n as normalizeClass, k as createTextVNode, t as toDisplayString, j as createBaseVNode, l as unref, J as withModifiers, aS as createSlots, e as createBlock, f as createCommentVNode, g as useI18n, cz as _sfc_main$3, g5 as __unplugin_components_0$1, _ as _export_sfc, a as useToast, p as useSettingsStore, L as useUIStore, u as useUsersStore, U as useWorkflowsStore, a2 as useProjectsStore, am as getResourcePermissions, dJ as dateFormat, g6 as ResourceType, ax as withDirectives, ay as vShow, ac as WORKFLOW_SHARE_MODAL_KEY, aj as DUPLICATE_MODAL_KEY, af as MODAL_CONFIRM, g7 as PROJECT_MOVE_RESOURCE_MODAL, al as useMessage, ak as useTelemetry, a1 as useSourceControlStore, au as usePostHog, E as useTagsStore, a4 as useDocumentTitle, K as useDebounce, r as ref, g8 as DEFAULT_WORKFLOW_PAGE_SIZE, a9 as EnterpriseEditionFeature, g9 as EASY_AI_WORKFLOW_EXPERIMENT, I as watch, o as onMounted, y as onBeforeUnmount, A as debounce, fV as N8nIcon, fU as N8nText, cE as N8nHeading, ga as N8nCard, cT as N8nInputLabel, a8 as _sfc_main$4, gb as N8nSelect, F as Fragment, B as renderList, gc as _sfc_main$5, D as createEventBus, bH as AI_CREDITS_EXPERIMENT } from "./index-DSYFXmvJ.js";
-import { R as ResourcesListLayout } from "./ResourcesListLayout-DgwDLCvq.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-Zsg0lNt1.js";
-import { P as ProjectCardBadge } from "./ProjectCardBadge-DY9PI-lv.js";
-import { P as ProjectHeader } from "./ProjectHeader-B1QbGLAy.js";
-import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-BeiAbGC2.js";
-import "./useWorkflowActivate-C_9fNHFS.js";
-import "./ProjectCreateResource-icMXxLmn.js";
+import { d as defineComponent, W as useRoute, b as useRouter, q as computed, g9 as ProjectTypes, V as VIEWS, m as resolveComponent, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, n as normalizeClass, k as createTextVNode, t as toDisplayString, j as createBaseVNode, l as unref, J as withModifiers, aT as createSlots, e as createBlock, f as createCommentVNode, g as useI18n, cB as _sfc_main$4, ga as __unplugin_components_0$1, _ as _export_sfc, a2 as useProjectsStore, a as useToast, p as useSettingsStore, L as useUIStore, u as useUsersStore, U as useWorkflowsStore, am as getResourcePermissions, dS as dateFormat, gb as ResourceType, ax as withDirectives, ay as vShow, ac as WORKFLOW_SHARE_MODAL_KEY, aj as DUPLICATE_MODAL_KEY, af as MODAL_CONFIRM, gc as PROJECT_MOVE_RESOURCE_MODAL, al as useMessage, ak as useTelemetry, S as defineStore, T as STORES, $ as useRootStore, r as ref, gd as createFolder, ge as getFolderPath, gf as getWorkflowsAndFolders, a1 as useSourceControlStore, au as usePostHog, E as useTagsStore, a4 as useDocumentTitle, K as useDebounce, gg as DEFAULT_WORKFLOW_PAGE_SIZE, a9 as EnterpriseEditionFeature, gh as EASY_AI_WORKFLOW_EXPERIMENT, I as watch, o as onMounted, y as onBeforeUnmount, A as debounce, fZ as N8nIcon, cG as N8nHeading, fY as N8nText, gi as N8nCard, cV as N8nInputLabel, a8 as _sfc_main$5, gj as N8nSelect, F as Fragment, B as renderList, gk as _sfc_main$6, D as createEventBus, bI as AI_CREDITS_EXPERIMENT } from "./index-DkwrpQEB.js";
+import { R as ResourcesListLayout } from "./ResourcesListLayout--Bt5VWxW.js";
+import { W as WorkflowActivator } from "./WorkflowActivator-Dio1FWuT.js";
+import { P as ProjectCardBadge } from "./ProjectCardBadge-CukEqaMt.js";
+import { P as ProjectHeader } from "./ProjectHeader-DyqSSbiB.js";
+import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-qtdB9CeQ.js";
+import "./useWorkflowActivate-COcGS4jx.js";
+import "./ProjectCreateResource-CtheSWks.js";
 const FOLDER_LIST_ITEM_ACTIONS = {
   OPEN: "open",
   CREATE: "create",
@@ -16,11 +16,12 @@ const FOLDER_LIST_ITEM_ACTIONS = {
   TAGS: "manage_tags",
   DELETE: "delete"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "FolderCard",
   props: {
     data: {},
-    actions: { default: () => [] }
+    actions: { default: () => [] },
+    breadcrumbs: {}
   },
   emits: ["action", "folderOpened"],
   setup(__props, { emit: __emit }) {
@@ -29,17 +30,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const route = useRoute();
     const router = useRouter();
     const emit = __emit;
-    const breadCrumbsItems = computed(() => {
-      if (props.data.parentFolder) {
-        return [
-          {
-            id: props.data.parentFolder.id,
-            label: props.data.parentFolder.name
-          }
-        ];
-      }
-      return [];
-    });
     const projectIcon = computed(() => {
       const defaultIcon = { type: "icon", value: "layer-group" };
       if (props.data.homeProject?.type === ProjectTypes.Personal) {
@@ -85,7 +75,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const _component_n8n_icon = resolveComponent("n8n-icon");
       const _component_n8n_heading = resolveComponent("n8n-heading");
       const _component_n8n_text = resolveComponent("n8n-text");
-      const _component_TimeAgo = _sfc_main$3;
+      const _component_TimeAgo = _sfc_main$4;
       const _component_ProjectIcon = __unplugin_components_0$1;
       const _component_n8n_link = resolveComponent("n8n-link");
       const _component_n8n_breadcrumbs = resolveComponent("n8n-breadcrumbs");
@@ -129,7 +119,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   createVNode(_component_n8n_text, {
                     size: "small",
                     color: "text-light",
-                    class: normalizeClass(_ctx.$style["info-cell"]),
+                    class: normalizeClass([_ctx.$style["info-cell"], _ctx.$style["info-cell--workflow-count"]]),
                     "data-test-id": "folder-card-workflow-count"
                   }, {
                     default: withCtx(() => [
@@ -140,7 +130,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   createVNode(_component_n8n_text, {
                     size: "small",
                     color: "text-light",
-                    class: normalizeClass(_ctx.$style["info-cell"]),
+                    class: normalizeClass([_ctx.$style["info-cell"], _ctx.$style["info-cell--updated"]]),
                     "data-test-id": "folder-card-last-updated"
                   }, {
                     default: withCtx(() => [
@@ -154,7 +144,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   createVNode(_component_n8n_text, {
                     size: "small",
                     color: "text-light",
-                    class: normalizeClass(_ctx.$style["info-cell"]),
+                    class: normalizeClass([_ctx.$style["info-cell"], _ctx.$style["info-cell--created"]]),
                     "data-test-id": "folder-card-created"
                   }, {
                     default: withCtx(() => [
@@ -173,49 +163,54 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                   }, ["prevent"]))
                 }, [
-                  createVNode(_component_n8n_breadcrumbs, {
-                    items: breadCrumbsItems.value,
-                    "path-truncated": true,
-                    "show-border": true,
-                    "highlight-last-item": false,
-                    theme: "small",
-                    "data-test-id": "folder-card-breadcrumbs",
-                    onItemSelected: onBreadcrumbsItemClick
-                  }, createSlots({ _: 2 }, [
-                    _ctx.data.homeProject ? {
-                      name: "prepend",
-                      fn: withCtx(() => [
-                        createBaseVNode("div", {
-                          class: normalizeClass(_ctx.$style["home-project"])
-                        }, [
-                          createVNode(_component_n8n_link, {
-                            to: `/projects/${_ctx.data.homeProject.id}`
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(_component_ProjectIcon, {
-                                icon: projectIcon.value,
-                                "border-less": true,
-                                size: "mini"
-                              }, null, 8, ["icon"]),
-                              createVNode(_component_n8n_text, {
-                                size: "small",
-                                compact: true,
-                                bold: true,
-                                color: "text-base"
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(toDisplayString(projectName.value), 1)
-                                ]),
-                                _: 1
-                              })
-                            ]),
-                            _: 1
-                          }, 8, ["to"])
-                        ], 2)
-                      ]),
-                      key: "0"
-                    } : void 0
-                  ]), 1032, ["items"]),
+                  createBaseVNode("div", {
+                    class: normalizeClass(_ctx.$style.breadcrumbs)
+                  }, [
+                    createVNode(_component_n8n_breadcrumbs, {
+                      items: _ctx.breadcrumbs.visibleItems,
+                      "hidden-items": _ctx.breadcrumbs.hiddenItems,
+                      "path-truncated": _ctx.breadcrumbs.visibleItems[0]?.parentFolder,
+                      "show-border": true,
+                      "highlight-last-item": false,
+                      theme: "small",
+                      "data-test-id": "folder-card-breadcrumbs",
+                      onItemSelected: onBreadcrumbsItemClick
+                    }, createSlots({ _: 2 }, [
+                      _ctx.data.homeProject ? {
+                        name: "prepend",
+                        fn: withCtx(() => [
+                          createBaseVNode("div", {
+                            class: normalizeClass(_ctx.$style["home-project"])
+                          }, [
+                            createVNode(_component_n8n_link, {
+                              to: `/projects/${_ctx.data.homeProject.id}`
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_component_ProjectIcon, {
+                                  icon: projectIcon.value,
+                                  "border-less": true,
+                                  size: "mini"
+                                }, null, 8, ["icon"]),
+                                createVNode(_component_n8n_text, {
+                                  size: "small",
+                                  compact: true,
+                                  bold: true,
+                                  color: "text-base"
+                                }, {
+                                  default: withCtx(() => [
+                                    createTextVNode(toDisplayString(projectName.value), 1)
+                                  ]),
+                                  _: 1
+                                })
+                              ]),
+                              _: 1
+                            }, 8, ["to"])
+                          ], 2)
+                        ]),
+                        key: "0"
+                      } : void 0
+                    ]), 1032, ["items", "hidden-items", "path-truncated"])
+                  ], 2),
                   _ctx.actions.length ? (openBlock(), createBlock(_component_n8n_action_toggle, {
                     key: 0,
                     actions: _ctx.actions,
@@ -234,14 +229,103 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const card = "_card_af2zr_123";
-const style0$2 = {
+const card = "_card_v01dx_123";
+const style0$3 = {
   card,
-  "folder-icon": "_folder-icon_af2zr_131",
-  "card-footer": "_card-footer_af2zr_142",
-  "info-cell": "_info-cell_af2zr_146",
-  "card-actions": "_card-actions_af2zr_151",
-  "home-project": "_home-project_af2zr_156"
+  "folder-icon": "_folder-icon_v01dx_131",
+  "card-footer": "_card-footer_v01dx_142",
+  "info-cell": "_info-cell_v01dx_146",
+  "card-actions": "_card-actions_v01dx_151",
+  "home-project": "_home-project_v01dx_156",
+  "info-cell--created": "_info-cell--created_v01dx_176"
+};
+const cssModules$3 = {
+  "$style": style0$3
+};
+const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$3]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "FolderBreadcrumbs",
+  props: {
+    actions: {},
+    breadcrumbs: {}
+  },
+  emits: ["itemSelected", "action"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const i18n = useI18n();
+    const projectsStore = useProjectsStore();
+    const currentProject = computed(() => projectsStore.currentProject);
+    const projectName = computed(() => {
+      if (currentProject.value?.type === ProjectTypes.Personal) {
+        return i18n.baseText("projects.menu.personal");
+      }
+      return currentProject.value?.name;
+    });
+    const onItemSelect = (item) => {
+      emit("itemSelected", item);
+    };
+    const onAction = (action) => {
+      emit("action", action);
+    };
+    return (_ctx, _cache) => {
+      const _component_N8nText = resolveComponent("N8nText");
+      const _component_n8n_link = resolveComponent("n8n-link");
+      const _component_n8n_breadcrumbs = resolveComponent("n8n-breadcrumbs");
+      const _component_n8n_action_toggle = resolveComponent("n8n-action-toggle");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        _ctx.breadcrumbs.visibleItems ? (openBlock(), createBlock(_component_n8n_breadcrumbs, {
+          key: 0,
+          items: _ctx.breadcrumbs.visibleItems,
+          "highlight-last-item": false,
+          "path-truncated": _ctx.breadcrumbs.visibleItems[0].parentFolder,
+          "hidden-items": _ctx.breadcrumbs.hiddenItems,
+          "data-test-id": "folder-card-breadcrumbs",
+          onItemSelected: onItemSelect
+        }, createSlots({ _: 2 }, [
+          currentProject.value ? {
+            name: "prepend",
+            fn: withCtx(() => [
+              createBaseVNode("div", {
+                class: normalizeClass(_ctx.$style["home-project"])
+              }, [
+                createVNode(_component_n8n_link, {
+                  to: `/projects/${currentProject.value.id}`
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_N8nText, {
+                      size: "large",
+                      color: "text-base"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(projectName.value), 1)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["to"])
+              ], 2)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["items", "path-truncated", "hidden-items"])) : createCommentVNode("", true),
+        _ctx.breadcrumbs.visibleItems ? (openBlock(), createBlock(_component_n8n_action_toggle, {
+          key: 1,
+          actions: _ctx.actions,
+          theme: "dark",
+          "data-test-id": "folder-breadcrumbs-actions",
+          onAction
+        }, null, 8, ["actions"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const container = "_container_1e41k_123";
+const style0$2 = {
+  container,
+  "home-project": "_home-project_1e41k_128"
 };
 const cssModules$2 = {
   "$style": style0$2
@@ -252,6 +336,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowCard",
   props: {
     data: {},
+    breadcrumbs: {},
     readOnly: { type: Boolean, default: false },
     workflowListEventBus: { default: void 0 }
   },
@@ -318,17 +403,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         `d mmmm${String(props.data.createdAt).startsWith(currentYear) ? "" : ", yyyy"}`
       );
     });
-    const breadCrumbsItems = computed(() => {
-      if (props.data.parentFolder) {
-        return [
-          {
-            id: props.data.parentFolder.id,
-            label: props.data.parentFolder.name
-          }
-        ];
-      }
-      return [];
-    });
     const projectIcon = computed(() => {
       const defaultIcon = { type: "icon", value: "layer-group" };
       if (props.data.homeProject?.type === ProjectTypes.Personal) {
@@ -499,49 +573,54 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               "resource-type": unref(ResourceType).Workflow,
               "resource-type-label": resourceTypeLabel.value,
               "personal-project": unref(projectsStore).personalProject
-            }, null, 8, ["class", "resource", "resource-type", "resource-type-label", "personal-project"])) : (openBlock(), createBlock(_component_n8n_breadcrumbs, {
+            }, null, 8, ["class", "resource", "resource-type", "resource-type-label", "personal-project"])) : (openBlock(), createElementBlock("div", {
               key: 1,
-              items: breadCrumbsItems.value,
-              "path-truncated": true,
-              "show-border": true,
-              "highlight-last-item": false,
-              theme: "small",
-              "data-test-id": "folder-card-breadcrumbs"
-            }, createSlots({ _: 2 }, [
-              _ctx.data.homeProject ? {
-                name: "prepend",
-                fn: withCtx(() => [
-                  createBaseVNode("div", {
-                    class: normalizeClass(_ctx.$style["home-project"])
-                  }, [
-                    createVNode(_component_n8n_link, {
-                      to: `/projects/${_ctx.data.homeProject.id}`
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(_component_ProjectIcon, {
-                          icon: projectIcon.value,
-                          "border-less": true,
-                          size: "mini"
-                        }, null, 8, ["icon"]),
-                        createVNode(_component_n8n_text, {
-                          size: "small",
-                          compact: true,
-                          bold: true,
-                          color: "text-base"
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(projectName.value), 1)
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["to"])
-                  ], 2)
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["items"])),
+              class: normalizeClass(_ctx.$style.breadcrumbs)
+            }, [
+              createVNode(_component_n8n_breadcrumbs, {
+                items: _ctx.breadcrumbs.visibleItems,
+                "hidden-items": _ctx.breadcrumbs.hiddenItems,
+                "path-truncated": _ctx.breadcrumbs.visibleItems[0]?.parentFolder,
+                "show-border": true,
+                "highlight-last-item": false,
+                theme: "small",
+                "data-test-id": "folder-card-breadcrumbs"
+              }, createSlots({ _: 2 }, [
+                _ctx.data.homeProject ? {
+                  name: "prepend",
+                  fn: withCtx(() => [
+                    createBaseVNode("div", {
+                      class: normalizeClass(_ctx.$style["home-project"])
+                    }, [
+                      createVNode(_component_n8n_link, {
+                        to: `/projects/${_ctx.data.homeProject.id}`
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_ProjectIcon, {
+                            icon: projectIcon.value,
+                            "border-less": true,
+                            size: "mini"
+                          }, null, 8, ["icon"]),
+                          createVNode(_component_n8n_text, {
+                            size: "small",
+                            compact: true,
+                            bold: true,
+                            color: "text-base"
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(projectName.value), 1)
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["to"])
+                    ], 2)
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["items", "hidden-items", "path-truncated"])
+            ], 2)),
             createVNode(WorkflowActivator, {
               class: "mr-s",
               "workflow-active": _ctx.data.active,
@@ -569,7 +648,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 withDirectives(createBaseVNode("span", null, [
                   createTextVNode(toDisplayString(unref(locale).baseText("workflows.item.updated")) + " ", 1),
-                  createVNode(_sfc_main$3, {
+                  createVNode(_sfc_main$4, {
                     date: String(_ctx.data.updatedAt)
                   }, null, 8, ["date"]),
                   _cache[1] || (_cache[1] = createTextVNode(" | "))
@@ -601,23 +680,92 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const cardLink = "_cardLink_1y37x_123";
-const cardHeading = "_cardHeading_1y37x_133";
-const cardDescription = "_cardDescription_1y37x_142";
-const cardActions = "_cardActions_1y37x_149";
-const cardBadge = "_cardBadge_1y37x_176";
+const cardLink = "_cardLink_dsqjo_123";
+const cardHeading = "_cardHeading_dsqjo_133";
+const cardDescription = "_cardDescription_dsqjo_142";
+const cardActions = "_cardActions_dsqjo_149";
+const cardBadge = "_cardBadge_dsqjo_176";
+const breadcrumbs = "_breadcrumbs_dsqjo_177";
 const style0$1 = {
   cardLink,
   cardHeading,
   cardDescription,
   cardActions,
-  "home-project": "_home-project_1y37x_159",
-  cardBadge
+  "home-project": "_home-project_dsqjo_159",
+  cardBadge,
+  breadcrumbs
 };
 const cssModules$1 = {
   "$style": style0$1
 };
 const WorkflowCard = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+const useFoldersStore = defineStore(STORES.FOLDERS, () => {
+  const rootStore = useRootStore();
+  const totalWorkflowCount = ref(0);
+  const breadcrumbsCache = ref({});
+  const cacheFolders = (folders) => {
+    folders.forEach((folder) => {
+      if (!breadcrumbsCache.value[folder.id]) {
+        breadcrumbsCache.value[folder.id] = {
+          id: folder.id,
+          name: folder.name,
+          parentFolder: folder.parentFolder
+        };
+      }
+    });
+  };
+  const getCachedFolder = (folderId) => {
+    return breadcrumbsCache.value[folderId];
+  };
+  async function createFolder$1(name, projectId, parentFolderId) {
+    return await createFolder(
+      rootStore.restApiContext,
+      projectId,
+      name,
+      parentFolderId
+    );
+  }
+  async function getFolderPath$1(projectId, folderId) {
+    const tree = await getFolderPath(rootStore.restApiContext, projectId, folderId);
+    const forCache = extractFoldersForCache(tree);
+    cacheFolders(forCache);
+    return tree;
+  }
+  function extractFoldersForCache(items, parentFolderId) {
+    let result = [];
+    items.forEach((item) => {
+      result.push({
+        id: item.id,
+        name: item.name,
+        parentFolder: parentFolderId
+      });
+      if (item.children && item.children.length > 0) {
+        const childFolders = extractFoldersForCache(item.children, item.id);
+        result = [...result, ...childFolders];
+      }
+    });
+    return result;
+  }
+  async function fetchTotalWorkflowsAndFoldersCount(projectId) {
+    const { count } = await getWorkflowsAndFolders(
+      rootStore.restApiContext,
+      { projectId },
+      { skip: 0, take: 1 },
+      true
+    );
+    totalWorkflowCount.value = count;
+    return count;
+  }
+  return {
+    fetchTotalWorkflowsAndFoldersCount,
+    breadcrumbsCache,
+    cacheFolders,
+    getCachedFolder,
+    createFolder: createFolder$1,
+    getFolderPath: getFolderPath$1,
+    totalWorkflowCount
+  };
+});
 const _hoisted_1 = { class: "text-center mt-s" };
 const _hoisted_2 = {
   key: 0,
@@ -628,8 +776,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WorkflowsView",
   setup(__props) {
     const StatusFilter = {
-      ACTIVE: true,
-      DEACTIVATED: false,
+      ACTIVE: "active",
+      DEACTIVATED: "deactivated",
       ALL: ""
     };
     const WORKFLOWS_SORT_MAP = {
@@ -641,6 +789,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const i18n = useI18n();
     const route = useRoute();
     const router = useRouter();
+    const message = useMessage();
+    const toast = useToast();
     const sourceControlStore = useSourceControlStore();
     const usersStore = useUsersStore();
     const workflowsStore = useWorkflowsStore();
@@ -650,9 +800,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const telemetry = useTelemetry();
     const uiStore = useUIStore();
     const tagsStore = useTagsStore();
+    const foldersStore = useFoldersStore();
     const documentTitle = useDocumentTitle();
     const { callDebounced } = useDebounce();
     const loading = ref(false);
+    const breadcrumbsLoading = ref(false);
     const filters = ref({
       search: "",
       homeProject: "",
@@ -662,25 +814,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const workflowListEventBus = createEventBus();
     const workflowsAndFolders = ref([]);
     const easyAICalloutVisible = ref(true);
-    const currentFolder = ref(void 0);
     const currentPage = ref(1);
     const pageSize = ref(DEFAULT_WORKFLOW_PAGE_SIZE);
     const currentSort = ref("updatedAt:desc");
-    const folderCardActions = ref([
+    const currentFolderId = ref(null);
+    const folderActions = ref([
       {
         label: "Open",
         value: FOLDER_LIST_ITEM_ACTIONS.OPEN,
-        disabled: false
+        disabled: false,
+        onlyAvailableOn: "card"
       },
       {
         label: "Create Folder",
         value: FOLDER_LIST_ITEM_ACTIONS.CREATE,
-        disabled: true
+        disabled: false
       },
       {
         label: "Create Workflow",
         value: FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW,
-        disabled: true
+        disabled: false
       },
       {
         label: "Rename",
@@ -708,6 +861,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         disabled: true
       }
     ]);
+    const folderCardActions = computed(
+      () => folderActions.value.filter(
+        (action) => !action.onlyAvailableOn || action.onlyAvailableOn === "card"
+      )
+    );
+    const mainBreadcrumbsActions = computed(
+      () => folderActions.value.filter(
+        (action) => !action.onlyAvailableOn || action.onlyAvailableOn === "mainBreadcrumbs"
+      )
+    );
     const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
     const foldersEnabled = computed(() => settingsStore.settings.folders.enabled);
     const isOverviewPage = computed(() => route.name === VIEWS.WORKFLOWS);
@@ -716,14 +879,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing]
     );
     const showFolders = computed(() => foldersEnabled.value && !isOverviewPage.value);
-    const mainBreadcrumbsItems = computed(() => {
-      if (!showFolders.value || !currentFolder.value) return;
-      const items = [];
-      items.push({
-        id: currentFolder.value.id,
-        label: currentFolder.value.name
-      });
-      return items;
+    const currentFolder = computed(() => {
+      return currentFolderId.value ? foldersStore.breadcrumbsCache[currentFolderId.value] : null;
     });
     const currentProject = computed(() => projectsStore.currentProject);
     const projectName = computed(() => {
@@ -732,6 +889,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return currentProject.value?.name;
     });
+    const currentParentName = computed(() => {
+      if (currentFolder.value) {
+        return currentFolder.value.name;
+      }
+      return projectName.value;
+    });
     const workflowListResources = computed(() => {
       const resources = (workflowsAndFolders.value || []).map((resource) => {
         if (resource.resource === "folder") {
@@ -807,12 +970,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => route.params?.folderId,
       async (newVal) => {
-        if (!newVal) {
-          currentFolder.value = void 0;
-        }
+        currentFolderId.value = newVal;
         await fetchWorkflows();
       }
     );
+    sourceControlStore.$onAction(({ name, after }) => {
+      if (name !== "pullWorkfolder") return;
+      after(async () => await initialize());
+    });
     onMounted(async () => {
       documentTitle.set(i18n.baseText("workflows.heading"));
       void usersStore.showPersonalizationSurvey();
@@ -823,63 +988,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       workflowListEventBus.off("resource-moved", fetchWorkflows);
       workflowListEventBus.off("workflow-duplicated", fetchWorkflows);
     });
-    const onFiltersUpdated = async () => {
-      currentPage.value = 1;
-      saveFiltersOnQueryString();
-      await fetchWorkflows();
-    };
-    const onSearchUpdated = async (search) => {
-      currentPage.value = 1;
-      saveFiltersOnQueryString();
-      if (search) {
-        await callDebounced(fetchWorkflows, { debounceTime: 500, trailing: true });
-      } else {
-        await fetchWorkflows();
-      }
-    };
-    const addWorkflow = () => {
-      uiStore.nodeViewInitialized = false;
-      void router.push({
-        name: VIEWS.NEW_WORKFLOW,
-        query: { projectId: route.params?.projectId }
-      });
-      telemetry.track("User clicked add workflow button", {
-        source: "Workflows list"
-      });
-      trackEmptyCardClick("blank");
-    };
-    const trackEmptyCardClick = (option) => {
-      telemetry.track("User clicked empty page option", {
-        option
-      });
-    };
     const initialize = async () => {
       loading.value = true;
-      currentFolder.value = void 0;
       await setFiltersFromQueryString();
+      if (!route.params.folderId) {
+        currentFolderId.value = null;
+      }
       const [, resourcesPage] = await Promise.all([
         usersStore.fetchUsers(),
         fetchWorkflows(),
         workflowsStore.fetchActiveWorkflows()
       ]);
+      breadcrumbsLoading.value = false;
       workflowsAndFolders.value = resourcesPage;
       loading.value = false;
     };
-    const setCurrentPage = async (page) => {
-      currentPage.value = page;
-      await fetchWorkflows();
-    };
-    const setPageSize = async (size) => {
-      pageSize.value = size;
-      await fetchWorkflows();
-    };
     const fetchWorkflows = async () => {
       const delayedLoading = debounce(() => {
         loading.value = true;
       }, 300);
       const routeProjectId = route.params?.projectId;
       const homeProjectFilter = filters.value.homeProject || void 0;
-      const parentFolder = route.params?.folderId || "0";
+      const parentFolder = route.params?.folderId || void 0;
       const fetchedResources = await workflowsStore.fetchWorkflowsPage(
         routeProjectId ?? homeProjectFilter,
         currentPage.value,
@@ -887,18 +1017,61 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         currentSort.value,
         {
           name: filters.value.search || void 0,
-          active: filters.value.status ? Boolean(filters.value.status) : void 0,
+          active: filters.value.status === StatusFilter.ALL ? void 0 : filters.value.status === StatusFilter.ACTIVE,
           tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
-          parentFolderId: parentFolder
+          parentFolderId: parentFolder ?? "0"
+          // 0 is the root folder in the API
         },
         showFolders.value
       );
-      currentFolder.value = fetchedResources[0]?.parentFolder;
+      foldersStore.cacheFolders(
+        fetchedResources.filter((resource) => resource.resource === "folder").map((r) => ({ id: r.id, name: r.name, parentFolder: r.parentFolder?.id }))
+      );
+      const isCurrentFolderCached = foldersStore.breadcrumbsCache[parentFolder ?? ""] !== void 0;
+      const needToFetchFolderPath = parentFolder && !isCurrentFolderCached && routeProjectId;
+      if (needToFetchFolderPath) {
+        breadcrumbsLoading.value = true;
+        await foldersStore.getFolderPath(routeProjectId, parentFolder);
+        currentFolderId.value = parentFolder;
+        breadcrumbsLoading.value = false;
+      }
+      await foldersStore.fetchTotalWorkflowsAndFoldersCount(routeProjectId);
       delayedLoading.cancel();
       workflowsAndFolders.value = fetchedResources;
       loading.value = false;
       return fetchedResources;
     };
+    const onSortUpdated = async (sort) => {
+      currentSort.value = WORKFLOWS_SORT_MAP[sort] ?? "updatedAt:desc";
+      if (currentSort.value !== "updatedAt:desc") {
+        void router.replace({ query: { ...route.query, sort } });
+      } else {
+        void router.replace({ query: { ...route.query, sort: void 0 } });
+      }
+      await fetchWorkflows();
+    };
+    const onFiltersUpdated = async () => {
+      currentPage.value = 1;
+      saveFiltersOnQueryString();
+      await fetchWorkflows();
+    };
+    const onSearchUpdated = async (search) => {
+      currentPage.value = 1;
+      saveFiltersOnQueryString();
+      if (search) {
+        await callDebounced(fetchWorkflows, { debounceTime: 500, trailing: true });
+      } else {
+        await fetchWorkflows();
+      }
+    };
+    const setCurrentPage = async (page) => {
+      currentPage.value = page;
+      await fetchWorkflows();
+    };
+    const setPageSize = async (size) => {
+      pageSize.value = size;
+      await fetchWorkflows();
+    };
     const onClickTag = async (tagId) => {
       if (!filters.value.tags.includes(tagId)) {
         filters.value.tags.push(tagId);
@@ -914,8 +1087,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         delete currentQuery.search;
       }
-      if (typeof filters.value.status !== "string") {
-        currentQuery.status = filters.value.status.toString();
+      if (filters.value.status !== StatusFilter.ALL) {
+        currentQuery.status = (filters.value.status === StatusFilter.ACTIVE).toString();
       } else {
         delete currentQuery.status;
       }
@@ -933,9 +1106,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         query: Object.keys(currentQuery).length ? currentQuery : void 0
       });
     };
-    function isValidProjectId(projectId) {
-      return projectsStore.availableProjects.some((project) => project.id === projectId);
-    }
     const setFiltersFromQueryString = async () => {
       const newQuery = { ...route.query };
       const { tags, status, search, homeProject, sort } = route.query ?? {};
@@ -969,10 +1139,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         delete newQuery.tags;
       }
-      const validStatusValues = [StatusFilter.ACTIVE.toString(), StatusFilter.DEACTIVATED.toString()];
+      const validStatusValues = ["true", "false"];
       if (isValidString(status) && validStatusValues.includes(status)) {
         newQuery.status = status;
-        filters.value.status = status === "true";
+        filters.value.status = status === "true" ? StatusFilter.ACTIVE : StatusFilter.DEACTIVATED;
       } else {
         delete newQuery.status;
       }
@@ -985,10 +1155,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       void router.replace({ query: newQuery });
     };
-    sourceControlStore.$onAction(({ name, after }) => {
-      if (name !== "pullWorkfolder") return;
-      after(async () => await initialize());
-    });
+    const addWorkflow = () => {
+      uiStore.nodeViewInitialized = false;
+      void router.push({
+        name: VIEWS.NEW_WORKFLOW,
+        query: { projectId: route.params?.projectId, parentFolderId: route.params?.folderId }
+      });
+      telemetry.track("User clicked add workflow button", {
+        source: "Workflows list"
+      });
+      trackEmptyCardClick("blank");
+    };
+    const trackEmptyCardClick = (option) => {
+      telemetry.track("User clicked empty page option", {
+        option
+      });
+    };
+    function isValidProjectId(projectId) {
+      return projectsStore.availableProjects.some((project) => project.id === projectId);
+    }
     const openAIWorkflow = async (source) => {
       dismissEasyAICallout();
       telemetry.track(
@@ -1006,21 +1191,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       await router.push({
         name: VIEWS.TEMPLATE_IMPORT,
         params: { id: easyAiWorkflowJson.meta.templateId },
-        query: { fromJson: "true" }
+        query: { fromJson: "true", parentFolderId: route.params.folderId }
       });
     };
     const dismissEasyAICallout = () => {
       easyAICalloutVisible.value = false;
     };
-    const onSortUpdated = async (sort) => {
-      currentSort.value = WORKFLOWS_SORT_MAP[sort] ?? "updatedAt:desc";
-      if (currentSort.value !== "updatedAt:desc") {
-        void router.replace({ query: { ...route.query, sort } });
-      } else {
-        void router.replace({ query: { ...route.query, sort: void 0 } });
-      }
-      await fetchWorkflows();
-    };
     const onWorkflowActiveToggle = (data) => {
       const workflow = workflowsAndFolders.value.find(
         (w) => w.id === data.id
@@ -1028,15 +1204,185 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!workflow) return;
       workflow.active = data.active;
     };
-    const onFolderOpened = (data) => {
-      currentFolder.value = data.folder;
+    const visibleBreadcrumbsItems = computed(() => {
+      if (!currentFolder.value) return [];
+      const items = [];
+      const parent = foldersStore.getCachedFolder(currentFolder.value.parentFolder ?? "");
+      if (parent) {
+        items.push({
+          id: parent.id,
+          label: parent.name,
+          href: `/projects/${route.params.projectId}/folders/${parent.id}/workflows`,
+          parentFolder: parent.parentFolder
+        });
+      }
+      items.push({
+        id: currentFolder.value.id,
+        label: currentFolder.value.name,
+        parentFolder: parent?.parentFolder
+      });
+      return items;
+    });
+    const hiddenBreadcrumbsItems = computed(() => {
+      const lastVisibleParent = visibleBreadcrumbsItems.value[visibleBreadcrumbsItems.value.length - 1];
+      if (!lastVisibleParent) return [];
+      const items = [];
+      let parentFolder = lastVisibleParent.parentFolder;
+      while (parentFolder) {
+        const parent = foldersStore.getCachedFolder(parentFolder);
+        if (!parent) break;
+        items.unshift({
+          id: parent.id,
+          label: parent.name,
+          href: `/projects/${route.params.projectId}/folders/${parent.id}/workflows`,
+          parentFolder: parent.parentFolder
+        });
+        parentFolder = parent.parentFolder;
+      }
+      return items;
+    });
+    const mainBreadcrumbs = computed(() => {
+      return {
+        visibleItems: visibleBreadcrumbsItems.value,
+        hiddenItems: hiddenBreadcrumbsItems.value
+      };
+    });
+    const cardBreadcrumbs = computed(() => {
+      const visibleItems = visibleBreadcrumbsItems.value;
+      const hiddenItems = hiddenBreadcrumbsItems.value;
+      if (visibleItems.length > 1) {
+        return {
+          visibleItems: [visibleItems[visibleItems.length - 1]],
+          hiddenItems: [...hiddenItems, ...visibleItems.slice(0, visibleItems.length - 1)]
+        };
+      }
+      return {
+        visibleItems,
+        hiddenItems
+      };
+    });
+    const onBreadcrumbItemClick = (item) => {
+      if (item.href) {
+        loading.value = true;
+        void router.push(item.href).then(() => {
+          currentFolderId.value = item.id;
+          loading.value = false;
+        }).catch((error) => {
+          toast.showError(error, "Error navigating to folder");
+        });
+      }
+    };
+    const onBreadCrumbsAction = async (action) => {
+      switch (action) {
+        case FOLDER_LIST_ITEM_ACTIONS.CREATE:
+          if (!route.params.projectId) return;
+          const currentParent = currentFolder.value?.name || projectName.value;
+          if (!currentParent) return;
+          await createFolder2({
+            id: route.params.folderId ?? "-1",
+            name: currentParent,
+            type: currentFolder.value ? "folder" : "project"
+          });
+          break;
+        case FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW:
+          addWorkflow();
+          break;
+      }
+    };
+    const onFolderCardAction = async (payload) => {
+      const clickedFolder = foldersStore.getCachedFolder(payload.folderId);
+      if (!clickedFolder) return;
+      switch (payload.action) {
+        case FOLDER_LIST_ITEM_ACTIONS.CREATE:
+          await createFolder2({
+            id: clickedFolder.id,
+            name: clickedFolder.name,
+            type: "folder"
+          });
+          break;
+        case FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW:
+          currentFolderId.value = clickedFolder.id;
+          void router.push({
+            name: VIEWS.NEW_WORKFLOW,
+            query: { projectId: route.params?.projectId, parentFolderId: clickedFolder.id }
+          });
+          break;
+      }
+    };
+    const createFolder2 = async (parent) => {
+      const promptResponsePromise = message.prompt(
+        i18n.baseText("folders.add.to.parent.message", { interpolate: { parent: parent.name } }),
+        {
+          confirmButtonText: i18n.baseText("generic.create"),
+          cancelButtonText: i18n.baseText("generic.cancel"),
+          inputErrorMessage: i18n.baseText("folders.add.invalidName.message"),
+          inputValue: "",
+          inputPattern: /^[a-zA-Z0-9-_ ]{1,100}$/,
+          customClass: "add-folder-modal"
+        }
+      );
+      const promptResponse = await promptResponsePromise;
+      if (promptResponse.action === MODAL_CONFIRM) {
+        const folderName = promptResponse.value;
+        try {
+          const newFolder = await foldersStore.createFolder(
+            folderName,
+            route.params.projectId,
+            parent.type === "folder" ? parent.id : void 0
+          );
+          let newFolderURL = `/projects/${route.params.projectId}`;
+          if (newFolder.parentFolder) {
+            newFolderURL = `/projects/${route.params.projectId}/folders/${newFolder.id}/workflows`;
+          }
+          toast.showMessage({
+            title: i18n.baseText("folders.add.success.title"),
+            message: i18n.baseText("folders.add.success.message", {
+              interpolate: {
+                link: newFolderURL,
+                name: newFolder.name
+              }
+            }),
+            type: "success"
+          });
+          if (!workflowsAndFolders.value.length) {
+            workflowsAndFolders.value = [
+              {
+                id: newFolder.id,
+                name: newFolder.name,
+                resource: "folder",
+                createdAt: newFolder.createdAt,
+                updatedAt: newFolder.updatedAt,
+                homeProject: projectsStore.currentProject,
+                sharedWithProjects: [],
+                workflowCount: 0
+              }
+            ];
+          } else {
+            await fetchWorkflows();
+          }
+        } catch (error) {
+          toast.showError(error, "Error creating folder");
+        }
+      }
+    };
+    const createFolderInCurrent = async () => {
+      if (!route.params.projectId) return;
+      const currentParent = currentFolder.value?.name || projectName.value;
+      if (!currentParent) return;
+      await createFolder2({
+        id: route.params.folderId ?? "-1",
+        name: currentParent,
+        type: currentFolder.value ? "folder" : "project"
+      });
     };
     return (_ctx, _cache) => {
+      const _component_N8nButton = resolveComponent("N8nButton");
+      const _component_N8nTooltip = resolveComponent("N8nTooltip");
       const _component_n8n_button = resolveComponent("n8n-button");
       const _component_N8nCallout = resolveComponent("N8nCallout");
-      const _component_n8n_link = resolveComponent("n8n-link");
-      const _component_n8n_breadcrumbs = resolveComponent("n8n-breadcrumbs");
-      const _component_FolderCard = __unplugin_components_0;
+      const _component_n8n_loading = resolveComponent("n8n-loading");
+      const _component_FolderBreadcrumbs = __unplugin_components_0;
+      const _component_FolderCard = __unplugin_components_1;
       return openBlock(), createBlock(ResourcesListLayout, {
         filters: filters.value,
         "onUpdate:filters": [
@@ -1052,7 +1398,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         disabled: readOnlyEnv.value || !projectPermissions.value.workflow.create,
         loading: false,
         "resources-refreshing": loading.value,
-        "custom-page-size": 10,
+        "custom-page-size": unref(DEFAULT_WORKFLOW_PAGE_SIZE),
         "total-items": unref(workflowsStore).totalWorkflowCount,
         "dont-perform-sorting-and-filtering": true,
         "onClick:add": addWorkflow,
@@ -1060,9 +1406,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "onUpdate:currentPage": setCurrentPage,
         "onUpdate:pageSize": setPageSize,
         onSort: onSortUpdated
-      }, {
+      }, createSlots({
         header: withCtx(() => [
-          createVNode(ProjectHeader)
+          createVNode(ProjectHeader, { onCreateFolder: createFolderInCurrent })
         ]),
         callout: withCtx(() => [
           showEasyAIWorkflowCallout.value && easyAICalloutVisible.value ? (openBlock(), createBlock(_component_N8nCallout, {
@@ -1102,53 +1448,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 8, ["class"])) : createCommentVNode("", true)
         ]),
         breadcrumbs: withCtx(() => [
-          mainBreadcrumbsItems.value ? (openBlock(), createBlock(_component_n8n_breadcrumbs, {
+          breadcrumbsLoading.value ? (openBlock(), createElementBlock("div", {
             key: 0,
-            items: mainBreadcrumbsItems.value,
-            "highlight-last-item": false,
-            "path-truncated": currentFolder.value !== void 0,
-            "data-test-id": "folder-card-breadcrumbs"
-          }, createSlots({ _: 2 }, [
-            currentProject.value ? {
-              name: "prepend",
-              fn: withCtx(() => [
-                createBaseVNode("div", {
-                  class: normalizeClass(_ctx.$style["home-project"])
-                }, [
-                  createVNode(_component_n8n_link, {
-                    to: `/projects/${currentProject.value.id}`
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(N8nText), {
-                        size: "large",
-                        color: "text-base"
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(projectName.value), 1)
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["to"])
-                ], 2)
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["items", "path-truncated"])) : createCommentVNode("", true)
+            class: normalizeClass(_ctx.$style["breadcrumbs-loading"])
+          }, [
+            createVNode(_component_n8n_loading, {
+              loading: breadcrumbsLoading.value,
+              rows: 1,
+              variant: "p"
+            }, null, 8, ["loading"])
+          ], 2)) : showFolders.value && currentFolder.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(_ctx.$style["breadcrumbs-container"])
+          }, [
+            createVNode(_component_FolderBreadcrumbs, {
+              breadcrumbs: mainBreadcrumbs.value,
+              actions: mainBreadcrumbsActions.value,
+              onItemSelected: onBreadcrumbItemClick,
+              onAction: onBreadCrumbsAction
+            }, null, 8, ["breadcrumbs", "actions"])
+          ], 2)) : createCommentVNode("", true)
         ]),
         item: withCtx(({ item: data }) => [
           data.resourceType === "folder" ? (openBlock(), createBlock(_component_FolderCard, {
             key: 0,
             data,
             actions: folderCardActions.value,
+            breadcrumbs: cardBreadcrumbs.value,
             class: "mb-2xs",
-            onFolderOpened
-          }, null, 8, ["data", "actions"])) : (openBlock(), createBlock(WorkflowCard, {
+            onAction: onFolderCardAction
+          }, null, 8, ["data", "actions", "breadcrumbs"])) : (openBlock(), createBlock(WorkflowCard, {
             key: 1,
             "data-test-id": "resources-list-item",
             class: "mb-2xs",
             data,
+            breadcrumbs: cardBreadcrumbs.value,
             "workflow-list-event-bus": unref(workflowListEventBus),
             "read-only": readOnlyEnv.value,
             "onClick:tag": onClickTag,
@@ -1156,7 +1490,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "onWorkflow:moved": fetchWorkflows,
             "onWorkflow:duplicated": fetchWorkflows,
             "onWorkflow:activeToggle": onWorkflowActiveToggle
-          }, null, 8, ["data", "workflow-list-event-bus", "read-only"]))
+          }, null, 8, ["data", "breadcrumbs", "workflow-list-event-bus", "read-only"]))
         ]),
         empty: withCtx(() => [
           createBaseVNode("div", _hoisted_1, [
@@ -1246,7 +1580,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               color: "text-base",
               class: "mb-3xs"
             }, null, 8, ["label"]),
-            createVNode(_sfc_main$4, {
+            createVNode(_sfc_main$5, {
               placeholder: unref(i18n).baseText("workflowOpen.filterWorkflows"),
               "model-value": filters.value.tags,
               "create-enabled": false,
@@ -1268,7 +1602,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(statusFilterOptions.value, (option) => {
-                  return openBlock(), createBlock(unref(_sfc_main$5), {
+                  return openBlock(), createBlock(unref(_sfc_main$6), {
                     key: option.label,
                     label: option.label,
                     value: option.value,
@@ -1280,21 +1614,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 1032, ["model-value", "onUpdate:modelValue"])
           ])
         ]),
-        _: 1
-      }, 8, ["filters", "resources", "shareable", "disabled", "resources-refreshing", "total-items"]);
+        _: 2
+      }, [
+        showFolders.value ? {
+          name: "add-button",
+          fn: withCtx(() => [
+            createVNode(_component_N8nTooltip, { placement: "top" }, {
+              content: withCtx(() => [
+                createTextVNode(toDisplayString(currentParentName.value ? unref(i18n).baseText("folders.add.to.parent.message", {
+                  interpolate: { parent: currentParentName.value }
+                }) : unref(i18n).baseText("folders.add.here.message")), 1)
+              ]),
+              default: withCtx(() => [
+                createVNode(_component_N8nButton, {
+                  size: "large",
+                  icon: "folder-plus",
+                  type: "tertiary",
+                  "data-test-id": "add-folder-button",
+                  class: normalizeClass(_ctx.$style["add-folder-button"]),
+                  onClick: createFolderInCurrent
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["filters", "resources", "shareable", "disabled", "resources-refreshing", "custom-page-size", "total-items"]);
     };
   }
 });
-const actionsContainer = "_actionsContainer_11h7l_123";
-const emptyStateCard = "_emptyStateCard_11h7l_139";
-const emptyStateCardIcon = "_emptyStateCardIcon_11h7l_152";
+const actionsContainer = "_actionsContainer_j58pl_123";
+const emptyStateCard = "_emptyStateCard_j58pl_139";
+const emptyStateCardIcon = "_emptyStateCardIcon_j58pl_152";
 const style0 = {
   actionsContainer,
-  "easy-ai-workflow-callout": "_easy-ai-workflow-callout_11h7l_128",
-  "callout-trailing-content": "_callout-trailing-content_11h7l_133",
+  "easy-ai-workflow-callout": "_easy-ai-workflow-callout_j58pl_128",
+  "callout-trailing-content": "_callout-trailing-content_j58pl_133",
   emptyStateCard,
   emptyStateCardIcon,
-  "home-project": "_home-project_11h7l_161"
+  "add-folder-button": "_add-folder-button_j58pl_161",
+  "breadcrumbs-container": "_breadcrumbs-container_j58pl_165",
+  "breadcrumbs-loading": "_breadcrumbs-loading_j58pl_170"
 };
 const cssModules = {
   "$style": style0