n8n-editor-ui 1.83.2 → 1.85.0

package/dist/assets/{WorkflowsView-D6AZEJR8.js → WorkflowsView-BhcJ-MjE.js}

@@ -1,27 +1,26 @@
-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-ntAcmC2q.js";
-import { R as ResourcesListLayout } from "./ResourcesListLayout-DbPhtDij.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-mNogYc60.js";
-import { P as ProjectCardBadge } from "./ProjectCardBadge-DKJ8uRN7.js";
-import { P as ProjectHeader } from "./ProjectHeader-BY3TAX3C.js";
-import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-DCq6uUmq.js";
-import "./useWorkflowActivate-BAjo-kUC.js";
-import "./ProjectCreateResource-5lC9x1Ht.js";
+import { d as defineComponent, U as useRoute, b as useRouter, q as computed, ac as ProjectTypes, c as useI18n, V as VIEWS, h as resolveComponent, i as createElementBlock, g as openBlock, j as createVNode, w as withCtx, n as normalizeClass, k as createBaseVNode, f as createCommentVNode, e as createBlock, gj as __unplugin_components_0$1, l as createTextVNode, t as toDisplayString, J as withModifiers, m as unref, cO as _sfc_main$4, _ as _export_sfc, a3 as useProjectsStore, aV as createSlots, a as useToast, p as useSettingsStore, L as useUIStore, u as useUsersStore, T as useWorkflowsStore, gk as useFoldersStore, r as ref, a8 as getResourcePermissions, fi as dateFormat, aB as withDirectives, aC as vShow, gl as ResourceType, ag as WORKFLOW_SHARE_MODAL_KEY, ah as useTelemetry, ao as DUPLICATE_MODAL_KEY, aj as useMessage, ak as MODAL_CONFIRM, gm as PROJECT_MOVE_RESOURCE_MODAL, gn as FOLDER_NAME_ILLEGAL_CHARACTERS_REGEX, go as ILLEGAL_FOLDER_CHARACTERS, gp as FOLDER_NAME_ONLY_DOTS_REGEX, gq as FOLDER_NAME_MAX_LENGTH, a2 as useSourceControlStore, av as usePostHog, E as useTagsStore, d7 as useUsageStore, gr as useInsightsStore, a5 as useDocumentTitle, K as useDebounce, ab as EnterpriseEditionFeature, gs as EASY_AI_WORKFLOW_EXPERIMENT, I as watch, o as onMounted, C as createEventBus, y as onBeforeUnmount, A as debounce, d4 as N8nInputLabel, ae as _sfc_main$5, gt as N8nSelect, F as Fragment, D as renderList, gu as _sfc_main$6, cU as N8nHeading, by as N8nText, gv as N8nCard, c6 as N8nIcon, gw as DEFAULT_WORKFLOW_PAGE_SIZE, bS as AI_CREDITS_EXPERIMENT, da as COMMUNITY_PLUS_ENROLLMENT_MODAL } from "./index-CDluwnbb.js";
+import { R as ResourcesListLayout } from "./ResourcesListLayout-C6v8Zm5q.js";
+import { W as WorkflowActivator } from "./WorkflowActivator-DeLhupjy.js";
+import { P as ProjectCardBadge } from "./ProjectCardBadge-cIqYJxKe.js";
+import { P as ProjectHeader } from "./ProjectHeader-BGrFY-5v.js";
+import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-NXaV8dgZ.js";
+import { u as useOverview, I as InsightsSummary } from "./useOverview-BBgWJdVL.js";
+import "./useWorkflowActivate-DsRC3mvG.js";
 const FOLDER_LIST_ITEM_ACTIONS = {
   OPEN: "open",
   CREATE: "create",
   CREATE_WORKFLOW: "create_workflow",
   RENAME: "rename",
   MOVE: "move",
-  CHOWN: "change_owner",
-  TAGS: "manage_tags",
   DELETE: "delete"
 };
+const _hoisted_1$2 = { "data-test-id": "folder-card" };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "FolderCard",
   props: {
     data: {},
     actions: { default: () => [] },
-    breadcrumbs: {}
+    readOnly: { type: Boolean, default: true }
   },
   emits: ["action", "folderOpened"],
   setup(__props, { emit: __emit }) {
@@ -66,23 +65,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
       emit("action", { action, folderId: props.data.id });
     };
-    const onBreadcrumbsItemClick = async (item) => {
-      if (item.href) {
-        await router.push(item.href);
-      }
-    };
     return (_ctx, _cache) => {
       const _component_n8n_icon = resolveComponent("n8n-icon");
       const _component_n8n_heading = resolveComponent("n8n-heading");
+      const _component_N8nBadge = resolveComponent("N8nBadge");
       const _component_n8n_text = resolveComponent("n8n-text");
       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");
       const _component_n8n_action_toggle = resolveComponent("n8n-action-toggle");
       const _component_n8n_card = resolveComponent("n8n-card");
       const _component_router_link = resolveComponent("router-link");
-      return openBlock(), createElementBlock("div", null, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
         createVNode(_component_router_link, {
           to: cardUrl.value,
           onClick: _cache[1] || (_cache[1] = () => emit("folderOpened", { folder: props.data }))
@@ -96,37 +90,65 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                   "data-test-id": "folder-card-icon",
                   class: normalizeClass(_ctx.$style["folder-icon"]),
                   icon: "folder",
-                  size: "large"
+                  size: "xlarge"
                 }, null, 8, ["class"])
               ]),
               header: withCtx(() => [
-                createVNode(_component_n8n_heading, {
-                  tag: "h2",
-                  bold: "",
-                  size: "small",
-                  "data-test-id": "folder-card-name"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(_ctx.data.name), 1)
-                  ]),
-                  _: 1
-                })
+                createBaseVNode("div", {
+                  class: normalizeClass(_ctx.$style["card-header"])
+                }, [
+                  createVNode(_component_n8n_heading, {
+                    tag: "h2",
+                    bold: "",
+                    size: "small",
+                    "data-test-id": "folder-card-name"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(_ctx.data.name), 1)
+                    ]),
+                    _: 1
+                  }),
+                  _ctx.readOnly ? (openBlock(), createBlock(_component_N8nBadge, {
+                    key: 0,
+                    class: "ml-3xs",
+                    theme: "tertiary",
+                    bold: ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(i18n).baseText("workflows.item.readonly")), 1)
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true)
+                ], 2)
               ]),
               footer: withCtx(() => [
                 createBaseVNode("div", {
                   class: normalizeClass(_ctx.$style["card-footer"])
                 }, [
-                  createVNode(_component_n8n_text, {
+                  _ctx.data.workflowCount > 0 ? (openBlock(), createBlock(_component_n8n_text, {
+                    key: 0,
+                    size: "small",
+                    color: "text-light",
+                    class: normalizeClass([_ctx.$style["info-cell"], _ctx.$style["info-cell--workflow-count"]]),
+                    "data-test-id": "folder-card-folder-count"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(i18n).baseText("generic.workflow", { interpolate: { count: _ctx.data.workflowCount } })), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["class"])) : createCommentVNode("", true),
+                  _ctx.data.subFolderCount > 0 ? (openBlock(), createBlock(_component_n8n_text, {
+                    key: 1,
                     size: "small",
                     color: "text-light",
                     class: normalizeClass([_ctx.$style["info-cell"], _ctx.$style["info-cell--workflow-count"]]),
                     "data-test-id": "folder-card-workflow-count"
                   }, {
                     default: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.data.workflowCount) + " " + toDisplayString(unref(i18n).baseText("generic.workflows")), 1)
+                      createTextVNode(toDisplayString(unref(i18n).baseText("generic.folder", { interpolate: { count: _ctx.data.subFolderCount } })), 1)
                     ]),
                     _: 1
-                  }, 8, ["class"]),
+                  }, 8, ["class"])) : createCommentVNode("", true),
                   createVNode(_component_n8n_text, {
                     size: "small",
                     color: "text-light",
@@ -163,56 +185,41 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                   onClick: _cache[0] || (_cache[0] = withModifiers(() => {
                   }, ["prevent"]))
                 }, [
-                  createBaseVNode("div", {
-                    class: normalizeClass(_ctx.$style.breadcrumbs)
+                  _ctx.data.homeProject ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: normalizeClass(_ctx.$style["project-pill"])
                   }, [
-                    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)
+                    createBaseVNode("div", {
+                      class: normalizeClass(_ctx.$style["home-project"]),
+                      "data-test-id": "folder-card-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
+                          })
                         ]),
-                        key: "0"
-                      } : void 0
-                    ]), 1032, ["items", "hidden-items", "path-truncated"])
-                  ], 2),
+                        _: 1
+                      }, 8, ["to"])
+                    ], 2)
+                  ], 2)) : createCommentVNode("", true),
                   _ctx.actions.length ? (openBlock(), createBlock(_component_n8n_action_toggle, {
-                    key: 0,
+                    key: 1,
                     actions: _ctx.actions,
                     theme: "dark",
                     "data-test-id": "folder-card-actions",
@@ -229,15 +236,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const card = "_card_v01dx_123";
+const card = "_card_1ughy_124";
 const style0$3 = {
   card,
-  "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"
+  "folder-icon": "_folder-icon_1ughy_132",
+  "card-header": "_card-header_1ughy_141",
+  "card-footer": "_card-footer_1ughy_149",
+  "info-cell": "_info-cell_1ughy_153",
+  "card-actions": "_card-actions_1ughy_158",
+  "project-pill": "_project-pill_1ughy_163",
+  "home-project": "_home-project_1ughy_171",
+  "info-cell--created": "_info-cell--created_1ughy_191"
 };
 const cssModules$3 = {
   "$style": style0$3
@@ -281,21 +290,22 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           "highlight-last-item": false,
           "path-truncated": _ctx.breadcrumbs.visibleItems[0].parentFolder,
           "hidden-items": _ctx.breadcrumbs.hiddenItems,
-          "data-test-id": "folder-card-breadcrumbs",
+          "data-test-id": "folder-list-breadcrumbs",
           onItemSelected: onItemSelect
         }, createSlots({ _: 2 }, [
           currentProject.value ? {
             name: "prepend",
             fn: withCtx(() => [
               createBaseVNode("div", {
-                class: normalizeClass(_ctx.$style["home-project"])
+                class: normalizeClass(_ctx.$style["home-project"]),
+                "data-test-id": "home-project"
               }, [
                 createVNode(_component_n8n_link, {
                   to: `/projects/${currentProject.value.id}`
                 }, {
                   default: withCtx(() => [
                     createVNode(_component_N8nText, {
-                      size: "large",
+                      size: "medium",
                       color: "text-base"
                     }, {
                       default: withCtx(() => [
@@ -314,18 +324,20 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         _ctx.breadcrumbs.visibleItems ? (openBlock(), createBlock(_component_n8n_action_toggle, {
           key: 1,
           actions: _ctx.actions,
+          class: normalizeClass(_ctx.$style["action-toggle"]),
           theme: "dark",
           "data-test-id": "folder-breadcrumbs-actions",
           onAction
-        }, null, 8, ["actions"])) : createCommentVNode("", true)
+        }, null, 8, ["actions", "class"])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const container = "_container_1e41k_123";
+const container = "_container_4mxjz_123";
 const style0$2 = {
   container,
-  "home-project": "_home-project_1e41k_128"
+  "action-toggle": "_action-toggle_4mxjz_128",
+  "home-project": "_home-project_4mxjz_132"
 };
 const cssModules$2 = {
   "$style": style0$2
@@ -336,18 +348,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowCard",
   props: {
     data: {},
-    breadcrumbs: {},
     readOnly: { type: Boolean, default: false },
     workflowListEventBus: { default: void 0 }
   },
-  emits: ["expand:tags", "click:tag", "workflow:deleted", "workflow:active-toggle"],
+  emits: ["expand:tags", "click:tag", "workflow:deleted", "workflow:active-toggle", "action:move-to-folder"],
   setup(__props, { emit: __emit }) {
     const WORKFLOW_LIST_ITEM_ACTIONS = {
       OPEN: "open",
       SHARE: "share",
       DUPLICATE: "duplicate",
       DELETE: "delete",
-      MOVE: "move"
+      MOVE: "move",
+      MOVE_TO_FOLDER: "moveToFolder"
     };
     const props = __props;
     const emit = __emit;
@@ -355,16 +367,57 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const message = useMessage();
     const locale = useI18n();
     const router = useRouter();
+    const route = useRoute();
     const telemetry = useTelemetry();
-    const i18n = useI18n();
     const settingsStore = useSettingsStore();
     const uiStore = useUIStore();
     const usersStore = useUsersStore();
     const workflowsStore = useWorkflowsStore();
     const projectsStore = useProjectsStore();
+    const foldersStore = useFoldersStore();
+    const hiddenBreadcrumbsItemsAsync = ref(new Promise(() => {
+    }));
     const resourceTypeLabel = computed(() => locale.baseText("generic.workflow").toLowerCase());
     const currentUser = computed(() => usersStore.currentUser ?? {});
     const workflowPermissions = computed(() => getResourcePermissions(props.data.scopes).workflow);
+    const isOverviewPage = computed(() => route.name === VIEWS.WORKFLOWS);
+    const showFolders = computed(() => {
+      return settingsStore.isFoldersFeatureEnabled && route.name !== VIEWS.WORKFLOWS;
+    });
+    const projectIcon = computed(() => {
+      const defaultIcon = { type: "icon", value: "layer-group" };
+      if (props.data.homeProject?.type === ProjectTypes.Personal) {
+        return { type: "icon", value: "user" };
+      } else if (props.data.homeProject?.type === ProjectTypes.Team) {
+        return props.data.homeProject.icon ?? defaultIcon;
+      }
+      return defaultIcon;
+    });
+    const projectName = computed(() => {
+      if (props.data.homeProject?.type === ProjectTypes.Personal) {
+        return locale.baseText("projects.menu.personal");
+      }
+      return props.data.homeProject?.name;
+    });
+    const cardBreadcrumbs = computed(() => {
+      if (props.data.parentFolder) {
+        return [
+          {
+            id: props.data.parentFolder.id,
+            name: props.data.parentFolder.name,
+            label: props.data.parentFolder.name,
+            href: router.resolve({
+              name: VIEWS.PROJECTS_FOLDERS,
+              params: {
+                projectId: props.data.homeProject?.id,
+                folderId: props.data.parentFolder.id
+              }
+            }).href
+          }
+        ];
+      }
+      return [];
+    });
     const actions = computed(() => {
       const items = [
         {
@@ -382,9 +435,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE
         });
       }
+      if (workflowPermissions.value.update && !props.readOnly && showFolders.value) {
+        items.push({
+          label: locale.baseText("folders.actions.moveToFolder"),
+          value: WORKFLOW_LIST_ITEM_ACTIONS.MOVE_TO_FOLDER
+        });
+      }
       if (workflowPermissions.value.move && projectsStore.isTeamProjectFeatureEnabled) {
         items.push({
-          label: locale.baseText("workflows.item.move"),
+          label: locale.baseText("workflows.item.changeOwner"),
           value: WORKFLOW_LIST_ITEM_ACTIONS.MOVE
         });
       }
@@ -403,28 +462,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         `d mmmm${String(props.data.createdAt).startsWith(currentYear) ? "" : ", yyyy"}`
       );
     });
-    const projectIcon = computed(() => {
-      const defaultIcon = { type: "icon", value: "layer-group" };
-      if (props.data.homeProject?.type === ProjectTypes.Personal) {
-        return { type: "icon", value: "user" };
-      } else if (props.data.homeProject?.type === ProjectTypes.Team) {
-        return props.data.homeProject.icon ?? defaultIcon;
-      }
-      return defaultIcon;
-    });
-    const projectName = computed(() => {
-      if (props.data.homeProject?.type === ProjectTypes.Personal) {
-        return i18n.baseText("projects.menu.personal");
-      }
-      return props.data.homeProject?.name;
-    });
     async function onClick(event) {
       if (event?.ctrlKey || event?.metaKey) {
-        const route = router.resolve({
+        const route2 = router.resolve({
           name: VIEWS.WORKFLOW,
           params: { name: props.data.id }
         });
-        window.open(route.href, "_blank");
+        window.open(route2.href, "_blank");
         return;
       }
       await router.push({
@@ -474,6 +518,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         case WORKFLOW_LIST_ITEM_ACTIONS.MOVE:
           moveResource();
           break;
+        case WORKFLOW_LIST_ITEM_ACTIONS.MOVE_TO_FOLDER:
+          emit("action:move-to-folder", {
+            id: props.data.id,
+            name: props.data.name,
+            parentFolderId: props.data.parentFolder?.id
+          });
+          break;
       }
     }
     async function deleteWorkflow() {
@@ -507,6 +558,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       });
       emit("workflow:deleted");
     }
+    const fetchHiddenBreadCrumbsItems = async () => {
+      if (!props.data.homeProject?.id || !projectName.value || !props.data.parentFolder) {
+        hiddenBreadcrumbsItemsAsync.value = Promise.resolve([]);
+      } else {
+        hiddenBreadcrumbsItemsAsync.value = foldersStore.getHiddenBreadcrumbsItems(
+          { id: props.data.homeProject.id, name: projectName.value },
+          props.data.parentFolder.id
+        );
+      }
+    };
     function moveResource() {
       uiStore.openModalWithData({
         name: PROJECT_MOVE_RESOURCE_MODAL,
@@ -521,11 +582,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emitWorkflowActiveToggle = (value) => {
       emit("workflow:active-toggle", value);
     };
+    const onBreadcrumbItemClick = async (item) => {
+      if (item.href) {
+        await router.push(item.href);
+      }
+    };
     return (_ctx, _cache) => {
       const _component_N8nBadge = resolveComponent("N8nBadge");
-      const _component_n8n_heading = resolveComponent("n8n-heading");
-      const _component_n8n_tags = resolveComponent("n8n-tags");
       const _component_n8n_text = resolveComponent("n8n-text");
+      const _component_n8n_tags = resolveComponent("n8n-tags");
       const _component_ProjectIcon = __unplugin_components_0$1;
       const _component_n8n_link = resolveComponent("n8n-link");
       const _component_n8n_breadcrumbs = resolveComponent("n8n-breadcrumbs");
@@ -537,7 +602,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onClick
       }, {
         header: withCtx(() => [
-          createVNode(_component_n8n_heading, {
+          createVNode(_component_n8n_text, {
             tag: "h2",
             bold: "",
             class: normalizeClass(_ctx.$style.cardHeading),
@@ -566,25 +631,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = withModifiers(() => {
             }, ["stop"]))
           }, [
-            !_ctx.data.parentFolder ? (openBlock(), createBlock(ProjectCardBadge, {
+            isOverviewPage.value ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: normalizeClass(_ctx.$style.cardBadge),
-              resource: _ctx.data,
-              "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(), createElementBlock("div", {
-              key: 1,
               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,
+                items: cardBreadcrumbs.value,
+                "hidden-items": hiddenBreadcrumbsItemsAsync.value,
+                "path-truncated": true,
                 "show-border": true,
                 "highlight-last-item": false,
+                "hidden-items-trigger": "hover",
                 theme: "small",
-                "data-test-id": "folder-card-breadcrumbs"
+                "data-test-id": "workflow-card-breadcrumbs",
+                onTooltipOpened: fetchHiddenBreadCrumbsItems,
+                onItemSelected: onBreadcrumbItemClick
               }, createSlots({ _: 2 }, [
                 _ctx.data.homeProject ? {
                   name: "prepend",
@@ -619,8 +680,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ]),
                   key: "0"
                 } : void 0
-              ]), 1032, ["items", "hidden-items", "path-truncated"])
-            ], 2)),
+              ]), 1032, ["items", "hidden-items"])
+            ], 2)) : (openBlock(), createBlock(ProjectCardBadge, {
+              key: 1,
+              class: normalizeClass(_ctx.$style.cardBadge),
+              resource: _ctx.data,
+              "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"])),
             createVNode(WorkflowActivator, {
               class: "mr-s",
               "workflow-active": _ctx.data.active,
@@ -680,18 +748,18 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 cardLink = "_cardLink_1mosm_123";
+const cardHeading = "_cardHeading_1mosm_133";
+const cardDescription = "_cardDescription_1mosm_142";
+const cardActions = "_cardActions_1mosm_149";
+const cardBadge = "_cardBadge_1mosm_176";
+const breadcrumbs = "_breadcrumbs_1mosm_177";
 const style0$1 = {
   cardLink,
   cardHeading,
   cardDescription,
   cardActions,
-  "home-project": "_home-project_dsqjo_159",
+  "home-project": "_home-project_1mosm_159",
   cardBadge,
   breadcrumbs
 };
@@ -699,79 +767,53 @@ 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
+function useFolders() {
+  const i18n = useI18n();
+  function validateFolderName(folderName) {
+    if (FOLDER_NAME_ILLEGAL_CHARACTERS_REGEX.test(folderName)) {
+      return i18n.baseText("folders.invalidName.invalidCharacters.message", {
+        interpolate: {
+          illegalChars: ILLEGAL_FOLDER_CHARACTERS.join(" ")
+        }
       });
-      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;
+    }
+    if (FOLDER_NAME_ONLY_DOTS_REGEX.test(folderName)) {
+      return i18n.baseText("folders.invalidName.only.dots.message");
+    }
+    if (folderName.startsWith(".")) {
+      return i18n.baseText("folders.invalidName.starts.with.dot..message");
+    }
+    if (folderName.trim() === "") {
+      return i18n.baseText("folders.invalidName.empty.message");
+    }
+    if (folderName.length > FOLDER_NAME_MAX_LENGTH) {
+      return i18n.baseText("folders.invalidName.tooLong.message", {
+        interpolate: {
+          maxLength: FOLDER_NAME_MAX_LENGTH
+        }
+      });
+    }
+    return true;
   }
   return {
-    fetchTotalWorkflowsAndFoldersCount,
-    breadcrumbsCache,
-    cacheFolders,
-    getCachedFolder,
-    createFolder: createFolder$1,
-    getFolderPath: getFolderPath$1,
-    totalWorkflowCount
+    validateFolderName
   };
-});
-const _hoisted_1 = { class: "text-center mt-s" };
-const _hoisted_2 = {
+}
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = { key: 1 };
+const _hoisted_5 = {
+  class: "text-center mt-s",
+  "data-test-id": "list-empty-state"
+};
+const _hoisted_6 = {
   key: 0,
   class: "mb-s"
 };
-const _hoisted_3 = { class: "mb-s" };
+const _hoisted_7 = { class: "mb-s" };
+const SEARCH_DEBOUNCE_TIME = 300;
+const FILTERS_DEBOUNCE_TIME = 100;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WorkflowsView",
   setup(__props) {
@@ -791,6 +833,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const router = useRouter();
     const message = useMessage();
     const toast = useToast();
+    const folderHelpers = useFolders();
     const sourceControlStore = useSourceControlStore();
     const usersStore = useUsersStore();
     const workflowsStore = useWorkflowsStore();
@@ -801,8 +844,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const uiStore = useUIStore();
     const tagsStore = useTagsStore();
     const foldersStore = useFoldersStore();
+    const usageStore = useUsageStore();
+    const insightsStore = useInsightsStore();
     const documentTitle = useDocumentTitle();
     const { callDebounced } = useDebounce();
+    const overview = useOverview();
     const loading = ref(false);
     const breadcrumbsLoading = ref(false);
     const filters = ref({
@@ -818,47 +864,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const pageSize = ref(DEFAULT_WORKFLOW_PAGE_SIZE);
     const currentSort = ref("updatedAt:desc");
     const currentFolderId = ref(null);
-    const folderActions = ref([
+    const folderActions = computed(() => [
       {
-        label: "Open",
+        label: i18n.baseText("generic.open"),
         value: FOLDER_LIST_ITEM_ACTIONS.OPEN,
         disabled: false,
         onlyAvailableOn: "card"
       },
       {
-        label: "Create Folder",
+        label: i18n.baseText("folders.actions.create"),
         value: FOLDER_LIST_ITEM_ACTIONS.CREATE,
-        disabled: false
+        disabled: readOnlyEnv.value || !hasPermissionToCreateFolders.value
       },
       {
-        label: "Create Workflow",
+        label: i18n.baseText("folders.actions.create.workflow"),
         value: FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW,
-        disabled: false
+        disabled: readOnlyEnv.value || !hasPermissionToCreateWorkflows.value
       },
       {
-        label: "Rename",
+        label: i18n.baseText("generic.rename"),
         value: FOLDER_LIST_ITEM_ACTIONS.RENAME,
-        disabled: true
+        disabled: readOnlyEnv.value || !hasPermissionToUpdateFolders.value
       },
       {
-        label: "Move to Folder",
+        label: i18n.baseText("folders.actions.moveToFolder"),
         value: FOLDER_LIST_ITEM_ACTIONS.MOVE,
-        disabled: true
-      },
-      {
-        label: "Change Owner",
-        value: FOLDER_LIST_ITEM_ACTIONS.CHOWN,
-        disabled: true
+        disabled: readOnlyEnv.value || !hasPermissionToUpdateFolders.value
       },
       {
-        label: "Manage Tags",
-        value: FOLDER_LIST_ITEM_ACTIONS.TAGS,
-        disabled: true
-      },
-      {
-        label: "Delete",
+        label: i18n.baseText("generic.delete"),
         value: FOLDER_LIST_ITEM_ACTIONS.DELETE,
-        disabled: true
+        disabled: readOnlyEnv.value || !hasPermissionToDeleteFolders.value
       }
     ]);
     const folderCardActions = computed(
@@ -872,16 +908,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       )
     );
     const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
-    const foldersEnabled = computed(() => settingsStore.settings.folders.enabled);
     const isOverviewPage = computed(() => route.name === VIEWS.WORKFLOWS);
     const currentUser = computed(() => usersStore.currentUser ?? {});
     const isShareable = computed(
       () => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing]
     );
-    const showFolders = computed(() => foldersEnabled.value && !isOverviewPage.value);
+    const foldersEnabled = computed(() => {
+      return settingsStore.isFoldersFeatureEnabled;
+    });
+    const teamProjectsEnabled = computed(() => {
+      return projectsStore.isTeamProjectFeatureEnabled;
+    });
+    const showFolders = computed(() => {
+      return foldersEnabled.value && !isOverviewPage.value;
+    });
     const currentFolder = computed(() => {
       return currentFolderId.value ? foldersStore.breadcrumbsCache[currentFolderId.value] : null;
     });
+    const hasPermissionToCreateFolders = computed(() => {
+      if (!currentProject.value) return false;
+      return getResourcePermissions(currentProject.value.scopes).folder.create === true;
+    });
+    const hasPermissionToUpdateFolders = computed(() => {
+      if (!currentProject.value) return false;
+      return getResourcePermissions(currentProject.value.scopes).folder.update === true;
+    });
+    const hasPermissionToDeleteFolders = computed(() => {
+      if (!currentProject.value) return false;
+      return getResourcePermissions(currentProject.value.scopes).folder.delete === true;
+    });
+    const hasPermissionToCreateWorkflows = computed(() => {
+      if (!currentProject.value) return false;
+      return getResourcePermissions(currentProject.value.scopes).workflow.create === true;
+    });
     const currentProject = computed(() => projectsStore.currentProject);
     const projectName = computed(() => {
       if (currentProject.value?.type === ProjectTypes.Personal) {
@@ -907,6 +966,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             homeProject: resource.homeProject,
             sharedWithProjects: resource.sharedWithProjects,
             workflowCount: resource.workflowCount,
+            subFolderCount: resource.subFolderCount,
             parentFolder: resource.parentFolder
           };
         } else {
@@ -961,6 +1021,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return i18n.baseText("workflows.empty.description");
       }
     });
+    const hasFilters = computed(() => {
+      return !!(filters.value.search || filters.value.status !== StatusFilter.ALL || filters.value.tags.length);
+    });
+    const isCommunity = computed(() => usageStore.planName.toLowerCase() === "community");
+    const canUserRegisterCommunityPlus = computed(
+      () => getResourcePermissions(usersStore.currentUser?.globalScopes).community.register
+    );
     watch(
       () => route.params?.projectId,
       async () => {
@@ -978,26 +1045,58 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (name !== "pullWorkfolder") return;
       after(async () => await initialize());
     });
+    const onWorkflowDeleted = async () => {
+      await Promise.all([
+        fetchWorkflows(),
+        foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId)
+      ]);
+    };
+    const onFolderDeleted = async (payload) => {
+      const folderInfo = foldersStore.getCachedFolder(payload.folderId);
+      foldersStore.deleteFoldersFromCache([payload.folderId, folderInfo?.parentFolder ?? ""]);
+      await foldersStore.fetchTotalWorkflowsAndFoldersCount(
+        route.params.projectId
+      );
+      if (currentFolderId.value === payload.folderId) {
+        void router.push({
+          name: VIEWS.PROJECTS_FOLDERS,
+          params: { projectId: route.params.projectId, folderId: folderInfo?.parentFolder ?? "" }
+        });
+      } else {
+        await fetchWorkflows();
+      }
+      telemetry.track("User deleted folder", {
+        folder_id: payload.folderId,
+        deleted_sub_folders: payload.folderCount,
+        deleted_sub_workflows: payload.workflowCount
+      });
+    };
     onMounted(async () => {
       documentTitle.set(i18n.baseText("workflows.heading"));
       void usersStore.showPersonalizationSurvey();
       workflowListEventBus.on("resource-moved", fetchWorkflows);
       workflowListEventBus.on("workflow-duplicated", fetchWorkflows);
+      workflowListEventBus.on("folder-deleted", onFolderDeleted);
+      workflowListEventBus.on("folder-moved", moveFolder);
+      workflowListEventBus.on("workflow-moved", onWorkflowMoved);
     });
     onBeforeUnmount(() => {
       workflowListEventBus.off("resource-moved", fetchWorkflows);
       workflowListEventBus.off("workflow-duplicated", fetchWorkflows);
+      workflowListEventBus.off("folder-deleted", onFolderDeleted);
+      workflowListEventBus.off("folder-moved", moveFolder);
+      workflowListEventBus.off("workflow-moved", onWorkflowMoved);
     });
     const initialize = async () => {
       loading.value = true;
       await setFiltersFromQueryString();
-      if (!route.params.folderId) {
-        currentFolderId.value = null;
-      }
+      currentFolderId.value = route.params.folderId;
       const [, resourcesPage] = await Promise.all([
         usersStore.fetchUsers(),
         fetchWorkflows(),
-        workflowsStore.fetchActiveWorkflows()
+        workflowsStore.fetchActiveWorkflows(),
+        usageStore.getLicenseInfo(),
+        foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId)
       ]);
       breadcrumbsLoading.value = false;
       workflowsAndFolders.value = resourcesPage;
@@ -1010,36 +1109,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const routeProjectId = route.params?.projectId;
       const homeProjectFilter = filters.value.homeProject || void 0;
       const parentFolder = route.params?.folderId || void 0;
-      const fetchedResources = await workflowsStore.fetchWorkflowsPage(
-        routeProjectId ?? homeProjectFilter,
-        currentPage.value,
-        pageSize.value,
-        currentSort.value,
-        {
-          name: filters.value.search || 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 ?? "0"
-          // 0 is the root folder in the API
-        },
-        showFolders.value
-      );
-      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;
+      const tags = filters.value.tags.length ? filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name) : [];
+      const activeFilter = filters.value.status === StatusFilter.ALL ? void 0 : filters.value.status === StatusFilter.ACTIVE;
+      const fetchFolders = showFolders.value && !tags.length && activeFilter === void 0;
+      try {
+        const fetchedResources = await workflowsStore.fetchWorkflowsPage(
+          routeProjectId ?? homeProjectFilter,
+          currentPage.value,
+          pageSize.value,
+          currentSort.value,
+          {
+            name: filters.value.search || void 0,
+            active: activeFilter,
+            tags: tags.length ? tags : void 0,
+            parentFolderId: parentFolder ?? (isOverviewPage.value ? void 0 : "0")
+            // Sending 0 will only show one level of folders
+          },
+          fetchFolders
+        );
+        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);
+          breadcrumbsLoading.value = false;
+        }
+        workflowsAndFolders.value = fetchedResources;
+        return fetchedResources;
+      } catch (error) {
+        toast.showError(error, i18n.baseText("workflows.list.error.fetching"));
+        void router.push({ name: VIEWS.PROJECTS_FOLDERS, params: { projectId: routeProjectId } });
+        return [];
+      } finally {
+        delayedLoading.cancel();
+        loading.value = false;
+        if (breadcrumbsLoading.value) {
+          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";
@@ -1053,24 +1163,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const onFiltersUpdated = async () => {
       currentPage.value = 1;
       saveFiltersOnQueryString();
-      await fetchWorkflows();
+      await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
     };
     const onSearchUpdated = async (search) => {
       currentPage.value = 1;
       saveFiltersOnQueryString();
       if (search) {
-        await callDebounced(fetchWorkflows, { debounceTime: 500, trailing: true });
+        await callDebounced(fetchWorkflows, { debounceTime: SEARCH_DEBOUNCE_TIME, trailing: true });
       } else {
         await fetchWorkflows();
       }
     };
     const setCurrentPage = async (page) => {
       currentPage.value = page;
-      await fetchWorkflows();
+      await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
     };
     const setPageSize = async (size) => {
       pageSize.value = size;
-      await fetchWorkflows();
+      await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
     };
     const onClickTag = async (tagId) => {
       if (!filters.value.tags.includes(tagId)) {
@@ -1204,6 +1314,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!workflow) return;
       workflow.active = data.active;
     };
+    const getFolderListItem = (folderId) => {
+      return workflowsAndFolders.value.find(
+        (resource) => resource.resource === "folder" && resource.id === folderId
+      );
+    };
+    const getFolderContent = async (folderId) => {
+      const folderListItem = getFolderListItem(folderId);
+      if (folderListItem) {
+        return {
+          workflowCount: folderListItem.workflowCount,
+          subFolderCount: folderListItem.subFolderCount
+        };
+      }
+      try {
+        const content = await foldersStore.fetchFolderContent(currentProject.value?.id ?? "", folderId);
+        return { workflowCount: content.totalWorkflows, subFolderCount: content.totalSubFolders };
+      } catch (error) {
+        toast.showMessage({
+          title: i18n.baseText("folders.delete.error.message"),
+          message: i18n.baseText("folders.not.found.message"),
+          type: "error"
+        });
+        return { workflowCount: 0, subFolderCount: 0 };
+      }
+    };
     const visibleBreadcrumbsItems = computed(() => {
       if (!currentFolder.value) return [];
       const items = [];
@@ -1247,20 +1382,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         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;
@@ -1268,7 +1389,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           currentFolderId.value = item.id;
           loading.value = false;
         }).catch((error) => {
-          toast.showError(error, "Error navigating to folder");
+          toast.showError(error, i18n.baseText("folders.open.error.title"));
         });
       }
     };
@@ -1278,7 +1399,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (!route.params.projectId) return;
           const currentParent = currentFolder.value?.name || projectName.value;
           if (!currentParent) return;
-          await createFolder2({
+          await createFolder({
             id: route.params.folderId ?? "-1",
             name: currentParent,
             type: currentFolder.value ? "folder" : "project"
@@ -1287,6 +1408,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         case FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW:
           addWorkflow();
           break;
+        case FOLDER_LIST_ITEM_ACTIONS.DELETE:
+          if (!route.params.folderId) return;
+          const content = await getFolderContent(route.params.folderId);
+          await deleteFolder(
+            route.params.folderId,
+            content.workflowCount,
+            content.subFolderCount
+          );
+          break;
+        case FOLDER_LIST_ITEM_ACTIONS.RENAME:
+          if (!route.params.folderId) return;
+          await renameFolder(route.params.folderId);
+          break;
+        case FOLDER_LIST_ITEM_ACTIONS.MOVE:
+          if (!currentFolder.value) return;
+          uiStore.openMoveToFolderModal(
+            "folder",
+            {
+              id: currentFolder.value?.id,
+              name: currentFolder.value?.name,
+              parentFolderId: currentFolder.value?.parentFolder
+            },
+            workflowListEventBus
+          );
+          break;
       }
     };
     const onFolderCardAction = async (payload) => {
@@ -1294,11 +1440,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!clickedFolder) return;
       switch (payload.action) {
         case FOLDER_LIST_ITEM_ACTIONS.CREATE:
-          await createFolder2({
-            id: clickedFolder.id,
-            name: clickedFolder.name,
-            type: "folder"
-          });
+          await createFolder(
+            {
+              id: clickedFolder.id,
+              name: clickedFolder.name,
+              type: "folder"
+            },
+            { openAfterCreate: true }
+          );
           break;
         case FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW:
           currentFolderId.value = clickedFolder.id;
@@ -1307,17 +1456,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             query: { projectId: route.params?.projectId, parentFolderId: clickedFolder.id }
           });
           break;
+        case FOLDER_LIST_ITEM_ACTIONS.DELETE: {
+          const content = await getFolderContent(clickedFolder.id);
+          await deleteFolder(clickedFolder.id, content.workflowCount, content.subFolderCount);
+          break;
+        }
+        case FOLDER_LIST_ITEM_ACTIONS.RENAME:
+          await renameFolder(clickedFolder.id);
+          break;
+        case FOLDER_LIST_ITEM_ACTIONS.MOVE:
+          uiStore.openMoveToFolderModal(
+            "folder",
+            {
+              id: clickedFolder.id,
+              name: clickedFolder.name,
+              parentFolderId: clickedFolder.parentFolder
+            },
+            workflowListEventBus
+          );
+          break;
       }
     };
-    const createFolder2 = async (parent) => {
+    const createFolder = async (parent, options = { openAfterCreate: false }) => {
       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}$/,
+          inputValidator: folderHelpers.validateFolderName,
           customClass: "add-folder-modal"
         }
       );
@@ -1330,51 +1496,228 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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({
+          const newFolderURL = router.resolve({
+            name: VIEWS.PROJECTS_FOLDERS,
+            params: { projectId: route.params.projectId, folderId: newFolder.id }
+          }).href;
+          toast.showToast({
             title: i18n.baseText("folders.add.success.title"),
             message: i18n.baseText("folders.add.success.message", {
               interpolate: {
                 link: newFolderURL,
-                name: newFolder.name
+                folderName: newFolder.name
               }
             }),
+            onClick: (event) => {
+              if (event?.target instanceof HTMLAnchorElement) {
+                event.preventDefault();
+                void router.push(newFolderURL);
+              }
+            },
             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
-              }
-            ];
+          telemetry.track("User created folder", {
+            folder_id: newFolder.id
+          });
+          if (options.openAfterCreate) {
+            await router.push({
+              name: VIEWS.PROJECTS_FOLDERS,
+              params: { projectId: route.params.projectId, folderId: parent.id }
+            });
           } else {
-            await fetchWorkflows();
+            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,
+                  subFolderCount: 0
+                }
+              ];
+              foldersStore.cacheFolders([
+                { id: newFolder.id, name: newFolder.name, parentFolder: currentFolder.value?.id }
+              ]);
+            } else {
+              await fetchWorkflows();
+            }
           }
         } catch (error) {
-          toast.showError(error, "Error creating folder");
+          toast.showError(error, i18n.baseText("folders.create.error.title"));
+        }
+      }
+    };
+    const renameFolder = async (folderId) => {
+      const folder = foldersStore.getCachedFolder(folderId);
+      if (!folder || !currentProject.value) return;
+      const promptResponsePromise = message.prompt(
+        i18n.baseText("folders.rename.message", { interpolate: { folderName: folder.name } }),
+        {
+          confirmButtonText: i18n.baseText("generic.rename"),
+          cancelButtonText: i18n.baseText("generic.cancel"),
+          inputValue: folder.name,
+          customClass: "rename-folder-modal",
+          inputValidator: folderHelpers.validateFolderName
+        }
+      );
+      const promptResponse = await promptResponsePromise;
+      if (promptResponse.action === MODAL_CONFIRM) {
+        const newFolderName = promptResponse.value;
+        try {
+          await foldersStore.renameFolder(currentProject.value?.id, folderId, newFolderName);
+          foldersStore.breadcrumbsCache[folderId].name = newFolderName;
+          toast.showMessage({
+            title: i18n.baseText("folders.rename.success.message", {
+              interpolate: { folderName: newFolderName }
+            }),
+            type: "success"
+          });
+          await fetchWorkflows();
+          telemetry.track("User renamed folder", {
+            folder_id: folderId
+          });
+        } catch (error) {
+          toast.showError(error, i18n.baseText("folders.rename.error.title"));
         }
       }
     };
     const createFolderInCurrent = async () => {
+      if (isCommunity.value && canUserRegisterCommunityPlus.value) {
+        uiStore.openModalWithData({
+          name: COMMUNITY_PLUS_ENROLLMENT_MODAL,
+          data: { customHeading: i18n.baseText("folders.registeredCommunity.cta.heading") }
+        });
+        return;
+      }
       if (!route.params.projectId) return;
       const currentParent = currentFolder.value?.name || projectName.value;
       if (!currentParent) return;
-      await createFolder2({
+      await createFolder({
         id: route.params.folderId ?? "-1",
         name: currentParent,
         type: currentFolder.value ? "folder" : "project"
       });
     };
+    const deleteFolder = async (folderId, workflowCount, subFolderCount) => {
+      if (subFolderCount || workflowCount) {
+        uiStore.openDeleteFolderModal(folderId, workflowListEventBus, {
+          workflowCount,
+          subFolderCount
+        });
+      } else {
+        await foldersStore.deleteFolder(route.params.projectId, folderId);
+        toast.showMessage({
+          title: i18n.baseText("folders.delete.success.message"),
+          type: "success"
+        });
+        await onFolderDeleted({ folderId, workflowCount, folderCount: subFolderCount });
+      }
+    };
+    const moveFolder = async (payload) => {
+      if (!route.params.projectId) return;
+      try {
+        await foldersStore.moveFolder(
+          route.params.projectId,
+          payload.folder.id,
+          payload.newParent.type === "project" ? "0" : payload.newParent.id
+        );
+        const isCurrentFolder = currentFolderId.value === payload.folder.id;
+        const newFolderURL = router.resolve({
+          name: VIEWS.PROJECTS_FOLDERS,
+          params: {
+            projectId: route.params.projectId,
+            folderId: payload.newParent.type === "project" ? void 0 : payload.newParent.id
+          }
+        }).href;
+        if (isCurrentFolder) {
+          void router.push(newFolderURL);
+        } else {
+          toast.showToast({
+            title: i18n.baseText("folders.move.success.title"),
+            message: i18n.baseText("folders.move.success.message", {
+              interpolate: { folderName: payload.folder.name, newFolderName: payload.newParent.name }
+            }),
+            onClick: (event) => {
+              if (event?.target instanceof HTMLAnchorElement) {
+                event.preventDefault();
+                void router.push(newFolderURL);
+              }
+            },
+            type: "success"
+          });
+          await fetchWorkflows();
+        }
+      } catch (error) {
+        toast.showError(error, i18n.baseText("folders.move.error.title"));
+      }
+    };
+    const moveWorkflowToFolder = async (payload) => {
+      if (isCommunity.value && canUserRegisterCommunityPlus.value) {
+        uiStore.openModalWithData({
+          name: COMMUNITY_PLUS_ENROLLMENT_MODAL,
+          data: { customHeading: i18n.baseText("folders.registeredCommunity.cta.heading") }
+        });
+        return;
+      }
+      uiStore.openMoveToFolderModal(
+        "workflow",
+        { id: payload.id, name: payload.name, parentFolderId: payload.parentFolderId },
+        workflowListEventBus
+      );
+    };
+    const onWorkflowMoved = async (payload) => {
+      if (!route.params.projectId) return;
+      try {
+        const newFolderURL = router.resolve({
+          name: VIEWS.PROJECTS_FOLDERS,
+          params: {
+            projectId: route.params.projectId,
+            folderId: payload.newParent.type === "project" ? void 0 : payload.newParent.id
+          }
+        }).href;
+        const workflowResource = workflowsAndFolders.value.find(
+          (resource) => resource.id === payload.workflow.id
+        );
+        await workflowsStore.updateWorkflow(payload.workflow.id, {
+          parentFolderId: payload.newParent.type === "project" ? "0" : payload.newParent.id,
+          versionId: workflowResource?.versionId
+        });
+        await fetchWorkflows();
+        toast.showToast({
+          title: i18n.baseText("folders.move.workflow.success.title"),
+          message: i18n.baseText("folders.move.workflow.success.message", {
+            interpolate: { workflowName: payload.workflow.name, newFolderName: payload.newParent.name }
+          }),
+          onClick: (event) => {
+            if (event?.target instanceof HTMLAnchorElement) {
+              event.preventDefault();
+              void router.push(newFolderURL);
+            }
+          },
+          type: "success"
+        });
+        telemetry.track("User moved content", {
+          workflow_id: payload.workflow.id,
+          source_folder_id: payload.workflow.oldParentId,
+          destination_folder_id: payload.newParent.id
+        });
+      } catch (error) {
+        toast.showError(error, i18n.baseText("folders.move.workflow.error.title"));
+      }
+    };
+    const onCreateWorkflowClick = () => {
+      void router.push({
+        name: VIEWS.NEW_WORKFLOW,
+        query: {
+          projectId: currentProject.value?.id,
+          parentFolderId: route.params.folderId
+        }
+      });
+    };
     return (_ctx, _cache) => {
       const _component_N8nButton = resolveComponent("N8nButton");
       const _component_N8nTooltip = resolveComponent("N8nTooltip");
@@ -1383,6 +1726,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_n8n_loading = resolveComponent("n8n-loading");
       const _component_FolderBreadcrumbs = __unplugin_components_0;
       const _component_FolderCard = __unplugin_components_1;
+      const _component_n8n_action_box = resolveComponent("n8n-action-box");
       return openBlock(), createBlock(ResourcesListLayout, {
         filters: filters.value,
         "onUpdate:filters": [
@@ -1401,6 +1745,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "custom-page-size": unref(DEFAULT_WORKFLOW_PAGE_SIZE),
         "total-items": unref(workflowsStore).totalWorkflowCount,
         "dont-perform-sorting-and-filtering": true,
+        "has-empty-state": unref(foldersStore).totalWorkflowCount === 0 && !currentFolderId.value,
         "onClick:add": addWorkflow,
         "onUpdate:search": onSearchUpdated,
         "onUpdate:currentPage": setCurrentPage,
@@ -1408,7 +1753,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onSort: onSortUpdated
       }, createSlots({
         header: withCtx(() => [
-          createVNode(ProjectHeader, { onCreateFolder: createFolderInCurrent })
+          createVNode(ProjectHeader, { onCreateFolder: createFolderInCurrent }, {
+            default: withCtx(() => [
+              unref(overview).isOverviewSubPage ? (openBlock(), createBlock(InsightsSummary, {
+                key: 0,
+                loading: unref(insightsStore).summary.isLoading,
+                summary: unref(insightsStore).summary.state
+              }, null, 8, ["loading", "summary"])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
         ]),
         callout: withCtx(() => [
           showEasyAIWorkflowCallout.value && easyAICalloutVisible.value ? (openBlock(), createBlock(_component_N8nCallout, {
@@ -1459,7 +1813,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 8, ["loading"])
           ], 2)) : showFolders.value && currentFolder.value ? (openBlock(), createElementBlock("div", {
             key: 1,
-            class: normalizeClass(_ctx.$style["breadcrumbs-container"])
+            class: normalizeClass(_ctx.$style["breadcrumbs-container"]),
+            "data-test-id": "main-breadcrumbs"
           }, [
             createVNode(_component_FolderBreadcrumbs, {
               breadcrumbs: mainBreadcrumbs.value,
@@ -1474,26 +1829,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: 0,
             data,
             actions: folderCardActions.value,
-            breadcrumbs: cardBreadcrumbs.value,
+            "read-only": readOnlyEnv.value || !hasPermissionToDeleteFolders.value && !hasPermissionToCreateFolders.value,
             class: "mb-2xs",
             onAction: onFolderCardAction
-          }, null, 8, ["data", "actions", "breadcrumbs"])) : (openBlock(), createBlock(WorkflowCard, {
+          }, null, 8, ["data", "actions", "read-only"])) : (openBlock(), createBlock(WorkflowCard, {
             key: 1,
-            "data-test-id": "resources-list-item",
+            "data-test-id": "resources-list-item-workflow",
             class: "mb-2xs",
             data,
-            breadcrumbs: cardBreadcrumbs.value,
             "workflow-list-event-bus": unref(workflowListEventBus),
             "read-only": readOnlyEnv.value,
             "onClick:tag": onClickTag,
-            "onWorkflow:deleted": fetchWorkflows,
+            "onWorkflow:deleted": onWorkflowDeleted,
             "onWorkflow:moved": fetchWorkflows,
             "onWorkflow:duplicated": fetchWorkflows,
-            "onWorkflow:activeToggle": onWorkflowActiveToggle
-          }, null, 8, ["data", "breadcrumbs", "workflow-list-event-bus", "read-only"]))
+            "onWorkflow:activeToggle": onWorkflowActiveToggle,
+            "onAction:moveToFolder": moveWorkflowToFolder
+          }, null, 8, ["data", "workflow-list-event-bus", "read-only"]))
         ]),
         empty: withCtx(() => [
-          createBaseVNode("div", _hoisted_1, [
+          createBaseVNode("div", _hoisted_5, [
             createVNode(unref(N8nHeading), {
               tag: "h2",
               size: "xlarge",
@@ -1572,7 +1927,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ], 2)) : createCommentVNode("", true)
         ]),
         filters: withCtx(({ setKeyValue }) => [
-          unref(settingsStore).areTagsEnabled ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          unref(settingsStore).areTagsEnabled ? (openBlock(), createElementBlock("div", _hoisted_6, [
             createVNode(unref(N8nInputLabel), {
               label: unref(i18n).baseText("workflows.filters.tags"),
               bold: false,
@@ -1587,7 +1942,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "onUpdate:modelValue": ($event) => setKeyValue("tags", $event)
             }, null, 8, ["placeholder", "model-value", "onUpdate:modelValue"])
           ])) : createCommentVNode("", true),
-          createBaseVNode("div", _hoisted_3, [
+          createBaseVNode("div", _hoisted_7, [
             createVNode(unref(N8nInputLabel), {
               label: unref(i18n).baseText("workflows.filters.status"),
               bold: false,
@@ -1614,48 +1969,78 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 1032, ["model-value", "onUpdate:modelValue"])
           ])
         ]),
+        postamble: withCtx(() => [
+          workflowsAndFolders.value.length === 0 && currentFolder.value && !hasFilters.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style["empty-folder-container"]),
+            "data-test-id": "empty-folder-container"
+          }, [
+            createVNode(_component_n8n_action_box, {
+              "data-test-id": "empty-folder-action-box",
+              heading: unref(i18n).baseText("folders.empty.actionbox.title", {
+                interpolate: { folderName: currentFolder.value.name }
+              }),
+              "button-text": unref(i18n).baseText("generic.create.workflow"),
+              "button-type": "secondary",
+              "button-disabled": readOnlyEnv.value || !projectPermissions.value.workflow.create,
+              "onClick:button": onCreateWorkflowClick
+            }, {
+              disabledButtonTooltip: withCtx(() => [
+                createTextVNode(toDisplayString(readOnlyEnv.value ? unref(i18n).baseText("readOnlyEnv.cantAdd.workflow") : unref(i18n).baseText("generic.missing.permissions")), 1)
+              ]),
+              _: 1
+            }, 8, ["heading", "button-text", "button-disabled"])
+          ], 2)) : createCommentVNode("", true)
+        ]),
         _: 2
       }, [
-        showFolders.value ? {
+        foldersEnabled.value ? {
           name: "add-button",
           fn: withCtx(() => [
-            createVNode(_component_N8nTooltip, { placement: "top" }, {
+            createVNode(_component_N8nTooltip, {
+              placement: "top",
+              disabled: !(isOverviewPage.value || !readOnlyEnv.value && hasPermissionToCreateFolders.value)
+            }, {
               content: withCtx(() => [
-                createTextVNode(toDisplayString(currentParentName.value ? unref(i18n).baseText("folders.add.to.parent.message", {
+                isOverviewPage.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+                  teamProjectsEnabled.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(i18n).baseText("folders.add.overview.withProjects.message")), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(i18n).baseText("folders.add.overview.community.message")), 1))
+                ])) : !readOnlyEnv.value && hasPermissionToCreateFolders.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(currentParentName.value ? unref(i18n).baseText("folders.add.to.parent.message", {
                   interpolate: { parent: currentParentName.value }
-                }) : unref(i18n).baseText("folders.add.here.message")), 1)
+                }) : unref(i18n).baseText("folders.add.here.message")), 1)) : createCommentVNode("", true)
               ]),
               default: withCtx(() => [
                 createVNode(_component_N8nButton, {
-                  size: "large",
+                  size: "small",
                   icon: "folder-plus",
                   type: "tertiary",
                   "data-test-id": "add-folder-button",
                   class: normalizeClass(_ctx.$style["add-folder-button"]),
+                  disabled: readOnlyEnv.value || !hasPermissionToCreateFolders.value,
                   onClick: createFolderInCurrent
-                }, null, 8, ["class"])
+                }, null, 8, ["class", "disabled"])
               ]),
               _: 1
-            })
+            }, 8, ["disabled"])
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["filters", "resources", "shareable", "disabled", "resources-refreshing", "custom-page-size", "total-items"]);
+      ]), 1032, ["filters", "resources", "shareable", "disabled", "resources-refreshing", "custom-page-size", "total-items", "has-empty-state"]);
     };
   }
 });
-const actionsContainer = "_actionsContainer_j58pl_123";
-const emptyStateCard = "_emptyStateCard_j58pl_139";
-const emptyStateCardIcon = "_emptyStateCardIcon_j58pl_152";
+const actionsContainer = "_actionsContainer_f2oet_123";
+const emptyStateCard = "_emptyStateCard_f2oet_139";
+const emptyStateCardIcon = "_emptyStateCardIcon_f2oet_152";
 const style0 = {
   actionsContainer,
-  "easy-ai-workflow-callout": "_easy-ai-workflow-callout_j58pl_128",
-  "callout-trailing-content": "_callout-trailing-content_j58pl_133",
+  "easy-ai-workflow-callout": "_easy-ai-workflow-callout_f2oet_128",
+  "callout-trailing-content": "_callout-trailing-content_f2oet_133",
   emptyStateCard,
   emptyStateCardIcon,
-  "add-folder-button": "_add-folder-button_j58pl_161",
-  "breadcrumbs-container": "_breadcrumbs-container_j58pl_165",
-  "breadcrumbs-loading": "_breadcrumbs-loading_j58pl_170"
+  "add-folder-button": "_add-folder-button_f2oet_161",
+  "breadcrumbs-container": "_breadcrumbs-container_f2oet_166",
+  "breadcrumbs-loading": "_breadcrumbs-loading_f2oet_172",
+  "empty-folder-container": "_empty-folder-container_f2oet_178"
 };
 const cssModules = {
   "$style": style0