n8n-editor-ui 1.83.1 → 1.84.0

package/dist/assets/{WorkflowsView-DG5J9u8v.js → WorkflowsView-MzPw02jI.js}

@@ -1,27 +1,25 @@
-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-BloiTH5y.js";
-import { R as ResourcesListLayout } from "./ResourcesListLayout-C9w15Q23.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-Bk7lYyKD.js";
-import { P as ProjectCardBadge } from "./ProjectCardBadge-BYZ4CZ8h.js";
-import { P as ProjectHeader } from "./ProjectHeader-AVHuknTg.js";
-import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-CHIZUcBZ.js";
-import "./useWorkflowActivate-Cn5TIR2c.js";
-import "./ProjectCreateResource-cJSSCcoG.js";
+import { d as defineComponent, U as useRoute, b as useRouter, q as computed, gh 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, gi as __unplugin_components_0$1, l as createTextVNode, t as toDisplayString, J as withModifiers, m as unref, cM as _sfc_main$4, _ as _export_sfc, a3 as useProjectsStore, aU as createSlots, a as useToast, p as useSettingsStore, L as useUIStore, u as useUsersStore, T as useWorkflowsStore, a8 as getResourcePermissions, d$ as dateFormat, aA as withDirectives, aB as vShow, gj as ResourceType, af as WORKFLOW_SHARE_MODAL_KEY, ag as useTelemetry, an as DUPLICATE_MODAL_KEY, ai as useMessage, aj as MODAL_CONFIRM, gk as PROJECT_MOVE_RESOURCE_MODAL, a2 as useSourceControlStore, au as usePostHog, E as useTagsStore, gl as useFoldersStore, a5 as useDocumentTitle, K as useDebounce, r as ref, ab as EnterpriseEditionFeature, gm as EASY_AI_WORKFLOW_EXPERIMENT, I as watch, o as onMounted, C as createEventBus, y as onBeforeUnmount, A as debounce, d2 as N8nInputLabel, ad as _sfc_main$5, gn as N8nSelect, F as Fragment, D as renderList, go as _sfc_main$6, cS as N8nHeading, c0 as N8nText, gp as N8nCard, c4 as N8nIcon, gq as DEFAULT_WORKFLOW_PAGE_SIZE, bO as AI_CREDITS_EXPERIMENT, gr as VALID_FOLDER_NAME_REGEX } from "./index-CyVlLoqB.js";
+import { R as ResourcesListLayout } from "./ResourcesListLayout-BYVhS2j5.js";
+import { W as WorkflowActivator } from "./WorkflowActivator-BvmRhIkt.js";
+import { P as ProjectCardBadge } from "./ProjectCardBadge-CGqr1_BG.js";
+import { P as ProjectHeader } from "./ProjectHeader-C8hRwBFC.js";
+import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-DlyLBhIZ.js";
+import "./useWorkflowActivate-CI3X35ZJ.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 +64,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 +89,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 +184,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 +235,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 +289,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(() => [
@@ -336,18 +345,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,8 +364,8 @@ 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();
@@ -365,6 +374,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const resourceTypeLabel = computed(() => locale.baseText("generic.workflow").toLowerCase());
     const currentUser = computed(() => usersStore.currentUser ?? {});
     const workflowPermissions = computed(() => getResourcePermissions(props.data.scopes).workflow);
+    const showFolders = computed(() => {
+      return settingsStore.isFoldersFeatureEnabled && route.name !== VIEWS.WORKFLOWS;
+    });
     const actions = computed(() => {
       const items = [
         {
@@ -382,9 +394,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 +421,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 +477,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() {
@@ -526,9 +536,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const _component_n8n_heading = resolveComponent("n8n-heading");
       const _component_n8n_tags = resolveComponent("n8n-tags");
       const _component_n8n_text = resolveComponent("n8n-text");
-      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");
       return openBlock(), createBlock(_component_n8n_card, {
@@ -566,61 +573,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = withModifiers(() => {
             }, ["stop"]))
           }, [
-            !_ctx.data.parentFolder ? (openBlock(), createBlock(ProjectCardBadge, {
-              key: 0,
+            createVNode(ProjectCardBadge, {
               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,
-                "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)),
+            }, null, 8, ["class", "resource", "resource-type", "resource-type-label", "personal-project"]),
             createVNode(WorkflowActivator, {
               class: "mr-s",
               "workflow-active": _ctx.data.active,
@@ -680,18 +639,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,73 +658,6 @@ 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,
@@ -818,47 +710,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
-      },
-      {
-        label: "Manage Tags",
-        value: FOLDER_LIST_ITEM_ACTIONS.TAGS,
-        disabled: true
+        disabled: readOnlyEnv.value || !hasPermissionToUpdateFolders.value
       },
       {
-        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 +754,33 @@ 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 showFolders = computed(() => {
+      return settingsStore.isFoldersFeatureEnabled && !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 +806,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             homeProject: resource.homeProject,
             sharedWithProjects: resource.sharedWithProjects,
             workflowCount: resource.workflowCount,
+            subFolderCount: resource.subFolderCount,
             parentFolder: resource.parentFolder
           };
         } else {
@@ -978,22 +878,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (name !== "pullWorkfolder") return;
       after(async () => await initialize());
     });
+    const onFolderDeleted = async (payload) => {
+      const folderInfo = foldersStore.getCachedFolder(payload.folderId);
+      foldersStore.deleteFoldersFromCache([payload.folderId, folderInfo?.parentFolder ?? ""]);
+      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(),
@@ -1010,36 +931,48 @@ 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;
+        }
+        await foldersStore.fetchTotalWorkflowsAndFoldersCount(routeProjectId);
+        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 +986,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const onFiltersUpdated = async () => {
       currentPage.value = 1;
       saveFiltersOnQueryString();
-      await fetchWorkflows();
+      await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true });
     };
     const onSearchUpdated = async (search) => {
       currentPage.value = 1;
       saveFiltersOnQueryString();
       if (search) {
-        await callDebounced(fetchWorkflows, { debounceTime: 500, trailing: true });
+        await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true });
       } else {
         await fetchWorkflows();
       }
     };
     const setCurrentPage = async (page) => {
       currentPage.value = page;
-      await fetchWorkflows();
+      await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true });
     };
     const setPageSize = async (size) => {
       pageSize.value = size;
-      await fetchWorkflows();
+      await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true });
     };
     const onClickTag = async (tagId) => {
       if (!filters.value.tags.includes(tagId)) {
@@ -1204,6 +1137,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 +1205,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 +1212,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 +1222,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 +1231,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,7 +1263,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!clickedFolder) return;
       switch (payload.action) {
         case FOLDER_LIST_ITEM_ACTIONS.CREATE:
-          await createFolder2({
+          await createFolder({
             id: clickedFolder.id,
             name: clickedFolder.name,
             type: "folder"
@@ -1307,17 +1276,35 @@ 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) => {
       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}$/,
+          inputErrorMessage: i18n.baseText("folders.invalidName.message"),
+          inputPattern: VALID_FOLDER_NAME_REGEX,
           customClass: "add-folder-modal"
         }
       );
@@ -1330,18 +1317,24 @@ 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) {
@@ -1354,14 +1347,56 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 updatedAt: newFolder.updatedAt,
                 homeProject: projectsStore.currentProject,
                 sharedWithProjects: [],
-                workflowCount: 0
+                workflowCount: 0,
+                subFolderCount: 0
               }
             ];
+            foldersStore.cacheFolders([
+              { id: newFolder.id, name: newFolder.name, parentFolder: currentFolder.value?.id }
+            ]);
           } else {
             await fetchWorkflows();
           }
+          telemetry.track("User created folder", {
+            folder_id: newFolder.id
+          });
         } 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"),
+          inputErrorMessage: i18n.baseText("folders.invalidName.message"),
+          inputValue: folder.name,
+          inputPattern: VALID_FOLDER_NAME_REGEX,
+          customClass: "rename-folder-modal"
+        }
+      );
+      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"));
         }
       }
     };
@@ -1369,12 +1404,106 @@ 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"
       });
     };
+    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.id
+        );
+        const isCurrentFolder = currentFolderId.value === payload.folder.id;
+        const newFolderURL = router.resolve({
+          name: VIEWS.PROJECTS_FOLDERS,
+          params: { projectId: route.params.projectId, folderId: 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) => {
+      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.id }
+        }).href;
+        const workflowResource = workflowsAndFolders.value.find(
+          (resource) => resource.id === payload.workflow.id
+        );
+        await workflowsStore.updateWorkflow(payload.workflow.id, {
+          parentFolderId: 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"));
+      }
+    };
     return (_ctx, _cache) => {
       const _component_N8nButton = resolveComponent("N8nButton");
       const _component_N8nTooltip = resolveComponent("N8nTooltip");
@@ -1401,6 +1530,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,
@@ -1459,7 +1589,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,23 +1605,23 @@ 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",
             class: "mb-2xs",
             data,
-            breadcrumbs: cardBreadcrumbs.value,
             "workflow-list-event-bus": unref(workflowListEventBus),
             "read-only": readOnlyEnv.value,
             "onClick:tag": onClickTag,
             "onWorkflow:deleted": fetchWorkflows,
             "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, [
@@ -1619,7 +1750,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         showFolders.value ? {
           name: "add-button",
           fn: withCtx(() => [
-            createVNode(_component_N8nTooltip, { placement: "top" }, {
+            createVNode(_component_N8nTooltip, {
+              placement: "top",
+              disabled: readOnlyEnv.value || !hasPermissionToCreateFolders.value
+            }, {
               content: withCtx(() => [
                 createTextVNode(toDisplayString(currentParentName.value ? unref(i18n).baseText("folders.add.to.parent.message", {
                   interpolate: { parent: currentParentName.value }
@@ -1632,30 +1766,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   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_12bsx_123";
+const emptyStateCard = "_emptyStateCard_12bsx_139";
+const emptyStateCardIcon = "_emptyStateCardIcon_12bsx_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_12bsx_128",
+  "callout-trailing-content": "_callout-trailing-content_12bsx_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_12bsx_161",
+  "breadcrumbs-container": "_breadcrumbs-container_12bsx_165",
+  "breadcrumbs-loading": "_breadcrumbs-loading_12bsx_171"
 };
 const cssModules = {
   "$style": style0