feat(editor): Add functionality to create folders (#13473)

packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.vue

@@ -340,12 +340,12 @@ const handleTooltipClose = () => {
 
 	.item,
 	.item * {
-		color: var(--color-text-light);
+		color: var(--color-text-base);
 		font-size: var(--font-size-m);
 	}
 
 	.item a:hover * {
-		color: var(--color-text-base);
+		color: var(--color-text-dark);
 	}
 
 	.ellipsis {
@@ -359,7 +359,7 @@ const handleTooltipClose = () => {
 
 	.separator {
 		font-size: var(--font-size-xl);
-		color: var(--prim-gray-670);
+		color: var(--color-foreground-base);
 	}
 }
 </style>

packages/frontend/editor-ui/src/Interface.ts

@@ -58,6 +58,7 @@ import type {
 import type { BulkCommand, Undoable } from '@/models/history';
 
 import type { ProjectSharingData } from '@/types/projects.types';
+import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
 
 export * from '@n8n/design-system/types';
 
@@ -243,6 +244,7 @@ export interface IWorkflowDataUpdate {
 
 export interface IWorkflowDataCreate extends IWorkflowDataUpdate {
 	projectId?: string;
+	parentFolderId?: string;
 }
 
 /**
@@ -333,6 +335,7 @@ export type WorkflowListItem = Omit<
 export type FolderShortInfo = {
 	id: string;
 	name: string;
+	parentFolder?: string;
 };
 
 export type BaseFolderItem = BaseResource & {
@@ -349,8 +352,21 @@ export interface FolderListItem extends BaseFolderItem {
 	resource: 'folder';
 }
 
+export type FolderPathItem = PathItem & { parentFolder?: string };
+
 export type WorkflowListResource = WorkflowListItem | FolderListItem;
 
+export type FolderCreateResponse = Omit<
+	FolderListItem,
+	'workflowCount' | 'tags' | 'sharedWithProjects' | 'homeProject'
+>;
+
+export type FolderTreeResponseItem = {
+	id: string;
+	name: string;
+	children: FolderTreeResponseItem[];
+};
+
 // Identical to cli.Interfaces.ts
 export interface IWorkflowShortResponse {
 	id: string;

packages/frontend/editor-ui/src/api/workflows.ts

@@ -1,4 +1,6 @@
 import type {
+	FolderCreateResponse,
+	FolderTreeResponseItem,
 	IExecutionResponse,
 	IExecutionsCurrentSummaryExtended,
 	IRestApiContext,
@@ -84,3 +86,27 @@ export async function getExecutionData(context: IRestApiContext, executionId: st
 		`/executions/${executionId}`,
 	);
 }
+
+export async function createFolder(
+	context: IRestApiContext,
+	projectId: string,
+	name: string,
+	parentFolderId?: string,
+): Promise<FolderCreateResponse> {
+	return await makeRestApiRequest(context, 'POST', `/projects/${projectId}/folders`, {
+		name,
+		parentFolderId,
+	});
+}
+
+export async function getFolderPath(
+	context: IRestApiContext,
+	projectId: string,
+	folderId: string,
+): Promise<FolderTreeResponseItem[]> {
+	return await makeRestApiRequest(
+		context,
+		'GET',
+		`/projects/${projectId}/folders/${folderId}/tree`,
+	);
+}

packages/frontend/editor-ui/src/components/DuplicateWorkflowDialog.vue

@@ -72,6 +72,8 @@ const save = async (): Promise<void> => {
 		return;
 	}
 
+	const parentFolderId = router.currentRoute.value.params.folderId as string | undefined;
+
 	const currentWorkflowId = props.data.id;
 	isSaving.value = true;
 
@@ -102,6 +104,7 @@ const save = async (): Promise<void> => {
 			resetWebhookUrls: true,
 			openInNewWindow: true,
 			resetNodeIds: true,
+			parentFolderId,
 		});
 
 		if (saved) {

packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+import type { FolderPathItem } from '@/Interface';
+import { useProjectsStore } from '@/stores/projects.store';
+import { ProjectTypes } from '@/types/projects.types';
+import type { UserAction } from '@n8n/design-system/types';
+import { type PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
+import { computed } from 'vue';
+
+type Props = {
+	actions: UserAction[];
+	breadcrumbs: {
+		visibleItems: FolderPathItem[];
+		hiddenItems: FolderPathItem[];
+	};
+};
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+	itemSelected: [item: PathItem];
+	action: [action: string];
+}>();
+
+const i18n = useI18n();
+
+const projectsStore = useProjectsStore();
+
+const currentProject = computed(() => projectsStore.currentProject);
+
+const projectName = computed(() => {
+	if (currentProject.value?.type === ProjectTypes.Personal) {
+		return i18n.baseText('projects.menu.personal');
+	}
+	return currentProject.value?.name;
+});
+
+const onItemSelect = (item: PathItem) => {
+	emit('itemSelected', item);
+};
+
+const onAction = (action: string) => {
+	emit('action', action);
+};
+</script>
+<template>
+	<div :class="$style.container">
+		<n8n-breadcrumbs
+			v-if="breadcrumbs.visibleItems"
+			:items="breadcrumbs.visibleItems"
+			:highlight-last-item="false"
+			:path-truncated="breadcrumbs.visibleItems[0].parentFolder"
+			:hidden-items="breadcrumbs.hiddenItems"
+			data-test-id="folder-card-breadcrumbs"
+			@item-selected="onItemSelect"
+		>
+			<template v-if="currentProject" #prepend>
+				<div :class="$style['home-project']">
+					<n8n-link :to="`/projects/${currentProject.id}`">
+						<N8nText size="large" color="text-base">{{ projectName }}</N8nText>
+					</n8n-link>
+				</div>
+			</template>
+		</n8n-breadcrumbs>
+		<n8n-action-toggle
+			v-if="breadcrumbs.visibleItems"
+			:actions="actions"
+			theme="dark"
+			data-test-id="folder-breadcrumbs-actions"
+			@action="onAction"
+		/>
+	</div>
+</template>
+
+<style module lang="scss">
+.container {
+	display: flex;
+	align-items: center;
+}
+
+.home-project {
+	display: flex;
+	align-items: center;
+
+	&:hover * {
+		color: var(--color-text-dark);
+	}
+}
+</style>

packages/frontend/editor-ui/src/components/Folders/FolderCard.test.ts

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import FolderCard from './FolderCard.vue';
 import { createPinia, setActivePinia } from 'pinia';
 import type { FolderResource } from '../layouts/ResourcesListLayout.vue';
-import type { UserAction } from '@/Interface';
+import type { FolderPathItem, UserAction } from '@/Interface';
 
 vi.mock('vue-router', () => {
 	const push = vi.fn();
@@ -61,6 +61,11 @@ const PARENT_FOLDER: FolderResource = {
 	},
 } as const satisfies FolderResource;
 
+const DEFAULT_BREADCRUMBS: { visibleItems: FolderPathItem[]; hiddenItems: FolderPathItem[] } = {
+	visibleItems: [{ id: '1', label: 'Parent 2' }],
+	hiddenItems: [{ id: '2', label: 'Parent 1', parentFolder: '1' }],
+};
+
 const renderComponent = createComponentRenderer(FolderCard, {
 	props: {
 		data: DEFAULT_FOLDER,
@@ -68,6 +73,7 @@ const renderComponent = createComponentRenderer(FolderCard, {
 			{ label: 'Open', value: 'open', disabled: false },
 			{ label: 'Delete', value: 'delete', disabled: false },
 		] as const satisfies UserAction[],
+		breadcrumbs: DEFAULT_BREADCRUMBS,
 	},
 	global: {
 		stubs: {
@@ -145,6 +151,10 @@ describe('FolderCard', () => {
 					},
 					parentFolder: PARENT_FOLDER,
 				},
+				breadcrumbs: {
+					visibleItems: [{ id: PARENT_FOLDER.id, label: PARENT_FOLDER.name, parentFolder: '1' }],
+					hiddenItems: [],
+				},
 			},
 		});
 		expect(getByTestId('folder-card-icon')).toBeInTheDocument();

packages/frontend/editor-ui/src/components/Folders/FolderCard.vue

@@ -7,11 +7,15 @@ import { useI18n } from '@/composables/useI18n';
 import { useRoute, useRouter } from 'vue-router';
 import { VIEWS } from '@/constants';
 import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
-import type { UserAction } from '@/Interface';
+import type { FolderPathItem, UserAction } from '@/Interface';
 
 type Props = {
 	data: FolderResource;
 	actions: UserAction[];
+	breadcrumbs: {
+		visibleItems: FolderPathItem[];
+		hiddenItems: FolderPathItem[];
+	};
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -27,18 +31,6 @@ const emit = defineEmits<{
 	folderOpened: [{ folder: FolderResource }];
 }>();
 
-const breadCrumbsItems = computed(() => {
-	if (props.data.parentFolder) {
-		return [
-			{
-				id: props.data.parentFolder.id,
-				label: props.data.parentFolder.name,
-			},
-		];
-	}
-	return [];
-});
-
 const projectIcon = computed<ProjectIcon>(() => {
 	const defaultIcon: ProjectIcon = { type: 'icon', value: 'layer-group' };
 	if (props.data.homeProject?.type === ProjectTypes.Personal) {
@@ -109,7 +101,7 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
 						<n8n-text
 							size="small"
 							color="text-light"
-							:class="$style['info-cell']"
+							:class="[$style['info-cell'], $style['info-cell--workflow-count']]"
 							data-test-id="folder-card-workflow-count"
 						>
 							{{ data.workflowCount }} {{ i18n.baseText('generic.workflows') }}
@@ -117,7 +109,7 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
 						<n8n-text
 							size="small"
 							color="text-light"
-							:class="$style['info-cell']"
+							:class="[$style['info-cell'], $style['info-cell--updated']]"
 							data-test-id="folder-card-last-updated"
 						>
 							{{ i18n.baseText('workerList.item.lastUpdated') }}
@@ -126,7 +118,7 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
 						<n8n-text
 							size="small"
 							color="text-light"
-							:class="$style['info-cell']"
+							:class="[$style['info-cell'], $style['info-cell--created']]"
 							data-test-id="folder-card-created"
 						>
 							{{ i18n.baseText('workflows.item.created') }}
@@ -136,9 +128,11 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
 				</template>
 				<template #append>
 					<div :class="$style['card-actions']" @click.prevent>
+						<div :class="$style.breadcrumbs">
 							<n8n-breadcrumbs
-							:items="breadCrumbsItems"
+								:items="breadcrumbs.visibleItems"
-							:path-truncated="true"
+								:hidden-items="breadcrumbs.hiddenItems"
+								:path-truncated="breadcrumbs.visibleItems[0]?.parentFolder"
 								:show-border="true"
 								:highlight-last-item="false"
 								theme="small"
@@ -156,6 +150,7 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
 									</div>
 								</template>
 							</n8n-breadcrumbs>
+						</div>
 						<n8n-action-toggle
 							v-if="actions.length"
 							:actions="actions"
@@ -214,4 +209,23 @@ const onBreadcrumbsItemClick = async (item: PathItem) => {
 	gap: var(--spacing-3xs);
 	color: var(--color-text-dark);
 }
+
+@include mixins.breakpoint('sm-and-down') {
+	.card {
+		flex-wrap: wrap;
+
+		:global(.n8n-card-append) {
+			width: 100%;
+			margin-top: var(--spacing-3xs);
+			padding-left: 40px;
+		}
+		.card-actions {
+			width: 100%;
+			justify-content: space-between;
+		}
+	}
+	.info-cell--created {
+		display: none;
+	}
+}
 </style>

packages/frontend/editor-ui/src/components/Projects/ProjectHeader.test.ts

@@ -11,6 +11,7 @@ import { ProjectTypes } from '@/types/projects.types';
 import { VIEWS } from '@/constants';
 import userEvent from '@testing-library/user-event';
 import { waitFor, within } from '@testing-library/vue';
+import { useSettingsStore } from '@/stores/settings.store';
 
 const mockPush = vi.fn();
 vi.mock('vue-router', async () => {
@@ -43,14 +44,17 @@ const renderComponent = createComponentRenderer(ProjectHeader, {
 
 let route: ReturnType<typeof router.useRoute>;
 let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
+let settingsStore: ReturnType<typeof mockedStore<typeof useSettingsStore>>;
 
 describe('ProjectHeader', () => {
 	beforeEach(() => {
 		createTestingPinia();
 		route = router.useRoute();
 		projectsStore = mockedStore(useProjectsStore);
+		settingsStore = mockedStore(useSettingsStore);
 
 		projectsStore.teamProjectsLimit = -1;
+		settingsStore.settings.folders = { enabled: false };
 	});
 
 	afterEach(() => {

packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import type { UserAction } from '@n8n/design-system';
 import { N8nButton, N8nTooltip } from '@n8n/design-system';
 import { useI18n } from '@/composables/useI18n';
 import { type ProjectIcon, ProjectTypes } from '@/types/projects.types';
@@ -10,12 +11,18 @@ import { getResourcePermissions } from '@/permissions';
 import { VIEWS } from '@/constants';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import ProjectCreateResource from '@/components/Projects/ProjectCreateResource.vue';
+import { useSettingsStore } from '@/stores/settings.store';
 
 const route = useRoute();
 const router = useRouter();
 const i18n = useI18n();
 const projectsStore = useProjectsStore();
 const sourceControlStore = useSourceControlStore();
+const settingsStore = useSettingsStore();
+
+const emit = defineEmits<{
+	createFolder: [];
+}>();
 
 const headerIcon = computed((): ProjectIcon => {
 	if (projectsStore.currentProject?.type === ProjectTypes.Personal) {
@@ -49,31 +56,43 @@ const showSettings = computed(
 );
 
 const homeProject = computed(() => projectsStore.currentProject ?? projectsStore.personalProject);
+const isFoldersFeatureEnabled = computed(() => settingsStore.settings.folders.enabled);
 
 const ACTION_TYPES = {
 	WORKFLOW: 'workflow',
 	CREDENTIAL: 'credential',
+	FOLDER: 'folder',
 } as const;
 type ActionTypes = (typeof ACTION_TYPES)[keyof typeof ACTION_TYPES];
 
 const createWorkflowButton = computed(() => ({
 	value: ACTION_TYPES.WORKFLOW,
-	label: 'Create Workflow',
+	label: i18n.baseText('projects.header.create.workflow'),
 	icon: sourceControlStore.preferences.branchReadOnly ? 'lock' : undefined,
 	size: 'mini' as const,
 	disabled:
 		sourceControlStore.preferences.branchReadOnly ||
 		!getResourcePermissions(homeProject.value?.scopes).workflow.create,
 }));
-const menu = computed(() => [
+const menu = computed(() => {
+	const items: UserAction[] = [
 		{
 			value: ACTION_TYPES.CREDENTIAL,
-		label: 'Create credential',
+			label: i18n.baseText('projects.header.create.credential'),
 			disabled:
 				sourceControlStore.preferences.branchReadOnly ||
 				!getResourcePermissions(homeProject.value?.scopes).credential.create,
 		},
-]);
+	];
+	if (isFoldersFeatureEnabled.value) {
+		items.push({
+			value: ACTION_TYPES.FOLDER,
+			label: i18n.baseText('projects.header.create.folder'),
+			disabled: false,
+		});
+	}
+	return items;
+});
 
 const actions: Record<ActionTypes, (projectId: string) => void> = {
 	[ACTION_TYPES.WORKFLOW]: (projectId: string) => {
@@ -81,6 +100,7 @@ const actions: Record<ActionTypes, (projectId: string) => void> = {
 			name: VIEWS.NEW_WORKFLOW,
 			query: {
 				projectId,
+				parentFolderId: route.params.folderId as string,
 			},
 		});
 	},
@@ -93,6 +113,9 @@ const actions: Record<ActionTypes, (projectId: string) => void> = {
 			},
 		});
 	},
+	[ACTION_TYPES.FOLDER]: async () => {
+		emit('createFolder');
+	},
 } as const;
 
 const onSelect = (action: string) => {

packages/frontend/editor-ui/src/components/WorkflowCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { IUser } from '@/Interface';
+import type { FolderPathItem, IUser } from '@/Interface';
 import {
 	DUPLICATE_MODAL_KEY,
 	MODAL_CONFIRM,
@@ -39,6 +39,10 @@ const WORKFLOW_LIST_ITEM_ACTIONS = {
 const props = withDefaults(
 	defineProps<{
 		data: WorkflowResource;
+		breadcrumbs: {
+			visibleItems: FolderPathItem[];
+			hiddenItems: FolderPathItem[];
+		};
 		readOnly?: boolean;
 		workflowListEventBus?: EventBus;
 	}>(),
@@ -115,18 +119,6 @@ const formattedCreatedAtDate = computed(() => {
 	);
 });
 
-const breadCrumbsItems = computed(() => {
-	if (props.data.parentFolder) {
-		return [
-			{
-				id: props.data.parentFolder.id,
-				label: props.data.parentFolder.name,
-			},
-		];
-	}
-	return [];
-});
-
 const projectIcon = computed<CardProjectIcon>(() => {
 	const defaultIcon: CardProjectIcon = { type: 'icon', value: 'layer-group' };
 	if (props.data.homeProject?.type === ProjectTypes.Personal) {
@@ -306,10 +298,11 @@ const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
 					:resource-type-label="resourceTypeLabel"
 					:personal-project="projectsStore.personalProject"
 				/>
+				<div v-else :class="$style.breadcrumbs">
 					<n8n-breadcrumbs
-					v-else
+						:items="breadcrumbs.visibleItems"
-					:items="breadCrumbsItems"
+						:hidden-items="breadcrumbs.hiddenItems"
-					:path-truncated="true"
+						:path-truncated="breadcrumbs.visibleItems[0]?.parentFolder"
 						:show-border="true"
 						:highlight-last-item="false"
 						theme="small"
@@ -326,6 +319,7 @@ const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
 							</div>
 						</template>
 					</n8n-breadcrumbs>
+				</div>
 				<WorkflowActivator
 					class="mr-s"
 					:workflow-active="data.active"
@@ -405,8 +399,15 @@ const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
 		padding: 0 var(--spacing-s) var(--spacing-s);
 	}
 
-	.cardBadge {
+	.cardBadge,
+	.breadcrumbs {
 		margin-right: auto;
 	}
 }
+
+@include mixins.breakpoint('xs-only') {
+	.breadcrumbs > div {
+		flex-direction: column;
+	}
+}
 </style>

packages/frontend/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -555,6 +555,7 @@ const loadPaginationFromQueryString = async () => {
 									/>
 								</n8n-select>
 							</div>
+							<div :class="$style['sort-and-filter']">
 								<ResourceFiltersDropdown
 									v-if="showFiltersDropdown"
 									:keys="filterKeys"
@@ -569,9 +570,10 @@ const loadPaginationFromQueryString = async () => {
 										<slot name="filters" v-bind="resourceFiltersSlotProps" />
 									</template>
 								</ResourceFiltersDropdown>
-						</div>
 								<slot name="add-button"></slot>
 							</div>
+						</div>
+					</div>
 
 					<slot name="callout"></slot>
 
@@ -680,19 +682,20 @@ const loadPaginationFromQueryString = async () => {
 	justify-content: end;
 	width: 100%;
 
-	@include mixins.breakpoint('xs-only') {
+	.sort-and-filter {
-		grid-template-columns: 1fr auto;
+		display: flex;
-		grid-auto-flow: row;
+		gap: var(--spacing-2xs);
-
+		align-items: center;
-		> *:last-child {
-			grid-column: auto;
 	}
+
+	@include mixins.breakpoint('xs-only') {
+		grid-auto-flow: row;
+		grid-auto-columns: unset;
+		grid-template-columns: 1fr;
 	}
 }
 
 .search {
-	// max-width: 240px;
-
 	@include mixins.breakpoint('sm-and-down') {
 		max-width: 100%;
 	}

packages/frontend/editor-ui/src/composables/useWorkflowHelpers.ts

@@ -34,6 +34,7 @@ import type {
 	ITag,
 	IUpdateInformation,
 	IWorkflowData,
+	IWorkflowDataCreate,
 	IWorkflowDataUpdate,
 	IWorkflowDb,
 	TargetItem,
@@ -811,9 +812,10 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 
 		const isLoading = useCanvasStore().isLoading;
 		const currentWorkflow = id || (router.currentRoute.value.params.name as string);
+		const parentFolderId = router.currentRoute.value.query.parentFolderId as string;
 
 		if (!currentWorkflow || ['new', PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(currentWorkflow)) {
-			return await saveAsNewWorkflow({ name, tags }, redirect);
+			return await saveAsNewWorkflow({ name, tags, parentFolderId }, redirect);
 		}
 
 		// Workflow exists already so update it
@@ -914,6 +916,7 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 			resetWebhookUrls,
 			resetNodeIds,
 			openInNewWindow,
+			parentFolderId,
 			data,
 		}: {
 			name?: string;
@@ -921,14 +924,15 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 			resetWebhookUrls?: boolean;
 			openInNewWindow?: boolean;
 			resetNodeIds?: boolean;
-			data?: IWorkflowDataUpdate;
+			parentFolderId?: string;
+			data?: IWorkflowDataCreate;
 		} = {},
 		redirect = true,
 	): Promise<boolean> {
 		try {
 			uiStore.addActiveAction('workflowSaving');
 
-			const workflowDataRequest: IWorkflowDataUpdate = data || (await getWorkflowDataToSave());
+			const workflowDataRequest: IWorkflowDataCreate = data || (await getWorkflowDataToSave());
 			const changedNodes = {} as IDataObject;
 
 			if (resetNodeIds) {
@@ -957,6 +961,10 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 			if (tags) {
 				workflowDataRequest.tags = tags;
 			}
+
+			if (parentFolderId) {
+				workflowDataRequest.parentFolderId = parentFolderId;
+			}
 			const workflowData = await workflowsStore.createNewWorkflow(workflowDataRequest);
 
 			workflowsStore.addWorkflow(workflowData);

packages/frontend/editor-ui/src/constants.ts

@@ -33,7 +33,7 @@ export const MIN_WORKFLOW_NAME_LENGTH = 1;
 export const MAX_WORKFLOW_NAME_LENGTH = 128;
 export const DUPLICATE_POSTFFIX = ' copy';
 export const NODE_OUTPUT_DEFAULT_KEY = '_NODE_OUTPUT_DEFAULT_KEY_';
-export const DEFAULT_WORKFLOW_PAGE_SIZE = 10;
+export const DEFAULT_WORKFLOW_PAGE_SIZE = 50;
 
 // tags
 export const MAX_TAG_NAME_LENGTH = 24;
@@ -667,6 +667,7 @@ export const enum STORES {
 	PROJECTS = 'projects',
 	API_KEYS = 'apiKeys',
 	TEST_DEFINITION = 'testDefinition',
+	FOLDERS = 'folders',
 }
 
 export const enum SignInType {

packages/frontend/editor-ui/src/plugins/i18n/locales/en.json

@@ -34,6 +34,7 @@
 	"generic.cancel": "Cancel",
 	"generic.close": "Close",
 	"generic.confirm": "Confirm",
+	"generic.create": "Create",
 	"generic.deleteWorkflowError": "Problem deleting workflow",
 	"generic.filtersApplied": "Filters are currently applied.",
 	"generic.field": "field",
@@ -885,6 +886,12 @@
 	"forms.resourceFiltersDropdown.owner": "Owner",
 	"forms.resourceFiltersDropdown.owner.placeholder": "Filter by owner",
 	"forms.resourceFiltersDropdown.reset": "Reset all",
+	"folders.add": "Add folder",
+	"folders.add.here.message": "Create a new folder here",
+	"folders.add.to.parent.message": "Create folder in \"{parent}\"",
+	"folders.add.success.title": "Folder created",
+	"folders.add.success.message": "<a href=\"{link}\">Open {name}</a> now",
+	"folders.add.invalidName.message": "Please provide a valid folder name",
 	"generic.oauth1Api": "OAuth1 API",
 	"generic.oauth2Api": "OAuth2 API",
 	"genericHelpers.loading": "Loading",
@@ -2596,6 +2603,9 @@
 	"settings.mfa.updateConfiguration": "MFA configuration updated",
 	"settings.mfa.invalidAuthenticatorCode": "Invalid authenticator code",
 	"projects.header.subtitle": "All the workflows, credentials and executions you have access to",
+	"projects.header.create.workflow": "Create Workflow",
+	"projects.header.create.credential": "Create Credential",
+	"projects.header.create.folder": "Create Folder",
 	"projects.create": "Create",
 	"projects.create.personal": "Create in personal",
 	"projects.create.team": "Create in project",

packages/frontend/editor-ui/src/plugins/icons/index.ts

@@ -73,6 +73,7 @@ import {
 	faFlask,
 	faFolder,
 	faFolderOpen,
+	faFolderPlus,
 	faFont,
 	faGlobeAmericas,
 	faGift,
@@ -255,6 +256,7 @@ export const FontAwesomePlugin: Plugin = {
 		addIcon(faFlask);
 		addIcon(faFolder);
 		addIcon(faFolderOpen);
+		addIcon(faFolderPlus);
 		addIcon(faFont);
 		addIcon(faGift);
 		addIcon(faGlobe);

packages/frontend/editor-ui/src/stores/folders.store.ts

@@ -0,0 +1,102 @@
+import { defineStore } from 'pinia';
+import { STORES } from '@/constants';
+import type { FolderCreateResponse, FolderShortInfo, FolderTreeResponseItem } from '@/Interface';
+import * as workflowsApi from '@/api/workflows';
+import { useRootStore } from './root.store';
+import { ref } from 'vue';
+
+export const useFoldersStore = defineStore(STORES.FOLDERS, () => {
+	const rootStore = useRootStore();
+
+	const totalWorkflowCount = ref<number>(0);
+
+	/**
+	 * Cache visited folders so we can build breadcrumbs paths without fetching them from the server
+	 */
+	const breadcrumbsCache = ref<Record<string, FolderShortInfo>>({});
+
+	const cacheFolders = (folders: FolderShortInfo[]) => {
+		folders.forEach((folder) => {
+			if (!breadcrumbsCache.value[folder.id]) {
+				breadcrumbsCache.value[folder.id] = {
+					id: folder.id,
+					name: folder.name,
+					parentFolder: folder.parentFolder,
+				};
+			}
+		});
+	};
+
+	const getCachedFolder = (folderId: string) => {
+		return breadcrumbsCache.value[folderId];
+	};
+
+	async function createFolder(
+		name: string,
+		projectId: string,
+		parentFolderId?: string,
+	): Promise<FolderCreateResponse> {
+		return await workflowsApi.createFolder(
+			rootStore.restApiContext,
+			projectId,
+			name,
+			parentFolderId,
+		);
+	}
+
+	async function getFolderPath(
+		projectId: string,
+		folderId: string,
+	): Promise<FolderTreeResponseItem[]> {
+		const tree = await workflowsApi.getFolderPath(rootStore.restApiContext, projectId, folderId);
+		const forCache = extractFoldersForCache(tree);
+		cacheFolders(forCache);
+
+		return tree;
+	}
+
+	function extractFoldersForCache(
+		items: FolderTreeResponseItem[],
+		parentFolderId?: string,
+	): FolderShortInfo[] {
+		let result: FolderShortInfo[] = [];
+
+		items.forEach((item) => {
+			// Add current item to result
+			result.push({
+				id: item.id,
+				name: item.name,
+				parentFolder: parentFolderId,
+			});
+
+			// Process children recursively
+			if (item.children && item.children.length > 0) {
+				const childFolders = extractFoldersForCache(item.children, item.id);
+				result = [...result, ...childFolders];
+			}
+		});
+
+		return result;
+	}
+
+	async function fetchTotalWorkflowsAndFoldersCount(projectId?: string): Promise<number> {
+		const { count } = await workflowsApi.getWorkflowsAndFolders(
+			rootStore.restApiContext,
+			{ projectId },
+			{ skip: 0, take: 1 },
+			true,
+		);
+		totalWorkflowCount.value = count;
+		return count;
+	}
+
+	return {
+		fetchTotalWorkflowsAndFoldersCount,
+		breadcrumbsCache,
+		cacheFolders,
+		getCachedFolder,
+		createFolder,
+		getFolderPath,
+		totalWorkflowCount,
+	};
+});

packages/frontend/editor-ui/src/stores/workflows.store.ts

@@ -515,7 +515,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			Object.keys(options).length ? options : undefined,
 			includeFolders ? includeFolders : undefined,
 		);
-
 		totalWorkflowCount.value = count;
 		// Also set fetched workflows to store
 		// When fetching workflows from overview page, they don't have resource property
@@ -552,7 +551,11 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		return workflowData;
 	}
 
-	async function getNewWorkflowData(name?: string, projectId?: string): Promise<INewWorkflowData> {
+	async function getNewWorkflowData(
+		name?: string,
+		projectId?: string,
+		parentFolderId?: string,
+	): Promise<INewWorkflowData> {
 		let workflowData = {
 			name: '',
 			settings: { ...defaults.settings },
@@ -561,6 +564,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			const data: IDataObject = {
 				name,
 				projectId,
+				parentFolderId,
 			};
 
 			workflowData = await workflowsApi.getNewWorkflow(

packages/frontend/editor-ui/src/views/NodeView.vue

@@ -385,7 +385,11 @@ async function initializeRoute(force = false) {
 async function initializeWorkspaceForNewWorkflow() {
 	resetWorkspace();
 
-	await workflowsStore.getNewWorkflowData(undefined, projectsStore.currentProjectId);
+	await workflowsStore.getNewWorkflowData(
+		undefined,
+		projectsStore.currentProjectId,
+		route.query.parentFolderId as string | undefined,
+	);
 	workflowsStore.makeNewWorkflowShareable();
 
 	uiStore.nodeViewInitialized = true;
@@ -483,9 +487,10 @@ async function openTemplateFromWorkflowJSON(workflow: WorkflowDataWithTemplateId
 
 	isBlankRedirect.value = true;
 	const templateId = workflow.meta.templateId;
+	const parentFolderId = route.query.parentFolderId as string | undefined;
 	await router.replace({
 		name: VIEWS.NEW_WORKFLOW,
-		query: { templateId },
+		query: { templateId, parentFolderId },
 	});
 
 	await importTemplate({ id: templateId, name: workflow.name, workflow });

packages/frontend/editor-ui/src/views/ProjectSettings.test.ts

@@ -61,6 +61,9 @@ describe('ProjectSettings', () => {
 					},
 				},
 			},
+			folders: {
+				enabled: false,
+			},
 		} as FrontendSettings);
 		projectsStore.setCurrentProject({
 			id: '123',

packages/frontend/editor-ui/src/views/WorkflowsView.test.ts

@@ -14,6 +14,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useTagsStore } from '@/stores/tags.store';
 import { createRouter, createWebHistory } from 'vue-router';
 import * as usersApi from '@/api/users';
+import { useFoldersStore } from '@/stores/folders.store';
 
 vi.mock('@/api/projects.api');
 vi.mock('@/api/users');
@@ -40,6 +41,8 @@ const router = createRouter({
 });
 
 let pinia: ReturnType<typeof createTestingPinia>;
+let foldersStore: ReturnType<typeof mockedStore<typeof useFoldersStore>>;
+let workflowsStore: ReturnType<typeof mockedStore<typeof useWorkflowsStore>>;
 
 const renderComponent = createComponentRenderer(WorkflowsView, {
 	global: {
@@ -56,13 +59,18 @@ describe('WorkflowsView', () => {
 		await router.push('/');
 		await router.isReady();
 		pinia = createTestingPinia({ initialState });
+		foldersStore = mockedStore(useFoldersStore);
+		workflowsStore = mockedStore(useWorkflowsStore);
+
+		workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+		workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
+
+		foldersStore.totalWorkflowCount = 0;
+		foldersStore.fetchTotalWorkflowsAndFoldersCount.mockResolvedValue(0);
 	});
 
 	describe('should show empty state', () => {
 		it('for non setup user', async () => {
-			const workflowsStore = mockedStore(useWorkflowsStore);
-			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-			workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
 			const { getByText } = renderComponent({ pinia });
 			await waitAllPromises();
 			expect(getByText('👋 Welcome!')).toBeVisible();
@@ -72,10 +80,6 @@ describe('WorkflowsView', () => {
 			const userStore = mockedStore(useUsersStore);
 			userStore.currentUser = { firstName: 'John' } as IUser;
 
-			const workflowsStore = mockedStore(useWorkflowsStore);
-			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-			workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
-
 			const { getByText } = renderComponent({ pinia });
 			await waitAllPromises();
 
@@ -83,18 +87,10 @@ describe('WorkflowsView', () => {
 		});
 
 		describe('when onboardingExperiment -> False', () => {
-			beforeEach(() => {
-				pinia = createTestingPinia({ initialState });
-			});
-
 			it('for readOnlyEnvironment', async () => {
 				const sourceControl = mockedStore(useSourceControlStore);
 				sourceControl.preferences.branchReadOnly = true;
 
-				const workflowsStore = mockedStore(useWorkflowsStore);
-				workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-				workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
-
 				const { getByText } = renderComponent({ pinia });
 				await waitAllPromises();
 
@@ -103,10 +99,6 @@ describe('WorkflowsView', () => {
 			});
 
 			it('for noPermission', async () => {
-				const workflowsStore = mockedStore(useWorkflowsStore);
-				workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-				workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
-
 				const { getByText } = renderComponent({ pinia });
 				await waitAllPromises();
 				expect(getByText('There are currently no workflows to view')).toBeInTheDocument();
@@ -115,9 +107,6 @@ describe('WorkflowsView', () => {
 			it('for user with create scope', async () => {
 				const projectsStore = mockedStore(useProjectsStore);
 				projectsStore.currentProject = { scopes: ['workflow:create'] } as Project;
-				const workflowsStore = mockedStore(useWorkflowsStore);
-				workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-				workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
 
 				const { getByText } = renderComponent({ pinia });
 				await waitAllPromises();
@@ -129,10 +118,6 @@ describe('WorkflowsView', () => {
 			const projectsStore = mockedStore(useProjectsStore);
 			projectsStore.currentProject = { scopes: ['workflow:create'] } as Project;
 
-			const workflowsStore = mockedStore(useWorkflowsStore);
-			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-			workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
-
 			const { getByTestId } = renderComponent({ pinia });
 			await waitAllPromises();
 
@@ -145,10 +130,6 @@ describe('WorkflowsView', () => {
 	});
 
 	describe('filters', () => {
-		beforeEach(async () => {
-			pinia = createTestingPinia({ initialState });
-		});
-
 		it('should set tag filter based on query parameters', async () => {
 			await router.replace({ query: { tags: 'test-tag' } });
 
@@ -159,7 +140,6 @@ describe('WorkflowsView', () => {
 			tagStore.tagsById = {
 				'test-tag': TEST_TAG,
 			};
-			const workflowsStore = mockedStore(useWorkflowsStore);
 			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 
 			renderComponent({ pinia });
@@ -180,7 +160,6 @@ describe('WorkflowsView', () => {
 		it('should set search filter based on query parameters', async () => {
 			await router.replace({ query: { search: 'one' } });
 
-			const workflowsStore = mockedStore(useWorkflowsStore);
 			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 
 			renderComponent({ pinia });
@@ -201,7 +180,6 @@ describe('WorkflowsView', () => {
 		it('should set status filter based on query parameters', async () => {
 			await router.replace({ query: { status: 'true' } });
 
-			const workflowsStore = mockedStore(useWorkflowsStore);
 			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 
 			renderComponent({ pinia });
@@ -222,7 +200,6 @@ describe('WorkflowsView', () => {
 		it('should reset filters', async () => {
 			await router.replace({ query: { status: 'true' } });
 
-			const workflowsStore = mockedStore(useWorkflowsStore);
 			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 
 			const { queryByTestId, getByTestId } = renderComponent({ pinia });
@@ -240,7 +217,6 @@ describe('WorkflowsView', () => {
 
 		it('should remove incomplete properties', async () => {
 			await router.replace({ query: { tags: '' } });
-			const workflowsStore = mockedStore(useWorkflowsStore);
 			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 			renderComponent({ pinia });
 			await waitAllPromises();
@@ -249,7 +225,6 @@ describe('WorkflowsView', () => {
 
 		it('should remove invalid tags', async () => {
 			await router.replace({ query: { tags: 'non-existing-tag' } });
-			const workflowsStore = mockedStore(useWorkflowsStore);
 			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 			const tagStore = mockedStore(useTagsStore);
 			tagStore.allTags = [{ id: 'test-tag', name: 'tag' }];
@@ -259,13 +234,20 @@ describe('WorkflowsView', () => {
 		});
 	});
 
-	it('should reinitialize on source control pullWorkfolder', async () => {
+	describe('source control', () => {
-		vi.spyOn(usersApi, 'getUsers').mockResolvedValue([]);
+		beforeEach(async () => {
 			pinia = createTestingPinia({ initialState, stubActions: false });
-		const userStore = mockedStore(useUsersStore);
+			foldersStore = mockedStore(useFoldersStore);
-		const workflowsStore = mockedStore(useWorkflowsStore);
+			foldersStore.totalWorkflowCount = 0;
+			foldersStore.fetchTotalWorkflowsAndFoldersCount.mockResolvedValue(0);
+			workflowsStore = mockedStore(useWorkflowsStore);
+
 			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 			workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
+		});
+		it('should reinitialize on source control pullWorkfolder', async () => {
+			vi.spyOn(usersApi, 'getUsers').mockResolvedValue([]);
+			const userStore = mockedStore(useUsersStore);
 
 			const sourceControl = useSourceControlStore();
 
@@ -274,8 +256,18 @@ describe('WorkflowsView', () => {
 			await sourceControl.pullWorkfolder(true);
 			expect(userStore.fetchUsers).toHaveBeenCalledTimes(2);
 		});
+	});
+});
+
+describe('Folders', () => {
+	beforeEach(async () => {
+		await router.push('/');
+		await router.isReady();
+		pinia = createTestingPinia({ initialState });
+		foldersStore = mockedStore(useFoldersStore);
+		workflowsStore = mockedStore(useWorkflowsStore);
+	});
 
-	it('should render workflow and folder cards', async () => {
 	const TEST_WORKFLOW_RESOURCE: WorkflowListResource = {
 		resource: 'workflow',
 		id: '1',
@@ -308,11 +300,13 @@ describe('WorkflowsView', () => {
 			updatedAt: new Date().toISOString(),
 		},
 	};
+
+	it('should render workflow and folder cards', async () => {
 		// mock router resolve:
 		router.resolve = vi.fn().mockResolvedValue({
 			href: '/projects/1/folders/1',
 		});
-		const workflowsStore = mockedStore(useWorkflowsStore);
+		foldersStore.totalWorkflowCount = 2;
 		workflowsStore.fetchWorkflowsPage.mockResolvedValue([
 			TEST_WORKFLOW_RESOURCE,
 			TEST_FOLDER_RESOURCE,

packages/frontend/editor-ui/src/views/WorkflowsView.vue

@@ -15,8 +15,15 @@ import {
 	EnterpriseEditionFeature,
 	VIEWS,
 	DEFAULT_WORKFLOW_PAGE_SIZE,
+	MODAL_CONFIRM,
 } from '@/constants';
-import type { IUser, UserAction, WorkflowListResource, WorkflowListItem } from '@/Interface';
+import type {
+	IUser,
+	UserAction,
+	WorkflowListResource,
+	WorkflowListItem,
+	FolderPathItem,
+} from '@/Interface';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
@@ -44,9 +51,12 @@ import { getEasyAiWorkflowJson } from '@/utils/easyAiWorkflowUtils';
 import { useDebounce } from '@/composables/useDebounce';
 import { createEventBus } from '@n8n/utils/event-bus';
 import type { PathItem } from '@n8n/design-system/components/N8nBreadcrumbs/Breadcrumbs.vue';
-import { ProjectTypes } from '@/types/projects.types';
+import { type ProjectSharingData, ProjectTypes } from '@/types/projects.types';
 import { FOLDER_LIST_ITEM_ACTIONS } from '@/components/Folders/constants';
 import { debounce } from 'lodash-es';
+import { useMessage } from '@/composables/useMessage';
+import { useToast } from '@/composables/useToast';
+import { useFoldersStore } from '@/stores/folders.store';
 
 interface Filters extends BaseFilters {
 	status: string | boolean;
@@ -70,6 +80,8 @@ const WORKFLOWS_SORT_MAP = {
 const i18n = useI18n();
 const route = useRoute();
 const router = useRouter();
+const message = useMessage();
+const toast = useToast();
 
 const sourceControlStore = useSourceControlStore();
 const usersStore = useUsersStore();
@@ -80,10 +92,13 @@ const projectsStore = useProjectsStore();
 const telemetry = useTelemetry();
 const uiStore = useUIStore();
 const tagsStore = useTagsStore();
+const foldersStore = useFoldersStore();
+
 const documentTitle = useDocumentTitle();
 const { callDebounced } = useDebounce();
 
 const loading = ref(false);
+const breadcrumbsLoading = ref(false);
 const filters = ref<Filters>({
 	search: '',
 	homeProject: '',
@@ -97,27 +112,34 @@ const workflowsAndFolders = ref<WorkflowListResource[]>([]);
 
 const easyAICalloutVisible = ref(true);
 
-const currentFolder = ref<FolderResource | undefined>(undefined);
-
 const currentPage = ref(1);
 const pageSize = ref(DEFAULT_WORKFLOW_PAGE_SIZE);
 const currentSort = ref('updatedAt:desc');
 
-const folderCardActions = ref<UserAction[]>([
+const currentFolderId = ref<string | null>(null);
+
+/**
+ * Folder actions
+ * These can appear on the list header, and then they are applied to current folder
+ * or on each folder card, and then they are applied to the clicked folder
+ * 'onlyAvailableOn' is used to specify where the action should be available, if not specified it will be available on both
+ */
+const folderActions = ref<Array<UserAction & { onlyAvailableOn?: 'mainBreadcrumbs' | 'card' }>>([
 	{
 		label: 'Open',
 		value: FOLDER_LIST_ITEM_ACTIONS.OPEN,
 		disabled: false,
+		onlyAvailableOn: 'card',
 	},
 	{
 		label: 'Create Folder',
 		value: FOLDER_LIST_ITEM_ACTIONS.CREATE,
-		disabled: true,
+		disabled: false,
 	},
 	{
 		label: 'Create Workflow',
 		value: FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW,
-		disabled: true,
+		disabled: false,
 	},
 	{
 		label: 'Rename',
@@ -145,7 +167,16 @@ const folderCardActions = ref<UserAction[]>([
 		disabled: true,
 	},
 ]);
-
+const folderCardActions = computed(() =>
+	folderActions.value.filter(
+		(action) => !action.onlyAvailableOn || action.onlyAvailableOn === 'card',
+	),
+);
+const mainBreadcrumbsActions = computed(() =>
+	folderActions.value.filter(
+		(action) => !action.onlyAvailableOn || action.onlyAvailableOn === 'mainBreadcrumbs',
+	),
+);
 const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
 const foldersEnabled = computed(() => settingsStore.settings.folders.enabled);
 const isOverviewPage = computed(() => route.name === VIEWS.WORKFLOWS);
@@ -153,17 +184,10 @@ const currentUser = computed(() => usersStore.currentUser ?? ({} as IUser));
 const isShareable = computed(
 	() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing],
 );
-
 const showFolders = computed(() => foldersEnabled.value && !isOverviewPage.value);
 
-const mainBreadcrumbsItems = computed<PathItem[] | undefined>(() => {
+const currentFolder = computed(() => {
-	if (!showFolders.value || !currentFolder.value) return;
+	return currentFolderId.value ? foldersStore.breadcrumbsCache[currentFolderId.value] : null;
-	const items: PathItem[] = [];
-	items.push({
-		id: currentFolder.value.id,
-		label: currentFolder.value.name,
-	});
-	return items;
 });
 
 const currentProject = computed(() => projectsStore.currentProject);
@@ -175,6 +199,13 @@ const projectName = computed(() => {
 	return currentProject.value?.name;
 });
 
+const currentParentName = computed(() => {
+	if (currentFolder.value) {
+		return currentFolder.value.name;
+	}
+	return projectName.value;
+});
+
 const workflowListResources = computed<Resource[]>(() => {
 	const resources: Resource[] = (workflowsAndFolders.value || []).map((resource) => {
 		if (resource.resource === 'folder') {
@@ -190,7 +221,6 @@ const workflowListResources = computed<Resource[]>(() => {
 				parentFolder: resource.parentFolder,
 			} as FolderResource;
 		} else {
-			// TODO: Once new endpoint is in place, we'll have to explicitly check for resource type
 			return {
 				resourceType: 'workflow',
 				id: resource.id,
@@ -249,6 +279,10 @@ const emptyListDescription = computed(() => {
 	}
 });
 
+/**
+ * WATCHERS AND STORE SUBSCRIPTIONS
+ */
+
 watch(
 	() => route.params?.projectId,
 	async () => {
@@ -259,14 +293,20 @@ watch(
 watch(
 	() => route.params?.folderId,
 	async (newVal) => {
-		if (!newVal) {
+		currentFolderId.value = newVal as string;
-			currentFolder.value = undefined;
-		}
 		await fetchWorkflows();
 	},
 );
 
-// Lifecycle hooks
+sourceControlStore.$onAction(({ name, after }) => {
+	if (name !== 'pullWorkfolder') return;
+	after(async () => await initialize());
+});
+
+/**
+ * LIFE-CYCLE HOOKS
+ */
+
 onMounted(async () => {
 	documentTitle.set(i18n.baseText('workflows.heading'));
 	void usersStore.showPersonalizationSurvey();
@@ -280,7 +320,90 @@ onBeforeUnmount(() => {
 	workflowListEventBus.off('workflow-duplicated', fetchWorkflows);
 });
 
-// Methods
+/**
+ * METHODS
+ */
+
+// Main component fetch methods
+const initialize = async () => {
+	loading.value = true;
+	await setFiltersFromQueryString();
+	if (!route.params.folderId) {
+		currentFolderId.value = null;
+	}
+	const [, resourcesPage] = await Promise.all([
+		usersStore.fetchUsers(),
+		fetchWorkflows(),
+		workflowsStore.fetchActiveWorkflows(),
+	]);
+	breadcrumbsLoading.value = false;
+	workflowsAndFolders.value = resourcesPage;
+	loading.value = false;
+};
+
+/**
+ * Fetches:
+ * - Current workflows and folders page
+ * - Total count of workflows and folders in the current project
+ * - Path to the current folder (if not cached)
+ */
+const fetchWorkflows = async () => {
+	// We debounce here so that fast enough fetches don't trigger
+	// the placeholder graphics for a few milliseconds, which would cause a flicker
+	const delayedLoading = debounce(() => {
+		loading.value = true;
+	}, 300);
+	const routeProjectId = route.params?.projectId as string | undefined;
+	const homeProjectFilter = filters.value.homeProject || undefined;
+	const parentFolder = (route.params?.folderId as string) || undefined;
+
+	const fetchedResources = await workflowsStore.fetchWorkflowsPage(
+		routeProjectId ?? homeProjectFilter,
+		currentPage.value,
+		pageSize.value,
+		currentSort.value,
+		{
+			name: filters.value.search || undefined,
+			active: filters.value.status ? Boolean(filters.value.status) : undefined,
+			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 ?? ''] !== undefined;
+	const needToFetchFolderPath = parentFolder && !isCurrentFolderCached && routeProjectId;
+	if (needToFetchFolderPath) {
+		breadcrumbsLoading.value = true;
+		await foldersStore.getFolderPath(routeProjectId, parentFolder);
+		currentFolderId.value = parentFolder;
+		breadcrumbsLoading.value = false;
+	}
+	await foldersStore.fetchTotalWorkflowsAndFoldersCount(routeProjectId);
+
+	delayedLoading.cancel();
+	workflowsAndFolders.value = fetchedResources;
+	loading.value = false;
+	return fetchedResources;
+};
+
+// Filter and sort methods
+
+const onSortUpdated = async (sort: string) => {
+	currentSort.value =
+		WORKFLOWS_SORT_MAP[sort as keyof typeof WORKFLOWS_SORT_MAP] ?? 'updatedAt:desc';
+	if (currentSort.value !== 'updatedAt:desc') {
+		void router.replace({ query: { ...route.query, sort } });
+	} else {
+		void router.replace({ query: { ...route.query, sort: undefined } });
+	}
+	await fetchWorkflows();
+};
+
 const onFiltersUpdated = async () => {
 	currentPage.value = 1;
 	saveFiltersOnQueryString();
@@ -298,38 +421,6 @@ const onSearchUpdated = async (search: string) => {
 	}
 };
 
-const addWorkflow = () => {
-	uiStore.nodeViewInitialized = false;
-	void router.push({
-		name: VIEWS.NEW_WORKFLOW,
-		query: { projectId: route.params?.projectId },
-	});
-
-	telemetry.track('User clicked add workflow button', {
-		source: 'Workflows list',
-	});
-	trackEmptyCardClick('blank');
-};
-
-const trackEmptyCardClick = (option: 'blank' | 'templates' | 'courses') => {
-	telemetry.track('User clicked empty page option', {
-		option,
-	});
-};
-
-const initialize = async () => {
-	loading.value = true;
-	currentFolder.value = undefined;
-	await setFiltersFromQueryString();
-	const [, resourcesPage] = await Promise.all([
-		usersStore.fetchUsers(),
-		fetchWorkflows(),
-		workflowsStore.fetchActiveWorkflows(),
-	]);
-	workflowsAndFolders.value = resourcesPage;
-	loading.value = false;
-};
-
 const setCurrentPage = async (page: number) => {
 	currentPage.value = page;
 	await fetchWorkflows();
@@ -340,38 +431,6 @@ const setPageSize = async (size: number) => {
 	await fetchWorkflows();
 };
 
-const fetchWorkflows = async () => {
-	// We debounce here so that fast enough fetches don't trigger
-	// the placeholder graphics for a few milliseconds, which would cause a flicker
-	const delayedLoading = debounce(() => {
-		loading.value = true;
-	}, 300);
-	const routeProjectId = route.params?.projectId as string | undefined;
-	const homeProjectFilter = filters.value.homeProject || undefined;
-	const parentFolder = (route.params?.folderId as string) || '0';
-
-	const fetchedResources = await workflowsStore.fetchWorkflowsPage(
-		routeProjectId ?? homeProjectFilter,
-		currentPage.value,
-		pageSize.value,
-		currentSort.value,
-		{
-			name: filters.value.search || undefined,
-			active: filters.value.status ? Boolean(filters.value.status) : undefined,
-			tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
-			parentFolderId: parentFolder,
-		},
-		showFolders.value,
-	);
-	// @ts-expect-error - Once we have an endpoint to fetch the path based on Id, we should remove this and fetch the path from the endpoint
-	currentFolder.value = fetchedResources[0]?.parentFolder;
-
-	delayedLoading.cancel();
-	workflowsAndFolders.value = fetchedResources;
-	loading.value = false;
-	return fetchedResources;
-};
-
 const onClickTag = async (tagId: string) => {
 	if (!filters.value.tags.includes(tagId)) {
 		filters.value.tags.push(tagId);
@@ -381,6 +440,8 @@ const onClickTag = async (tagId: string) => {
 	}
 };
 
+// Query string methods
+
 const saveFiltersOnQueryString = () => {
 	// Get current query parameters
 	const currentQuery = { ...route.query };
@@ -415,10 +476,6 @@ const saveFiltersOnQueryString = () => {
 	});
 };
 
-function isValidProjectId(projectId: string) {
-	return projectsStore.availableProjects.some((project) => project.id === projectId);
-}
-
 const setFiltersFromQueryString = async () => {
 	const newQuery: LocationQueryRaw = { ...route.query };
 	const { tags, status, search, homeProject, sort } = route.query ?? {};
@@ -486,11 +543,31 @@ const setFiltersFromQueryString = async () => {
 	void router.replace({ query: newQuery });
 };
 
-sourceControlStore.$onAction(({ name, after }) => {
+// Misc methods
-	if (name !== 'pullWorkfolder') return;
+
-	after(async () => await initialize());
+const addWorkflow = () => {
+	uiStore.nodeViewInitialized = false;
+	void router.push({
+		name: VIEWS.NEW_WORKFLOW,
+		query: { projectId: route.params?.projectId, parentFolderId: route.params?.folderId },
 	});
 
+	telemetry.track('User clicked add workflow button', {
+		source: 'Workflows list',
+	});
+	trackEmptyCardClick('blank');
+};
+
+const trackEmptyCardClick = (option: 'blank' | 'templates' | 'courses') => {
+	telemetry.track('User clicked empty page option', {
+		option,
+	});
+};
+
+function isValidProjectId(projectId: string) {
+	return projectsStore.availableProjects.some((project) => project.id === projectId);
+}
+
 const openAIWorkflow = async (source: string) => {
 	dismissEasyAICallout();
 	telemetry.track(
@@ -512,7 +589,7 @@ const openAIWorkflow = async (source: string) => {
 	await router.push({
 		name: VIEWS.TEMPLATE_IMPORT,
 		params: { id: easyAiWorkflowJson.meta.templateId },
-		query: { fromJson: 'true' },
+		query: { fromJson: 'true', parentFolderId: route.params.folderId },
 	});
 };
 
@@ -520,17 +597,6 @@ const dismissEasyAICallout = () => {
 	easyAICalloutVisible.value = false;
 };
 
-const onSortUpdated = async (sort: string) => {
-	currentSort.value =
-		WORKFLOWS_SORT_MAP[sort as keyof typeof WORKFLOWS_SORT_MAP] ?? 'updatedAt:desc';
-	if (currentSort.value !== 'updatedAt:desc') {
-		void router.replace({ query: { ...route.query, sort } });
-	} else {
-		void router.replace({ query: { ...route.query, sort: undefined } });
-	}
-	await fetchWorkflows();
-};
-
 const onWorkflowActiveToggle = (data: { id: string; active: boolean }) => {
 	const workflow: WorkflowListItem | undefined = workflowsAndFolders.value.find(
 		(w): w is WorkflowListItem => w.id === data.id,
@@ -539,8 +605,219 @@ const onWorkflowActiveToggle = (data: { id: string; active: boolean }) => {
 	workflow.active = data.active;
 };
 
-const onFolderOpened = (data: { folder: FolderResource }) => {
+// Breadcrumbs methods
-	currentFolder.value = data.folder;
+
+/**
+ * Breadcrumbs: Calculate visible and hidden items for both main breadcrumbs and card breadcrumbs
+ * We do this here and pass to each component to avoid recalculating in each card
+ */
+const visibleBreadcrumbsItems = computed<FolderPathItem[]>(() => {
+	if (!currentFolder.value) return [];
+	const items: FolderPathItem[] = [];
+	const parent = foldersStore.getCachedFolder(currentFolder.value.parentFolder ?? '');
+	if (parent) {
+		items.push({
+			id: parent.id,
+			label: parent.name,
+			href: `/projects/${route.params.projectId}/folders/${parent.id}/workflows`,
+			parentFolder: parent.parentFolder,
+		});
+	}
+	items.push({
+		id: currentFolder.value.id,
+		label: currentFolder.value.name,
+		parentFolder: parent?.parentFolder,
+	});
+	return items;
+});
+
+const hiddenBreadcrumbsItems = computed<FolderPathItem[]>(() => {
+	const lastVisibleParent: FolderPathItem =
+		visibleBreadcrumbsItems.value[visibleBreadcrumbsItems.value.length - 1];
+	if (!lastVisibleParent) return [];
+	const items: FolderPathItem[] = [];
+	// Go through all the parent folders and add them to the hidden items
+	let parentFolder = lastVisibleParent.parentFolder;
+	while (parentFolder) {
+		const parent = foldersStore.getCachedFolder(parentFolder);
+
+		if (!parent) break;
+		items.unshift({
+			id: parent.id,
+			label: parent.name,
+			href: `/projects/${route.params.projectId}/folders/${parent.id}/workflows`,
+			parentFolder: parent.parentFolder,
+		});
+		parentFolder = parent.parentFolder;
+	}
+	return items;
+});
+
+/**
+ * Main breadcrumbs items that show on top of the list
+ * These show path to the current folder with up to 2 parents visible
+ */
+const mainBreadcrumbs = computed(() => {
+	return {
+		visibleItems: visibleBreadcrumbsItems.value,
+		hiddenItems: hiddenBreadcrumbsItems.value,
+	};
+});
+
+/**
+ * Card breadcrumbs items that show on workflow and folder cards
+ * These show path to the current folder with up to one parent visible
+ */
+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: PathItem) => {
+	if (item.href) {
+		loading.value = true;
+		void router
+			.push(item.href)
+			.then(() => {
+				currentFolderId.value = item.id;
+				loading.value = false;
+			})
+			.catch((error) => {
+				toast.showError(error, 'Error navigating to folder');
+			});
+	}
+};
+
+// Folder actions
+
+// Main header action handlers
+// These render next to the breadcrumbs and are applied to the current folder/project
+const onBreadCrumbsAction = async (action: string) => {
+	switch (action) {
+		case FOLDER_LIST_ITEM_ACTIONS.CREATE:
+			if (!route.params.projectId) return;
+			const currentParent = currentFolder.value?.name || projectName.value;
+			if (!currentParent) return;
+			await createFolder({
+				id: (route.params.folderId as string) ?? '-1',
+				name: currentParent,
+				type: currentFolder.value ? 'folder' : 'project',
+			});
+			break;
+		case FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW:
+			addWorkflow();
+			break;
+		default:
+			break;
+	}
+};
+
+// Folder card action handlers
+// These render on each folder card and are applied to the clicked folder
+const onFolderCardAction = async (payload: { action: string; folderId: string }) => {
+	const clickedFolder = foldersStore.getCachedFolder(payload.folderId);
+	if (!clickedFolder) return;
+	switch (payload.action) {
+		case FOLDER_LIST_ITEM_ACTIONS.CREATE:
+			await createFolder({
+				id: clickedFolder.id,
+				name: clickedFolder.name,
+				type: 'folder',
+			});
+			break;
+		case FOLDER_LIST_ITEM_ACTIONS.CREATE_WORKFLOW:
+			currentFolderId.value = clickedFolder.id;
+			void router.push({
+				name: VIEWS.NEW_WORKFLOW,
+				query: { projectId: route.params?.projectId, parentFolderId: clickedFolder.id },
+			});
+			break;
+		default:
+			break;
+	}
+};
+
+// Reusable action handlers
+// Both action handlers ultimately call these methods once folder to apply action to is determined
+const createFolder = async (parent: { id: string; name: string; type: 'project' | 'folder' }) => {
+	const promptResponsePromise = message.prompt(
+		i18n.baseText('folders.add.to.parent.message', { interpolate: { parent: parent.name } }),
+		{
+			confirmButtonText: i18n.baseText('generic.create'),
+			cancelButtonText: i18n.baseText('generic.cancel'),
+			inputErrorMessage: i18n.baseText('folders.add.invalidName.message'),
+			inputValue: '',
+			inputPattern: /^[a-zA-Z0-9-_ ]{1,100}$/,
+			customClass: 'add-folder-modal',
+		},
+	);
+	const promptResponse = await promptResponsePromise;
+	if (promptResponse.action === MODAL_CONFIRM) {
+		const folderName = promptResponse.value;
+		try {
+			const newFolder = await foldersStore.createFolder(
+				folderName,
+				route.params.projectId as string,
+				parent.type === 'folder' ? parent.id : undefined,
+			);
+
+			let newFolderURL = `/projects/${route.params.projectId}`;
+			if (newFolder.parentFolder) {
+				newFolderURL = `/projects/${route.params.projectId}/folders/${newFolder.id}/workflows`;
+			}
+			toast.showMessage({
+				title: i18n.baseText('folders.add.success.title'),
+				message: i18n.baseText('folders.add.success.message', {
+					interpolate: {
+						link: newFolderURL,
+						name: newFolder.name,
+					},
+				}),
+				type: 'success',
+			});
+			// If we are on an empty list, just add the new folder to the list
+			if (!workflowsAndFolders.value.length) {
+				workflowsAndFolders.value = [
+					{
+						id: newFolder.id,
+						name: newFolder.name,
+						resource: 'folder',
+						createdAt: newFolder.createdAt,
+						updatedAt: newFolder.updatedAt,
+						homeProject: projectsStore.currentProject as ProjectSharingData,
+						sharedWithProjects: [],
+						workflowCount: 0,
+					},
+				];
+			} else {
+				// Else fetch again with same filters & pagination applied
+				await fetchWorkflows();
+			}
+		} catch (error) {
+			toast.showError(error, 'Error creating folder');
+		}
+	}
+};
+
+const createFolderInCurrent = async () => {
+	if (!route.params.projectId) return;
+	const currentParent = currentFolder.value?.name || projectName.value;
+	if (!currentParent) return;
+	await createFolder({
+		id: (route.params.folderId as string) ?? '-1',
+		name: currentParent,
+		type: currentFolder.value ? 'folder' : 'project',
+	});
 };
 </script>
 
@@ -556,7 +833,7 @@ const onFolderOpened = (data: { folder: FolderResource }) => {
 		:disabled="readOnlyEnv || !projectPermissions.workflow.create"
 		:loading="false"
 		:resources-refreshing="loading"
-		:custom-page-size="10"
+		:custom-page-size="DEFAULT_WORKFLOW_PAGE_SIZE"
 		:total-items="workflowsStore.totalWorkflowCount"
 		:dont-perform-sorting-and-filtering="true"
 		@click:add="addWorkflow"
@@ -567,7 +844,28 @@ const onFolderOpened = (data: { folder: FolderResource }) => {
 		@sort="onSortUpdated"
 	>
 		<template #header>
-			<ProjectHeader />
+			<ProjectHeader @create-folder="createFolderInCurrent" />
+		</template>
+		<template v-if="showFolders" #add-button>
+			<N8nTooltip placement="top">
+				<template #content>
+					{{
+						currentParentName
+							? i18n.baseText('folders.add.to.parent.message', {
+									interpolate: { parent: currentParentName },
+								})
+							: i18n.baseText('folders.add.here.message')
+					}}
+				</template>
+				<N8nButton
+					size="large"
+					icon="folder-plus"
+					type="tertiary"
+					data-test-id="add-folder-button"
+					:class="$style['add-folder-button']"
+					@click="createFolderInCurrent"
+				/>
+			</N8nTooltip>
 		</template>
 		<template #callout>
 			<N8nCallout
@@ -599,35 +897,33 @@ const onFolderOpened = (data: { folder: FolderResource }) => {
 			</N8nCallout>
 		</template>
 		<template #breadcrumbs>
-			<n8n-breadcrumbs
+			<div v-if="breadcrumbsLoading" :class="$style['breadcrumbs-loading']">
-				v-if="mainBreadcrumbsItems"
+				<n8n-loading :loading="breadcrumbsLoading" :rows="1" variant="p" />
-				:items="mainBreadcrumbsItems"
+			</div>
-				:highlight-last-item="false"
+			<div v-else-if="showFolders && currentFolder" :class="$style['breadcrumbs-container']">
-				:path-truncated="currentFolder !== undefined"
+				<FolderBreadcrumbs
-				data-test-id="folder-card-breadcrumbs"
+					:breadcrumbs="mainBreadcrumbs"
-			>
+					:actions="mainBreadcrumbsActions"
-				<template v-if="currentProject" #prepend>
+					@item-selected="onBreadcrumbItemClick"
-					<div :class="$style['home-project']">
+					@action="onBreadCrumbsAction"
-						<n8n-link :to="`/projects/${currentProject.id}`">
+				/>
-							<N8nText size="large" color="text-base">{{ projectName }}</N8nText>
-						</n8n-link>
 			</div>
-				</template>
-			</n8n-breadcrumbs>
 		</template>
 		<template #item="{ item: data }">
 			<FolderCard
 				v-if="(data as FolderResource | WorkflowResource).resourceType === 'folder'"
 				:data="data as FolderResource"
 				:actions="folderCardActions"
+				:breadcrumbs="cardBreadcrumbs"
 				class="mb-2xs"
-				@folder-opened="onFolderOpened"
+				@action="onFolderCardAction"
 			/>
 			<WorkflowCard
 				v-else
 				data-test-id="resources-list-item"
 				class="mb-2xs"
 				:data="data as WorkflowResource"
+				:breadcrumbs="cardBreadcrumbs"
 				:workflow-list-event-bus="workflowListEventBus"
 				:read-only="readOnlyEnv"
 				@click:tag="onClickTag"
@@ -770,8 +1066,36 @@ const onFolderOpened = (data: { folder: FolderResource }) => {
 	}
 }
 
-.home-project {
+.add-folder-button {
+	width: 40px;
+}
+
+.breadcrumbs-container {
 	display: flex;
 	align-items: center;
 }
+
+.breadcrumbs-loading {
+	:global(.el-skeleton__item) {
+		margin: 0;
+		height: 40px;
+		width: 400px;
+	}
+}
+</style>
+
+<style lang="scss">
+.add-folder-modal {
+	width: 500px;
+	padding-bottom: 0;
+	.el-message-box__message {
+		font-size: var(--font-size-xl);
+	}
+	.el-message-box__btns {
+		padding: 0 var(--spacing-l) var(--spacing-l);
+	}
+	.el-message-box__content {
+		padding: var(--spacing-l);
+	}
+}
 </style>