n8n-editor-ui 1.92.0 → 1.94.0

package/dist/assets/{WorkflowsView-Cr2D0vym.js → WorkflowsView-BlvgD3xI.js}

@@ -1,11 +1,12 @@
-import { P as ProjectCardBadge } from "./ProjectCardBadge-BNn2hiMe.js";
-import { d as defineComponent, R as useRoute, b as useRouter, a2 as useFoldersStore, r as ref, q as computed, c as useI18n, ab as ProjectTypes, 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, m as unref, gZ as ResourceType, b2 as withModifiers, l as createTextVNode, t as toDisplayString, d3 as _sfc_main$3, _ as _export_sfc, a as useToast, p as useSettingsStore, H as useUIStore, u as useUsersStore, Q as useWorkflowsStore, a1 as useProjectsStore, a7 as getResourcePermissions, fR as dateFormat, aA as withDirectives, aB as vShow, af as WORKFLOW_SHARE_MODAL_KEY, ag as useTelemetry, an as DUPLICATE_MODAL_KEY, ai as useMessage, aj as MODAL_CONFIRM, g_ as PROJECT_MOVE_RESOURCE_MODAL, g$ as FOLDER_NAME_ILLEGAL_CHARACTERS_REGEX, h0 as ILLEGAL_FOLDER_CHARACTERS, h1 as FOLDER_NAME_ONLY_DOTS_REGEX, h2 as FOLDER_NAME_MAX_LENGTH, a0 as useSourceControlStore, au as usePostHog, E as useTagsStore, dn as useUsageStore, h3 as useInsightsStore, a4 as useDocumentTitle, G as useDebounce, aa as EnterpriseEditionFeature, h4 as EASY_AI_WORKFLOW_EXPERIMENT, X as watch, o as onMounted, C as createEventBus, y as onBeforeUnmount, A as debounce, h5 as PROJECT_ROOT, aV as createSlots, dk as N8nInputLabel, ad as _sfc_main$4, ee as N8nSelect, F as Fragment, D as renderList, ed as _sfc_main$5, d8 as N8nHeading, be as N8nText, h6 as N8nCard, bE as N8nIcon, h7 as Draggable, h8 as DEFAULT_WORKFLOW_PAGE_SIZE, dr as COMMUNITY_PLUS_ENROLLMENT_MODAL } from "./index-B6eunbxp.js";
-import { W as WorkflowActivator, _ as __unplugin_components_0, I as InlineTextEdit } from "./WorkflowActivator-CPCbgb_n.js";
-import { R as ResourcesListLayout } from "./ResourcesListLayout-1d9Ic6VX.js";
-import { u as useOverview, P as ProjectHeader } from "./ProjectHeader-CaEZ2OPj.js";
-import { I as InsightsSummary } from "./InsightsSummary-gldDQ9rg.js";
-import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-CLqHnasO.js";
-import "./useWorkflowActivate-DFqvrpj6.js";
+import { P as ProjectCardBadge, _ as _sfc_main$4 } from "./ProjectCardBadge-3xpk5Z4e.js";
+import { d as defineComponent, R as useRoute, b as useRouter, a2 as useFoldersStore, r as ref, q as computed, c as useI18n, ab as ProjectTypes, 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, m as unref, fW as ResourceType, b3 as withModifiers, l as createTextVNode, t as toDisplayString, db as _sfc_main$3, _ as _export_sfc, a as useToast, p as useSettingsStore, H as useUIStore, u as useUsersStore, Q as useWorkflowsStore, a1 as useProjectsStore, a7 as getResourcePermissions, eC as dateFormat, aA as withDirectives, aB as vShow, af as WORKFLOW_SHARE_MODAL_KEY, ag as useTelemetry, an as DUPLICATE_MODAL_KEY, ai as useMessage, aj as MODAL_CONFIRM, fX as PROJECT_MOVE_RESOURCE_MODAL, fY as FOLDER_NAME_ILLEGAL_CHARACTERS_REGEX, fZ as ILLEGAL_FOLDER_CHARACTERS, f_ as FOLDER_NAME_ONLY_DOTS_REGEX, f$ as FOLDER_NAME_MAX_LENGTH, a0 as useSourceControlStore, au as usePostHog, E as useTagsStore, dw as useUsageStore, g0 as useInsightsStore, a4 as useDocumentTitle, G as useDebounce, aa as EnterpriseEditionFeature, g1 as EASY_AI_WORKFLOW_EXPERIMENT, X as watch, o as onMounted, C as createEventBus, y as onBeforeUnmount, A as debounce, g2 as PROJECT_ROOT, aV as createSlots, dt as N8nInputLabel, ad as _sfc_main$5, en as N8nSelect, F as Fragment, D as renderList, em as _sfc_main$6, dg as N8nHeading, bf as N8nText, g3 as N8nCard, bF as N8nIcon, g4 as Draggable, g5 as DEFAULT_WORKFLOW_PAGE_SIZE, dz as COMMUNITY_PLUS_ENROLLMENT_MODAL } from "./index-hdsPF3tl.js";
+import { W as WorkflowActivator, _ as __unplugin_components_0, I as InlineTextEdit } from "./WorkflowActivator-e7wvW1kJ.js";
+import { R as ResourcesListLayout } from "./ResourcesListLayout-DAxou314.js";
+import { P as ProjectHeader } from "./ProjectHeader-CpoOisjf.js";
+import { u as useProjectPages } from "./useProjectPages-OGc-GAxb.js";
+import { I as InsightsSummary } from "./InsightsSummary-BcXd-3nU.js";
+import { g as getEasyAiWorkflowJson } from "./easyAiWorkflowUtils-_kvYb5hw.js";
+import "./useWorkflowActivate-CJ1hLmv2.js";
 const FOLDER_LIST_ITEM_ACTIONS = {
   OPEN: "open",
   CREATE: "create",
@@ -309,13 +310,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     workflowListEventBus: { default: void 0 },
     showOwnershipBadge: { type: Boolean, default: false }
   },
-  emits: ["expand:tags", "click:tag", "workflow:deleted", "workflow:active-toggle", "action:move-to-folder"],
+  emits: ["expand:tags", "click:tag", "workflow:deleted", "workflow:archived", "workflow:unarchived", "workflow:active-toggle", "action:move-to-folder"],
   setup(__props, { emit: __emit }) {
     const WORKFLOW_LIST_ITEM_ACTIONS = {
       OPEN: "open",
       SHARE: "share",
       DUPLICATE: "duplicate",
       DELETE: "delete",
+      ARCHIVE: "archive",
+      UNARCHIVE: "unarchive",
       MOVE: "move",
       MOVE_TO_FOLDER: "moveToFolder"
     };
@@ -381,7 +384,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           value: WORKFLOW_LIST_ITEM_ACTIONS.SHARE
         }
       ];
-      if (workflowPermissions.value.create && !props.readOnly) {
+      if (workflowPermissions.value.create && !props.readOnly && !props.data.isArchived) {
         items.push({
           label: locale.baseText("workflows.item.duplicate"),
           value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE
@@ -400,10 +403,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         });
       }
       if (workflowPermissions.value.delete && !props.readOnly) {
-        items.push({
-          label: locale.baseText("workflows.item.delete"),
-          value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE
-        });
+        if (!props.data.isArchived) {
+          items.push({
+            label: locale.baseText("workflows.item.archive"),
+            value: WORKFLOW_LIST_ITEM_ACTIONS.ARCHIVE
+          });
+        } else {
+          items.push({
+            label: locale.baseText("workflows.item.delete"),
+            value: WORKFLOW_LIST_ITEM_ACTIONS.DELETE
+          });
+          items.push({
+            label: locale.baseText("workflows.item.unarchive"),
+            value: WORKFLOW_LIST_ITEM_ACTIONS.UNARCHIVE
+          });
+        }
       }
       return items;
     });
@@ -471,6 +485,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         case WORKFLOW_LIST_ITEM_ACTIONS.DELETE:
           await deleteWorkflow();
           break;
+        case WORKFLOW_LIST_ITEM_ACTIONS.ARCHIVE:
+          await archiveWorkflow();
+          break;
+        case WORKFLOW_LIST_ITEM_ACTIONS.UNARCHIVE:
+          await unarchiveWorkflow();
+          break;
         case WORKFLOW_LIST_ITEM_ACTIONS.MOVE:
           moveResource();
           break;
@@ -509,11 +529,63 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return;
       }
       toast.showMessage({
-        title: locale.baseText("mainSidebar.showMessage.handleSelect1.title"),
+        title: locale.baseText("mainSidebar.showMessage.handleSelect1.title", {
+          interpolate: { workflowName: props.data.name }
+        }),
         type: "success"
       });
       emit("workflow:deleted");
     }
+    async function archiveWorkflow() {
+      if (props.data.active) {
+        const archiveConfirmed = await message.confirm(
+          locale.baseText("mainSidebar.confirmMessage.workflowArchive.message", {
+            interpolate: { workflowName: props.data.name }
+          }),
+          locale.baseText("mainSidebar.confirmMessage.workflowArchive.headline"),
+          {
+            type: "warning",
+            confirmButtonText: locale.baseText(
+              "mainSidebar.confirmMessage.workflowArchive.confirmButtonText"
+            ),
+            cancelButtonText: locale.baseText(
+              "mainSidebar.confirmMessage.workflowArchive.cancelButtonText"
+            )
+          }
+        );
+        if (archiveConfirmed !== MODAL_CONFIRM) {
+          return;
+        }
+      }
+      try {
+        await workflowsStore.archiveWorkflow(props.data.id);
+      } catch (error) {
+        toast.showError(error, locale.baseText("generic.archiveWorkflowError"));
+        return;
+      }
+      toast.showMessage({
+        title: locale.baseText("mainSidebar.showMessage.handleArchive.title", {
+          interpolate: { workflowName: props.data.name }
+        }),
+        type: "success"
+      });
+      emit("workflow:archived");
+    }
+    async function unarchiveWorkflow() {
+      try {
+        await workflowsStore.unarchiveWorkflow(props.data.id);
+      } catch (error) {
+        toast.showError(error, locale.baseText("generic.unarchiveWorkflowError"));
+        return;
+      }
+      toast.showMessage({
+        title: locale.baseText("mainSidebar.showMessage.handleUnarchive.title", {
+          interpolate: { workflowName: props.data.name }
+        }),
+        type: "success"
+      });
+      emit("workflow:unarchived");
+    }
     const fetchHiddenBreadCrumbsItems = async () => {
       if (!props.data.homeProject?.id || !projectName.value || !props.data.parentFolder) {
         hiddenBreadcrumbsItemsAsync.value = Promise.resolve([]);
@@ -557,7 +629,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const _component_n8n_action_toggle = resolveComponent("n8n-action-toggle");
       const _component_n8n_card = resolveComponent("n8n-card");
       return openBlock(), createBlock(_component_n8n_card, {
-        class: normalizeClass(_ctx.$style.cardLink),
+        class: normalizeClass({
+          [_ctx.$style.cardLink]: true,
+          [_ctx.$style.cardArchived]: _ctx.data.isArchived
+        }),
         "data-test-id": "workflow-card",
         onClick
       }, {
@@ -565,7 +640,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           createVNode(_component_n8n_text, {
             tag: "h2",
             bold: "",
-            class: normalizeClass(_ctx.$style.cardHeading),
+            class: normalizeClass({
+              [_ctx.$style.cardHeading]: true,
+              [_ctx.$style.cardHeadingArchived]: _ctx.data.isArchived
+            }),
             "data-test-id": "workflow-card-name"
           }, {
             default: withCtx(() => [
@@ -623,14 +701,28 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }, 8, ["class", "resource", "resource-type", "resource-type-label", "personal-project"])) : createCommentVNode("", true),
-            createVNode(WorkflowActivator, {
+            _ctx.data.isArchived ? (openBlock(), createBlock(_component_n8n_text, {
+              key: 1,
+              color: "text-light",
+              size: "small",
+              bold: "",
+              class: "ml-s mr-s",
+              "data-test-id": "workflow-card-archived"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(locale).baseText("workflows.item.archived")), 1)
+              ]),
+              _: 1
+            })) : (openBlock(), createBlock(WorkflowActivator, {
+              key: 2,
               class: "mr-s",
+              "is-archived": _ctx.data.isArchived,
               "workflow-active": _ctx.data.active,
               "workflow-id": _ctx.data.id,
               "workflow-permissions": workflowPermissions.value,
               "data-test-id": "workflow-card-activator",
               "onUpdate:workflowActive": emitWorkflowActiveToggle
-            }, null, 8, ["workflow-active", "workflow-id", "workflow-permissions"]),
+            }, null, 8, ["is-archived", "workflow-active", "workflow-id", "workflow-permissions"])),
             createVNode(_component_n8n_action_toggle, {
               actions: actions.value,
               theme: "dark",
@@ -682,19 +774,23 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const cardLink = "_cardLink_yuz8n_123";
-const cardHeading = "_cardHeading_yuz8n_133";
-const cardDescription = "_cardDescription_yuz8n_142";
-const cardActions = "_cardActions_yuz8n_149";
-const cardBadge = "_cardBadge_yuz8n_159";
-const breadcrumbs = "_breadcrumbs_yuz8n_177";
+const cardLink = "_cardLink_15m1t_123";
+const cardHeading = "_cardHeading_15m1t_133";
+const cardHeadingArchived = "_cardHeadingArchived_15m1t_142";
+const cardDescription = "_cardDescription_15m1t_146";
+const cardActions = "_cardActions_15m1t_153";
+const cardBadge = "_cardBadge_15m1t_163";
+const cardArchived = "_cardArchived_15m1t_174";
+const breadcrumbs = "_breadcrumbs_15m1t_191";
 const style0$1 = {
   cardLink,
   cardHeading,
+  cardHeadingArchived,
   cardDescription,
   cardActions,
   cardBadge,
-  "with-breadcrumbs": "_with-breadcrumbs_yuz8n_159",
+  "with-breadcrumbs": "_with-breadcrumbs_15m1t_167",
+  cardArchived,
   breadcrumbs
 };
 const cssModules$1 = {
@@ -823,24 +919,26 @@ const _hoisted_1 = { key: 0 };
 const _hoisted_2 = { key: 0 };
 const _hoisted_3 = { key: 1 };
 const _hoisted_4 = { key: 1 };
-const _hoisted_5 = {
+const _hoisted_5 = { key: 1 };
+const _hoisted_6 = {
   class: "text-center mt-s",
   "data-test-id": "list-empty-state"
 };
-const _hoisted_6 = {
+const _hoisted_7 = {
   key: 0,
   class: "mb-s"
 };
-const _hoisted_7 = { class: "mb-s" };
+const _hoisted_8 = { class: "mb-s" };
+const _hoisted_9 = { class: "mb-s" };
 const SEARCH_DEBOUNCE_TIME = 300;
 const FILTERS_DEBOUNCE_TIME = 100;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WorkflowsView",
   setup(__props) {
     const StatusFilter = {
+      ALL: "",
       ACTIVE: "active",
-      DEACTIVATED: "deactivated",
-      ALL: ""
+      DEACTIVATED: "deactivated"
     };
     const WORKFLOWS_SORT_MAP = {
       lastUpdated: "updatedAt:desc",
@@ -868,13 +966,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const insightsStore = useInsightsStore();
     const documentTitle = useDocumentTitle();
     const { callDebounced } = useDebounce();
-    const overview = useOverview();
-    const loading = ref(false);
+    const projectPages = useProjectPages();
+    const loading = ref(true);
     const breadcrumbsLoading = ref(false);
     const filters = ref({
       search: "",
       homeProject: "",
       status: StatusFilter.ALL,
+      showArchived: false,
       tags: []
     });
     const workflowListEventBus = createEventBus();
@@ -930,7 +1029,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       )
     );
     const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
-    const isOverviewPage = computed(() => route.name === VIEWS.WORKFLOWS);
     const currentUser = computed(() => usersStore.currentUser ?? {});
     const isShareable = computed(
       () => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing]
@@ -942,7 +1040,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return projectsStore.isTeamProjectFeatureEnabled;
     });
     const showFolders = computed(() => {
-      return foldersEnabled.value && !isOverviewPage.value;
+      return foldersEnabled.value && !projectPages.isOverviewSubPage && !projectPages.isSharedSubPage;
     });
     const currentFolder = computed(() => {
       return currentFolderId.value ? foldersStore.breadcrumbsCache[currentFolderId.value] : null;
@@ -985,6 +1083,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return projectName.value;
     });
+    const personalProject = computed(() => {
+      return projectsStore.personalProject;
+    });
     const workflowListResources = computed(() => {
       const resources = (workflowsAndFolders.value || []).map((resource) => {
         if (resource.resource === "folder") {
@@ -1006,6 +1107,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             id: resource.id,
             name: resource.name,
             active: resource.active ?? false,
+            isArchived: resource.isArchived,
             updatedAt: resource.updatedAt.toString(),
             createdAt: resource.createdAt.toString(),
             homeProject: resource.homeProject,
@@ -1040,7 +1142,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const projectPermissions = computed(() => {
       return getResourcePermissions(
-        projectsStore.currentProject?.scopes ?? projectsStore.personalProject?.scopes
+        projectsStore.currentProject?.scopes ?? personalProject.value?.scopes
       );
     });
     const emptyListDescription = computed(() => {
@@ -1053,7 +1155,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const hasFilters = computed(() => {
-      return !!(filters.value.search || filters.value.status !== StatusFilter.ALL || filters.value.tags.length);
+      return !!(filters.value.search || filters.value.status !== StatusFilter.ALL || filters.value.showArchived || filters.value.tags.length);
     });
     const isSelfHostedDeployment = computed(() => settingsStore.deploymentType === "default");
     const canUserRegisterCommunityPlus = computed(
@@ -1062,17 +1164,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const showRegisteredCommunityCTA = computed(
       () => isSelfHostedDeployment.value && !foldersEnabled.value && canUserRegisterCommunityPlus.value
     );
-    watch(
-      () => route.params?.projectId,
-      async () => {
-        await initialize();
-      }
-    );
+    watch([() => route.params?.projectId, () => route.name], async () => {
+      loading.value = true;
+    });
     watch(
       () => route.params?.folderId,
       async (newVal) => {
         currentFolderId.value = newVal;
         filters.value.search = "";
+        saveFiltersOnQueryString();
         await fetchWorkflows();
       }
     );
@@ -1080,7 +1180,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (name2 !== "pullWorkfolder") return;
       after(async () => await initialize());
     });
-    const onWorkflowDeleted = async () => {
+    const refreshWorkflows = async () => {
       await Promise.all([
         fetchWorkflows(),
         foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId)
@@ -1146,6 +1246,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const parentFolder = route.params?.folderId || void 0;
       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 archivedFilter = filters.value.showArchived ? void 0 : false;
       const fetchFolders = showFolders.value && !tags.length && activeFilter === void 0;
       try {
         const fetchedResources = await workflowsStore.fetchWorkflowsPage(
@@ -1156,11 +1257,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           {
             name: filters.value.search || void 0,
             active: activeFilter,
+            isArchived: archivedFilter,
             tags: tags.length ? tags : void 0,
-            parentFolderId: parentFolder ?? (isOverviewPage.value ? void 0 : filters?.value.search ? void 0 : PROJECT_ROOT)
-            // Sending 0 will only show one level of folders
+            parentFolderId: getParentFolderId(parentFolder)
           },
-          fetchFolders
+          fetchFolders,
+          projectPages.isSharedSubPage
         );
         foldersStore.cacheFolders(
           fetchedResources.filter((resource) => resource.resource === "folder").map((r) => ({ id: r.id, name: r.name, parentFolder: r.parentFolder?.id }))
@@ -1173,7 +1275,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           breadcrumbsLoading.value = false;
         }
         workflowsAndFolders.value = fetchedResources;
-        showCardsBadge.value = isOverviewPage.value || filters.value.search !== "";
+        showCardsBadge.value = projectPages.isOverviewSubPage || projectPages.isSharedSubPage || filters.value.search !== "";
         return fetchedResources;
       } catch (error) {
         toast.showError(error, i18n.baseText("workflows.list.error.fetching"));
@@ -1187,19 +1289,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     };
-    const onSortUpdated = async (sort) => {
-      currentSort.value = WORKFLOWS_SORT_MAP[sort] ?? "updatedAt:desc";
-      if (currentSort.value !== "updatedAt:desc") {
-        void router.replace({ query: { ...route.query, sort } });
-      } else {
-        void router.replace({ query: { ...route.query, sort: void 0 } });
+    const getParentFolderId = (routeId) => {
+      if (routeId !== null && routeId !== void 0) {
+        return routeId;
+      }
+      if (projectPages.isOverviewSubPage || projectPages.isSharedSubPage || filters?.value.search) {
+        return void 0;
       }
-      await fetchWorkflows();
+      return PROJECT_ROOT;
     };
     const onFiltersUpdated = async () => {
       currentPage.value = 1;
       saveFiltersOnQueryString();
-      await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
+      if (!loading.value) {
+        await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
+      }
     };
     const onSearchUpdated = async (search) => {
       currentPage.value = 1;
@@ -1210,13 +1314,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         await fetchWorkflows();
       }
     };
-    const setCurrentPage = async (page) => {
-      currentPage.value = page;
-      await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
-    };
-    const setPageSize = async (size) => {
-      pageSize.value = size;
-      await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
+    const setPaginationAndSort = async (payload) => {
+      if (payload.page) {
+        currentPage.value = payload.page;
+      }
+      if (payload.pageSize) {
+        pageSize.value = payload.pageSize;
+      }
+      if (payload.sort) {
+        currentSort.value = WORKFLOWS_SORT_MAP[payload.sort] ?? "updatedAt:desc";
+      }
+      if (!loading.value) {
+        await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
+      }
     };
     const onClickTag = async (tagId) => {
       if (!filters.value.tags.includes(tagId)) {
@@ -1238,6 +1348,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         delete currentQuery.status;
       }
+      if (filters.value.showArchived) {
+        currentQuery.showArchived = "true";
+      } else {
+        delete currentQuery.showArchived;
+      }
       if (filters.value.tags.length) {
         currentQuery.tags = filters.value.tags.join(",");
       } else {
@@ -1254,7 +1369,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const setFiltersFromQueryString = async () => {
       const newQuery = { ...route.query };
-      const { tags, status, search, homeProject, sort } = route.query ?? {};
+      const { tags, status, search, homeProject, sort, showArchived } = route.query ?? {};
       const isValidString = (value) => typeof value === "string" && value.trim().length > 0;
       if (isValidString(homeProject)) {
         await projectsStore.getAvailableProjects();
@@ -1285,8 +1400,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         delete newQuery.tags;
       }
-      const validStatusValues = ["true", "false"];
-      if (isValidString(status) && validStatusValues.includes(status)) {
+      if (isValidString(status)) {
         newQuery.status = status;
         filters.value.status = status === "true" ? StatusFilter.ACTIVE : StatusFilter.DEACTIVATED;
       } else {
@@ -1299,6 +1413,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         delete newQuery.sort;
       }
+      if (isValidString(showArchived)) {
+        newQuery.showArchived = showArchived;
+        filters.value.showArchived = showArchived === "true";
+      } else {
+        delete newQuery.showArchived;
+        filters.value.showArchived = false;
+      }
       void router.replace({ query: newQuery });
     };
     const addWorkflow = () => {
@@ -1842,6 +1963,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_InlineTextEdit = InlineTextEdit;
       const _component_FolderBreadcrumbs = __unplugin_components_0;
       const _component_FolderCard = __unplugin_components_2;
+      const _component_EmptySharedSectionActionBox = _sfc_main$4;
+      const _component_N8nCheckbox = resolveComponent("N8nCheckbox");
       const _component_n8n_action_box = resolveComponent("n8n-action-box");
       return openBlock(), createBlock(ResourcesListLayout, {
         filters: filters.value,
@@ -1864,15 +1987,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "has-empty-state": unref(foldersStore).totalWorkflowCount === 0 && !currentFolderId.value,
         "onClick:add": addWorkflow,
         "onUpdate:search": onSearchUpdated,
-        "onUpdate:currentPage": setCurrentPage,
-        "onUpdate:pageSize": setPageSize,
-        onSort: onSortUpdated,
+        "onUpdate:paginationAndSort": setPaginationAndSort,
         onMouseleave: unref(folderHelpers).resetDropTarget
       }, createSlots({
         header: withCtx(() => [
           createVNode(ProjectHeader, { onCreateFolder: createFolderInCurrent }, {
             default: withCtx(() => [
-              unref(overview).isOverviewSubPage && unref(insightsStore).isSummaryEnabled ? (openBlock(), createBlock(InsightsSummary, {
+              unref(projectPages).isOverviewSubPage && unref(insightsStore).isSummaryEnabled ? (openBlock(), createBlock(InsightsSummary, {
                 key: 0,
                 loading: unref(insightsStore).weeklySummary.isLoading,
                 summary: unref(insightsStore).weeklySummary.state,
@@ -1883,7 +2004,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           })
         ]),
         callout: withCtx(() => [
-          showEasyAIWorkflowCallout.value && easyAICalloutVisible.value ? (openBlock(), createBlock(_component_N8nCallout, {
+          !loading.value && showEasyAIWorkflowCallout.value && easyAICalloutVisible.value ? (openBlock(), createBlock(_component_N8nCallout, {
             key: 0,
             theme: "secondary",
             icon: "robot",
@@ -1995,7 +2116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 data,
                 actions: folderCardActions.value,
                 "read-only": readOnlyEnv.value || !hasPermissionToDeleteFolders.value && !hasPermissionToCreateFolders.value,
-                "personal-project": unref(projectsStore).personalProject,
+                "personal-project": personalProject.value,
                 "data-resourceid": data.id,
                 "data-resourcename": data.name,
                 class: normalizeClass([{
@@ -2052,7 +2173,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "show-ownership-badge": showCardsBadge.value,
                 "data-target": "workflow",
                 "onClick:tag": onClickTag,
-                "onWorkflow:deleted": onWorkflowDeleted,
+                "onWorkflow:deleted": refreshWorkflows,
+                "onWorkflow:archived": refreshWorkflows,
+                "onWorkflow:unarchived": refreshWorkflows,
                 "onWorkflow:moved": fetchWorkflows,
                 "onWorkflow:duplicated": fetchWorkflows,
                 "onWorkflow:activeToggle": onWorkflowActiveToggle,
@@ -2064,86 +2187,92 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, 1032, ["disabled", "onDragstart", "onDragend"]))
         ]),
         empty: withCtx(() => [
-          createBaseVNode("div", _hoisted_5, [
-            createVNode(unref(N8nHeading), {
-              tag: "h2",
-              size: "xlarge",
-              class: "mb-2xs"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(currentUser.value.firstName ? unref(i18n).baseText("workflows.empty.heading", {
-                  interpolate: { name: currentUser.value.firstName }
-                }) : unref(i18n).baseText("workflows.empty.heading.userNotSetup")), 1)
-              ]),
-              _: 1
-            }),
-            createVNode(unref(N8nText), {
-              size: "large",
-              color: "text-base"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(emptyListDescription.value), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          !readOnlyEnv.value && projectPermissions.value.workflow.create ? (openBlock(), createElementBlock("div", {
+          unref(projectPages).isSharedSubPage && personalProject.value ? (openBlock(), createBlock(_component_EmptySharedSectionActionBox, {
             key: 0,
-            class: normalizeClass(["text-center", "mt-2xl", _ctx.$style.actionsContainer])
-          }, [
-            createVNode(unref(N8nCard), {
-              class: normalizeClass(_ctx.$style.emptyStateCard),
-              hoverable: "",
-              "data-test-id": "new-workflow-card",
-              onClick: addWorkflow
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(N8nIcon), {
-                  class: normalizeClass(_ctx.$style.emptyStateCardIcon),
-                  icon: "file"
-                }, null, 8, ["class"]),
-                createVNode(unref(N8nText), {
-                  size: "large",
-                  class: "mt-xs",
-                  color: "text-dark"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(i18n).baseText("workflows.empty.startFromScratch")), 1)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["class"]),
-            showEasyAIWorkflowCallout.value ? (openBlock(), createBlock(unref(N8nCard), {
+            "personal-project": personalProject.value,
+            "resource-type": "workflows"
+          }, null, 8, ["personal-project"])) : (openBlock(), createElementBlock("div", _hoisted_5, [
+            createBaseVNode("div", _hoisted_6, [
+              createVNode(unref(N8nHeading), {
+                tag: "h2",
+                size: "xlarge",
+                class: "mb-2xs"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(currentUser.value.firstName ? unref(i18n).baseText("workflows.empty.heading", {
+                    interpolate: { name: currentUser.value.firstName }
+                  }) : unref(i18n).baseText("workflows.empty.heading.userNotSetup")), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(N8nText), {
+                size: "large",
+                color: "text-base"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(emptyListDescription.value), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            !readOnlyEnv.value && projectPermissions.value.workflow.create ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: normalizeClass(_ctx.$style.emptyStateCard),
-              hoverable: "",
-              "data-test-id": "easy-ai-workflow-card",
-              onClick: _cache[2] || (_cache[2] = ($event) => openAIWorkflow("empty"))
-            }, {
-              default: withCtx(() => [
-                createVNode(unref(N8nIcon), {
-                  class: normalizeClass(_ctx.$style.emptyStateCardIcon),
-                  icon: "robot"
-                }, null, 8, ["class"]),
-                createVNode(unref(N8nText), {
-                  size: "large",
-                  class: "mt-xs pl-2xs pr-2xs",
-                  color: "text-dark"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(i18n).baseText("workflows.empty.easyAI")), 1)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["class"])) : createCommentVNode("", true)
-          ], 2)) : createCommentVNode("", true)
+              class: normalizeClass(["text-center", "mt-2xl", _ctx.$style.actionsContainer])
+            }, [
+              createVNode(unref(N8nCard), {
+                class: normalizeClass(_ctx.$style.emptyStateCard),
+                hoverable: "",
+                "data-test-id": "new-workflow-card",
+                onClick: addWorkflow
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(N8nIcon), {
+                    class: normalizeClass(_ctx.$style.emptyStateCardIcon),
+                    icon: "file"
+                  }, null, 8, ["class"]),
+                  createVNode(unref(N8nText), {
+                    size: "large",
+                    class: "mt-xs",
+                    color: "text-dark"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(i18n).baseText("workflows.empty.startFromScratch")), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              showEasyAIWorkflowCallout.value ? (openBlock(), createBlock(unref(N8nCard), {
+                key: 0,
+                class: normalizeClass(_ctx.$style.emptyStateCard),
+                hoverable: "",
+                "data-test-id": "easy-ai-workflow-card",
+                onClick: _cache[2] || (_cache[2] = ($event) => openAIWorkflow("empty"))
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(N8nIcon), {
+                    class: normalizeClass(_ctx.$style.emptyStateCardIcon),
+                    icon: "robot"
+                  }, null, 8, ["class"]),
+                  createVNode(unref(N8nText), {
+                    size: "large",
+                    class: "mt-xs pl-2xs pr-2xs",
+                    color: "text-dark"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(i18n).baseText("workflows.empty.easyAI")), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["class"])) : createCommentVNode("", true)
+            ], 2)) : createCommentVNode("", true)
+          ]))
         ]),
         filters: withCtx(({ setKeyValue }) => [
-          unref(settingsStore).areTagsEnabled ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          unref(settingsStore).areTagsEnabled ? (openBlock(), createElementBlock("div", _hoisted_7, [
             createVNode(unref(N8nInputLabel), {
               label: unref(i18n).baseText("workflows.filters.tags"),
               bold: false,
@@ -2151,14 +2280,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               color: "text-base",
               class: "mb-3xs"
             }, null, 8, ["label"]),
-            createVNode(_sfc_main$4, {
+            createVNode(_sfc_main$5, {
               placeholder: unref(i18n).baseText("workflowOpen.filterWorkflows"),
               "model-value": filters.value.tags,
               "create-enabled": false,
               "onUpdate:modelValue": ($event) => setKeyValue("tags", $event)
             }, null, 8, ["placeholder", "model-value", "onUpdate:modelValue"])
           ])) : createCommentVNode("", true),
-          createBaseVNode("div", _hoisted_7, [
+          createBaseVNode("div", _hoisted_8, [
             createVNode(unref(N8nInputLabel), {
               label: unref(i18n).baseText("workflows.filters.status"),
               bold: false,
@@ -2173,7 +2302,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(statusFilterOptions.value, (option) => {
-                  return openBlock(), createBlock(unref(_sfc_main$5), {
+                  return openBlock(), createBlock(unref(_sfc_main$6), {
                     key: option.label,
                     label: option.label,
                     value: option.value,
@@ -2183,15 +2312,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               _: 2
             }, 1032, ["model-value", "onUpdate:modelValue"])
+          ]),
+          createBaseVNode("div", _hoisted_9, [
+            createVNode(_component_N8nCheckbox, {
+              label: unref(i18n).baseText("workflows.filters.showArchived"),
+              "model-value": filters.value.showArchived || false,
+              "data-test-id": "show-archived-checkbox",
+              "onUpdate:modelValue": ($event) => setKeyValue("showArchived", $event)
+            }, null, 8, ["label", "model-value", "onUpdate:modelValue"])
           ])
         ]),
         postamble: withCtx(() => [
-          workflowsAndFolders.value.length === 0 && currentFolder.value && !hasFilters.value ? (openBlock(), createElementBlock("div", {
+          workflowsAndFolders.value.length === 0 && !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, {
+            unref(projectPages).isSharedSubPage && personalProject.value ? (openBlock(), createBlock(_component_EmptySharedSectionActionBox, {
+              key: 0,
+              "personal-project": personalProject.value,
+              "resource-type": "workflows"
+            }, null, 8, ["personal-project"])) : currentFolder.value ? (openBlock(), createBlock(_component_n8n_action_box, {
+              key: 1,
               "data-test-id": "empty-folder-action-box",
               heading: unref(i18n).baseText("folders.empty.actionbox.title", {
                 interpolate: { folderName: currentFolder.value.name }
@@ -2205,7 +2347,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(readOnlyEnv.value ? unref(i18n).baseText("readOnlyEnv.cantAdd.workflow") : unref(i18n).baseText("generic.missing.permissions")), 1)
               ]),
               _: 1
-            }, 8, ["heading", "button-text", "button-disabled"])
+            }, 8, ["heading", "button-text", "button-disabled"])) : createCommentVNode("", true)
           ], 2)) : createCommentVNode("", true)
         ]),
         _: 2
@@ -2215,10 +2357,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           fn: withCtx(() => [
             createVNode(_component_N8nTooltip, {
               placement: "top",
-              disabled: !(isOverviewPage.value || !readOnlyEnv.value && hasPermissionToCreateFolders.value)
+              disabled: !(unref(projectPages).isOverviewSubPage || unref(projectPages).isSharedSubPage || !readOnlyEnv.value && hasPermissionToCreateFolders.value)
             }, {
               content: withCtx(() => [
-                isOverviewPage.value && !showRegisteredCommunityCTA.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+                (unref(projectPages).isOverviewSubPage || unref(projectPages).isSharedSubPage) && !showRegisteredCommunityCTA.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))
                 ])) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(currentParentName.value ? unref(i18n).baseText("folders.add.to.parent.message", {
                   interpolate: { parent: currentParentName.value }