feat(editor): Implement 'Shared with you' section in the main navigation (#15140)

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

@@ -30,11 +30,13 @@ export async function getAllCredentials(
 	context: IRestApiContext,
 	filter?: object,
 	includeScopes?: boolean,
+	onlySharedWithMe?: boolean,
 ): Promise<ICredentialsResponse[]> {
 	return await makeRestApiRequest(context, 'GET', '/credentials', {
 		...(includeScopes ? { includeScopes } : {}),
 		includeData: true,
 		...(filter ? { filter } : {}),
+		...(onlySharedWithMe ? { onlySharedWithMe } : {}),
 	});
 }
 

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

@@ -47,10 +47,12 @@ export async function getWorkflowsAndFolders(
 	filter?: object,
 	options?: object,
 	includeFolders?: boolean,
+	onlySharedWithMe?: boolean,
 ) {
 	return await getFullApiResponse<WorkflowListResource[]>(context, 'GET', '/workflows', {
 		includeScopes: true,
 		includeFolders,
+		onlySharedWithMe,
 		...(filter ? { filter } : {}),
 		...(options ? options : {}),
 	});

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

@@ -163,6 +163,7 @@ function moveResource() {
 					:resource-type="ResourceType.Credential"
 					:resource-type-label="resourceTypeLabel"
 					:personal-project="projectsStore.personalProject"
+					:show-badge-border="false"
 				/>
 				<n8n-action-toggle
 					data-test-id="credential-card-actions"

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
+import { VIEWS } from '@/constants';
+import type { Project } from '@/types/projects.types';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+type Props = {
+	personalProject: Project;
+	resourceType?: 'workflows' | 'credentials';
+};
+
+const i18n = useI18n();
+const router = useRouter();
+
+const props = withDefaults(defineProps<Props>(), {
+	resourceType: 'workflows',
+});
+
+const heading = computed(() => {
+	return i18n.baseText('workflows.empty.shared-with-me', {
+		interpolate: {
+			resource: i18n
+				.baseText(`generic.${props.resourceType === 'workflows' ? 'workflow' : 'credential'}`)
+				.toLowerCase(),
+		},
+	});
+});
+
+const onPersonalLinkClick = (event: MouseEvent) => {
+	event.preventDefault();
+	void router.push({
+		name: VIEWS.PROJECTS_WORKFLOWS,
+		params: { projectId: props.personalProject.id },
+	});
+};
+</script>
+
+<template>
+	<n8n-action-box
+		data-test-id="empty-shared-action-box"
+		:heading="heading"
+		:description="i18n.baseText('workflows.empty.shared-with-me.link')"
+		@description-click="onPersonalLinkClick"
+	/>
+</template>

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

@@ -12,7 +12,7 @@ import { VIEWS } from '@/constants';
 import userEvent from '@testing-library/user-event';
 import { waitFor, within } from '@testing-library/vue';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useOverview } from '@/composables/useOverview';
+import { useProjectPages } from '@/composables/useProjectPages';
 
 const mockPush = vi.fn();
 vi.mock('vue-router', async () => {
@@ -31,9 +31,10 @@ vi.mock('vue-router', async () => {
 	};
 });
 
-vi.mock('@/composables/useOverview', () => ({
-	useOverview: vi.fn().mockReturnValue({
+vi.mock('@/composables/useProjectPages', () => ({
+	useProjectPages: vi.fn().mockReturnValue({
 		isOverviewSubPage: false,
+		isSharedSubPage: false,
 	}),
 }));
 
@@ -52,7 +53,7 @@ const renderComponent = createComponentRenderer(ProjectHeader, {
 let route: ReturnType<typeof router.useRoute>;
 let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
 let settingsStore: ReturnType<typeof mockedStore<typeof useSettingsStore>>;
-let overview: ReturnType<typeof useOverview>;
+let projectPages: ReturnType<typeof useProjectPages>;
 
 describe('ProjectHeader', () => {
 	beforeEach(() => {
@@ -60,7 +61,7 @@ describe('ProjectHeader', () => {
 		route = router.useRoute();
 		projectsStore = mockedStore(useProjectsStore);
 		settingsStore = mockedStore(useSettingsStore);
-		overview = useOverview();
+		projectPages = useProjectPages();
 
 		projectsStore.teamProjectsLimit = -1;
 		settingsStore.settings.folders = { enabled: false };
@@ -71,19 +72,20 @@ describe('ProjectHeader', () => {
 	});
 
 	it('should not render title icon on overview page', async () => {
-		vi.spyOn(overview, 'isOverviewSubPage', 'get').mockReturnValue(true);
+		vi.spyOn(projectPages, 'isOverviewSubPage', 'get').mockReturnValue(true);
 		const { container } = renderComponent();
 
 		expect(container.querySelector('.fa-home')).not.toBeInTheDocument();
 	});
 
 	it('should render the correct icon', async () => {
-		vi.spyOn(overview, 'isOverviewSubPage', 'get').mockReturnValue(false);
+		vi.spyOn(projectPages, 'isOverviewSubPage', 'get').mockReturnValue(false);
 		const { container, rerender } = renderComponent();
 
+		// We no longer render icon for personal project
 		projectsStore.currentProject = { type: ProjectTypes.Personal } as Project;
 		await rerender({});
-		expect(container.querySelector('.fa-user')).toBeVisible();
+		expect(container.querySelector('.fa-user')).not.toBeInTheDocument();
 
 		const projectName = 'My Project';
 		projectsStore.currentProject = { name: projectName } as Project;
@@ -91,23 +93,55 @@ describe('ProjectHeader', () => {
 		expect(container.querySelector('.fa-layer-group')).toBeVisible();
 	});
 
-	it('should render the correct title and subtitle', async () => {
-		const { getByText, queryByText, rerender } = renderComponent();
-		const subtitle = 'All the workflows, credentials and executions you have access to';
+	it('Overview: should render the correct title and subtitle', async () => {
+		vi.spyOn(projectPages, 'isOverviewSubPage', 'get').mockReturnValue(true);
+		const { getByTestId, rerender } = renderComponent();
+		const overviewSubtitle = 'All the workflows, credentials and executions you have access to';
 
-		expect(getByText('Overview')).toBeVisible();
-		expect(getByText(subtitle)).toBeVisible();
+		await rerender({});
+
+		expect(getByTestId('project-name')).toHaveTextContent('Overview');
+		expect(getByTestId('project-subtitle')).toHaveTextContent(overviewSubtitle);
+	});
+
+	it('Shared with you: should render the correct title and subtitle', async () => {
+		vi.spyOn(projectPages, 'isOverviewSubPage', 'get').mockReturnValue(false);
+		vi.spyOn(projectPages, 'isSharedSubPage', 'get').mockReturnValue(true);
+		const { getByTestId, rerender } = renderComponent();
+		const sharedSubtitle = 'Workflows and credentials other users have shared with you';
+
+		await rerender({});
+
+		expect(getByTestId('project-name')).toHaveTextContent('Shared with you');
+		expect(getByTestId('project-subtitle')).toHaveTextContent(sharedSubtitle);
+	});
+
+	it('Personal: should render the correct title and subtitle', async () => {
+		vi.spyOn(projectPages, 'isOverviewSubPage', 'get').mockReturnValue(false);
+		vi.spyOn(projectPages, 'isSharedSubPage', 'get').mockReturnValue(false);
+		const { getByTestId, rerender } = renderComponent();
+		const personalSubtitle = 'Workflows and credentials owned by you';
 
 		projectsStore.currentProject = { type: ProjectTypes.Personal } as Project;
+
 		await rerender({});
-		expect(getByText('Personal')).toBeVisible();
-		expect(queryByText(subtitle)).not.toBeInTheDocument();
+
+		expect(getByTestId('project-name')).toHaveTextContent('Personal');
+		expect(getByTestId('project-subtitle')).toHaveTextContent(personalSubtitle);
+	});
+
+	it('Team project: should render the correct title and subtitle', async () => {
+		vi.spyOn(projectPages, 'isOverviewSubPage', 'get').mockReturnValue(false);
+		vi.spyOn(projectPages, 'isSharedSubPage', 'get').mockReturnValue(false);
+		const { getByTestId, queryByTestId, rerender } = renderComponent();
 
 		const projectName = 'My Project';
 		projectsStore.currentProject = { name: projectName } as Project;
+
 		await rerender({});
-		expect(getByText(projectName)).toBeVisible();
-		expect(queryByText(subtitle)).not.toBeInTheDocument();
+
+		expect(getByTestId('project-name')).toHaveTextContent(projectName);
+		expect(queryByTestId('project-subtitle')).not.toBeInTheDocument();
 	});
 
 	it('should overwrite default subtitle with slot', () => {
@@ -130,9 +164,9 @@ describe('ProjectHeader', () => {
 		renderComponent();
 
 		expect(projectTabsSpy).toHaveBeenCalledWith(
-			{
+			expect.objectContaining({
 				'show-settings': true,
-			},
+			}),
 			null,
 		);
 	});
@@ -143,9 +177,9 @@ describe('ProjectHeader', () => {
 		renderComponent();
 
 		expect(projectTabsSpy).toHaveBeenCalledWith(
-			{
+			expect.objectContaining({
 				'show-settings': false,
-			},
+			}),
 			null,
 		);
 	});
@@ -159,9 +193,9 @@ describe('ProjectHeader', () => {
 		renderComponent();
 
 		expect(projectTabsSpy).toHaveBeenCalledWith(
-			{
+			expect.objectContaining({
 				'show-settings': false,
-			},
+			}),
 			null,
 		);
 	});

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

@@ -13,7 +13,7 @@ import { VIEWS } from '@/constants';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import ProjectCreateResource from '@/components/Projects/ProjectCreateResource.vue';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useOverview } from '@/composables/useOverview';
+import { useProjectPages } from '@/composables/useProjectPages';
 
 const route = useRoute();
 const router = useRouter();
@@ -21,7 +21,7 @@ const i18n = useI18n();
 const projectsStore = useProjectsStore();
 const sourceControlStore = useSourceControlStore();
 const settingsStore = useSettingsStore();
-const overview = useOverview();
+const projectPages = useProjectPages();
 
 const emit = defineEmits<{
 	createFolder: [];
@@ -39,7 +39,12 @@ const headerIcon = computed((): ProjectIconType => {
 
 const projectName = computed(() => {
 	if (!projectsStore.currentProject) {
-		return i18n.baseText('projects.menu.overview');
+		if (projectPages.isOverviewSubPage) {
+			return i18n.baseText('projects.menu.overview');
+		} else if (projectPages.isSharedSubPage) {
+			return i18n.baseText('projects.header.shared.title');
+		}
+		return null;
 	} else if (projectsStore.currentProject.type === ProjectTypes.Personal) {
 		return i18n.baseText('projects.menu.personal');
 	} else {
@@ -60,6 +65,10 @@ const showSettings = computed(
 
 const homeProject = computed(() => projectsStore.currentProject ?? projectsStore.personalProject);
 
+const isPersonalProject = computed(() => {
+	return homeProject.value?.type === ProjectTypes.Personal;
+});
+
 const showFolders = computed(() => {
 	return (
 		settingsStore.isFoldersFeatureEnabled &&
@@ -83,6 +92,7 @@ const createWorkflowButton = computed(() => ({
 		sourceControlStore.preferences.branchReadOnly ||
 		!getResourcePermissions(homeProject.value?.scopes).workflow.create,
 }));
+
 const menu = computed(() => {
 	const items: UserAction[] = [
 		{
@@ -105,6 +115,12 @@ const menu = computed(() => {
 	return items;
 });
 
+const showProjectIcon = computed(() => {
+	return (
+		!projectPages.isOverviewSubPage && !projectPages.isSharedSubPage && !isPersonalProject.value
+	);
+});
+
 const actions: Record<ActionTypes, (projectId: string) => void> = {
 	[ACTION_TYPES.WORKFLOW]: (projectId: string) => {
 		void router.push({
@@ -129,6 +145,27 @@ const actions: Record<ActionTypes, (projectId: string) => void> = {
 	},
 } as const;
 
+const pageType = computed(() => {
+	if (projectPages.isOverviewSubPage) {
+		return 'overview';
+	} else if (projectPages.isSharedSubPage) {
+		return 'shared';
+	} else {
+		return 'project';
+	}
+});
+
+const subtitle = computed(() => {
+	if (projectPages.isOverviewSubPage) {
+		return i18n.baseText('projects.header.overview.subtitle');
+	} else if (projectPages.isSharedSubPage) {
+		return i18n.baseText('projects.header.shared.subtitle');
+	} else if (isPersonalProject.value) {
+		return i18n.baseText('projects.header.personal.subtitle');
+	}
+	return null;
+});
+
 const onSelect = (action: string) => {
 	const executableAction = actions[action as ActionTypes];
 	if (!homeProject.value) {
@@ -142,19 +179,16 @@ const onSelect = (action: string) => {
 	<div>
 		<div :class="$style.projectHeader">
 			<div :class="$style.projectDetails">
-				<ProjectIcon
-					v-if="!overview.isOverviewSubPage"
-					:icon="headerIcon"
-					:border-less="true"
-					size="medium"
-				/>
+				<ProjectIcon v-if="showProjectIcon" :icon="headerIcon" :border-less="true" size="medium" />
 				<div :class="$style.headerActions">
-					<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
+					<N8nHeading v-if="projectName" bold tag="h2" size="xlarge" data-test-id="project-name">{{
+						projectName
+					}}</N8nHeading>
 					<N8nText color="text-light">
 						<slot name="subtitle">
-							<span v-if="!projectsStore.currentProject">{{
-								i18n.baseText('projects.header.subtitle')
-							}}</span>
+							<N8nText v-if="subtitle" color="text-light" data-test-id="project-subtitle">{{
+								subtitle
+							}}</N8nText>
 						</slot>
 					</N8nText>
 				</div>
@@ -181,7 +215,11 @@ const onSelect = (action: string) => {
 		</div>
 		<slot></slot>
 		<div :class="$style.actions">
-			<ProjectTabs :show-settings="showSettings" />
+			<ProjectTabs
+				:page-type="pageType"
+				:show-executions="!projectPages.isSharedSubPage"
+				:show-settings="showSettings"
+			/>
 		</div>
 	</div>
 </template>

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

@@ -23,7 +23,6 @@ const settingsStore = useSettingsStore();
 
 const isCreatingProject = computed(() => globalEntityCreation.isCreatingProject.value);
 const displayProjects = computed(() => globalEntityCreation.displayProjects.value);
-// TODO: Once we remove the feature flag, we can remove this computed property
 const isFoldersFeatureEnabled = computed(() => settingsStore.isFoldersFeatureEnabled);
 
 const home = computed<IMenuItem>(() => ({
@@ -35,6 +34,15 @@ const home = computed<IMenuItem>(() => ({
 	},
 }));
 
+const shared = computed<IMenuItem>(() => ({
+	id: 'shared',
+	label: locale.baseText('projects.menu.shared'),
+	icon: 'share',
+	route: {
+		to: { name: VIEWS.SHARED_WITH_ME },
+	},
+}));
+
 const getProjectMenuItem = (project: ProjectListItem) => ({
 	id: project.id,
 	label: project.name,
@@ -74,6 +82,22 @@ const showAddFirstProject = computed(
 				mode="tabs"
 				data-test-id="project-home-menu-item"
 			/>
+			<N8nMenuItem
+				v-if="projectsStore.isTeamProjectFeatureEnabled || isFoldersFeatureEnabled"
+				:item="personalProject"
+				:compact="props.collapsed"
+				:active-tab="projectsStore.projectNavActiveId"
+				mode="tabs"
+				data-test-id="project-personal-menu-item"
+			/>
+			<N8nMenuItem
+				v-if="projectsStore.isTeamProjectFeatureEnabled || isFoldersFeatureEnabled"
+				:item="shared"
+				:compact="props.collapsed"
+				:active-tab="projectsStore.projectNavActiveId"
+				mode="tabs"
+				data-test-id="project-shared-menu-item"
+			/>
 		</ElMenu>
 		<hr v-if="projectsStore.isTeamProjectFeatureEnabled" class="mt-m mb-m" />
 		<N8nText
@@ -104,13 +128,6 @@ const showAddFirstProject = computed(
 			:collapse="props.collapsed"
 			:class="$style.projectItems"
 		>
-			<N8nMenuItem
-				:item="personalProject"
-				:compact="props.collapsed"
-				:active-tab="projectsStore.projectNavActiveId"
-				mode="tabs"
-				data-test-id="project-personal-menu-item"
-			/>
 			<N8nMenuItem
 				v-for="project in displayProjects"
 				:key="project.id"

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

@@ -4,75 +4,106 @@ import type { RouteRecordName } from 'vue-router';
 import { useRoute } from 'vue-router';
 import { VIEWS } from '@/constants';
 import { useI18n } from '@/composables/useI18n';
+import type { BaseTextKey } from '@/plugins/i18n';
 
-const props = defineProps<{
+type Props = {
 	showSettings?: boolean;
-}>();
+	showExecutions?: boolean;
+	pageType?: 'overview' | 'shared' | 'project';
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	showSettings: false,
+	showExecutions: true,
+	pageType: 'project',
+});
 
 const locale = useI18n();
 const route = useRoute();
 
 const selectedTab = ref<RouteRecordName | null | undefined>('');
+
+const projectId = computed(() => {
+	return Array.isArray(route?.params?.projectId)
+		? route.params.projectId[0]
+		: route?.params?.projectId;
+});
+
+const getRouteConfigs = () => {
+	// For project pages
+	if (projectId.value) {
+		return {
+			workflows: {
+				name: VIEWS.PROJECTS_WORKFLOWS,
+				params: { projectId: projectId.value },
+			},
+			credentials: {
+				name: VIEWS.PROJECTS_CREDENTIALS,
+				params: { projectId: projectId.value },
+			},
+			executions: {
+				name: VIEWS.PROJECTS_EXECUTIONS,
+				params: { projectId: projectId.value },
+			},
+		};
+	}
+
+	// Shared with me
+	if (props.pageType === 'shared') {
+		return {
+			workflows: { name: VIEWS.SHARED_WORKFLOWS },
+			credentials: { name: VIEWS.SHARED_CREDENTIALS },
+			executions: { name: VIEWS.NOT_FOUND },
+		};
+	}
+
+	// Overview
+	return {
+		workflows: { name: VIEWS.WORKFLOWS },
+		credentials: { name: VIEWS.CREDENTIALS },
+		executions: { name: VIEWS.EXECUTIONS },
+	};
+};
+
+// Create individual tab objects
+const createTab = (
+	label: BaseTextKey,
+	routeKey: string,
+	routes: Record<string, { name: RouteRecordName; params?: Record<string, string | number> }>,
+) => {
+	return {
+		label: locale.baseText(label),
+		value: routes[routeKey].name,
+		to: routes[routeKey],
+	};
+};
+
+// Generate the tabs configuration
 const options = computed(() => {
-	const projectId = route?.params?.projectId;
-	const to = projectId
-		? {
-				workflows: {
-					name: VIEWS.PROJECTS_WORKFLOWS,
-					params: { projectId },
-				},
-				credentials: {
-					name: VIEWS.PROJECTS_CREDENTIALS,
-					params: { projectId },
-				},
-				executions: {
-					name: VIEWS.PROJECTS_EXECUTIONS,
-					params: { projectId },
-				},
-			}
-		: {
-				workflows: {
-					name: VIEWS.WORKFLOWS,
-				},
-				credentials: {
-					name: VIEWS.CREDENTIALS,
-				},
-				executions: {
-					name: VIEWS.EXECUTIONS,
-				},
-			};
+	const routes = getRouteConfigs();
 	const tabs = [
-		{
-			label: locale.baseText('mainSidebar.workflows'),
-			value: to.workflows.name,
-			to: to.workflows,
-		},
-		{
-			label: locale.baseText('mainSidebar.credentials'),
-			value: to.credentials.name,
-			to: to.credentials,
-		},
-		{
-			label: locale.baseText('mainSidebar.executions'),
-			value: to.executions.name,
-			to: to.executions,
-		},
+		createTab('mainSidebar.workflows', 'workflows', routes),
+		createTab('mainSidebar.credentials', 'credentials', routes),
 	];
 
+	if (props.showExecutions) {
+		tabs.push(createTab('mainSidebar.executions', 'executions', routes));
+	}
+
 	if (props.showSettings) {
 		tabs.push({
 			label: locale.baseText('projects.settings'),
 			value: VIEWS.PROJECT_SETTINGS,
-			to: { name: VIEWS.PROJECT_SETTINGS, params: { projectId } },
+			to: { name: VIEWS.PROJECT_SETTINGS, params: { projectId: projectId.value } },
 		});
 	}
 
 	return tabs;
 });
+
 watch(
 	() => route?.name,
 	() => {
-		selectedTab.value = route?.name;
 		// Select workflows tab if folders tab is selected
 		selectedTab.value =
 			route.name === VIEWS.PROJECTS_FOLDERS ? VIEWS.PROJECTS_WORKFLOWS : route.name;

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

@@ -297,14 +297,11 @@ watch(
 	},
 );
 
-watch(
-	() => route?.params?.projectId,
-	async () => {
-		await resetFilters();
-		await loadPaginationPreferences();
-		await props.initialize();
-	},
-);
+watch([() => route.params?.projectId, () => route.name], async () => {
+	await resetFilters();
+	await loadPaginationPreferences();
+	await props.initialize();
+});
 
 // Lifecycle hooks
 onMounted(async () => {

packages/frontend/editor-ui/src/composables/useN8nLocalStorage.test.ts

@@ -8,8 +8,8 @@ const mockOverview = {
 // Create a shared storage object that persists between calls
 let mockLocalStorageValue: Record<string, unknown> = {};
 
-vi.mock('@/composables/useOverview', () => ({
-	useOverview: vi.fn(() => mockOverview),
+vi.mock('@/composables/useProjectPages', () => ({
+	useProjectPages: vi.fn(() => mockOverview),
 }));
 
 vi.mock('@vueuse/core', () => ({

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

@@ -1,4 +1,4 @@
-import { useOverview } from '@/composables/useOverview';
+import { useProjectPages } from '@/composables/useProjectPages';
 import { LOCAL_STORAGE_WORKFLOW_LIST_PREFERENCES_KEY } from '@/constants';
 import { useLocalStorage } from '@vueuse/core';
 
@@ -22,10 +22,10 @@ export type WorkflowListPreferences = {
  * Currently only used for workflow list user preferences.
  */
 export function useN8nLocalStorage() {
-	const overview = useOverview();
+	const projectPages = useProjectPages();
 
 	const getProjectKey = (projectId?: string) => {
-		return overview.isOverviewSubPage ? 'home' : projectId;
+		return projectPages.isOverviewSubPage ? 'home' : projectId;
 	};
 
 	const saveProjectPreferencesToLocalStorage = (

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

@@ -2,7 +2,10 @@ import { computed, reactive } from 'vue';
 import { useRoute } from 'vue-router';
 import { VIEWS } from '@/constants';
 
-export const useOverview = () => {
+/**
+ * This composable holds reusable logic that detects the current page type
+ */
+export const useProjectPages = () => {
 	const route = useRoute();
 
 	const isOverviewSubPage = computed(
@@ -14,7 +17,15 @@ export const useOverview = () => {
 			route.name === VIEWS.FOLDERS,
 	);
 
+	const isSharedSubPage = computed(
+		() =>
+			route.name === VIEWS.SHARED_WITH_ME ||
+			route.name === VIEWS.SHARED_WORKFLOWS ||
+			route.name === VIEWS.SHARED_CREDENTIALS,
+	);
+
 	return reactive({
 		isOverviewSubPage,
+		isSharedSubPage,
 	});
 };

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

@@ -563,6 +563,9 @@ export const enum VIEWS {
 	FOLDERS = 'Folders',
 	PROJECTS_FOLDERS = 'ProjectsFolders',
 	INSIGHTS = 'Insights',
+	SHARED_WITH_ME = 'SharedWithMe',
+	SHARED_WORKFLOWS = 'SharedWorkflows',
+	SHARED_CREDENTIALS = 'SharedCredentials',
 }
 
 export const EDITABLE_CANVAS_VIEWS = [VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW, VIEWS.EXECUTION_DEBUG];

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

@@ -2516,6 +2516,8 @@
 	"workflows.empty.learnN8n": "Learn n8n",
 	"workflows.empty.button.disabled.tooltip": "Your current role in the project does not allow you to create workflows",
 	"workflows.empty.easyAI": "Test a simple AI Agent example",
+	"workflows.empty.shared-with-me": "No {resource} have been shared with you",
+	"workflows.empty.shared-with-me.link": "<a href=\"#\">Back to Personal</a>",
 	"workflows.list.easyAI": "Test the power of AI in n8n with this simple AI Agent Workflow",
 	"workflows.list.error.fetching": "Error fetching workflows",
 	"workflows.shareModal.title": "Share '{name}'",
@@ -2746,7 +2748,10 @@
 	"settings.mfa.title": "Multi-factor Authentication",
 	"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.overview.subtitle": "All the workflows, credentials and executions you have access to",
+	"projects.header.shared.title": "Shared with you",
+	"projects.header.personal.subtitle": "Workflows and credentials owned by you",
+	"projects.header.shared.subtitle": "Workflows and credentials other users have shared with you",
 	"projects.header.create.workflow": "Create Workflow",
 	"projects.header.create.credential": "Create Credential",
 	"projects.header.create.folder": "Create Folder",
@@ -2754,6 +2759,7 @@
 	"projects.create.personal": "Create in personal",
 	"projects.create.team": "Create in project",
 	"projects.menu.overview": "Overview",
+	"projects.menu.shared": "Shared with you",
 	"projects.menu.title": "Projects",
 	"projects.menu.personal": "Personal",
 	"projects.menu.addFirstProject": "Add project",

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

@@ -132,6 +132,7 @@ import {
 	faSearchPlus,
 	faServer,
 	faScrewdriver,
+	faShare,
 	faSmile,
 	faSignInAlt,
 	faSignOutAlt,
@@ -337,6 +338,7 @@ export const FontAwesomePlugin: Plugin = {
 		addIcon(faSearchPlus);
 		addIcon(faServer);
 		addIcon(faScrewdriver);
+		addIcon(faShare);
 		addIcon(faSmile);
 		addIcon(faSignInAlt);
 		addIcon(faSignOutAlt);

packages/frontend/editor-ui/src/routes/projects.routes.ts

@@ -160,6 +160,45 @@ export const projectsRoutes: RouteRecordRaw[] = [
 			name: commonChildRouteExtensions.home[idx].name,
 		})),
 	},
+	{
+		path: '/shared',
+		name: VIEWS.SHARED_WITH_ME,
+		meta: {
+			middleware: ['authenticated'],
+		},
+		redirect: '/shared/workflows',
+		children: [
+			{
+				path: 'workflows',
+				name: VIEWS.SHARED_WORKFLOWS,
+				components: {
+					default: WorkflowsView,
+					sidebar: MainSidebar,
+				},
+				meta: {
+					middleware: ['authenticated', 'custom'],
+					middlewareOptions: {
+						custom: (options) => checkProjectAvailability(options?.to),
+					},
+				},
+			},
+			{
+				path: 'credentials/:credentialId?',
+				props: true,
+				name: VIEWS.SHARED_CREDENTIALS,
+				components: {
+					default: CredentialsView,
+					sidebar: MainSidebar,
+				},
+				meta: {
+					middleware: ['authenticated', 'custom'],
+					middlewareOptions: {
+						custom: (options) => checkProjectAvailability(options?.to),
+					},
+				},
+			},
+		],
+	},
 	{
 		path: '/workflows',
 		redirect: '/home/workflows',

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

@@ -262,6 +262,7 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 	const fetchAllCredentials = async (
 		projectId?: string,
 		includeScopes = true,
+		onlySharedWithMe = false,
 	): Promise<ICredentialsResponse[]> => {
 		const filter = {
 			projectId,
@@ -271,6 +272,7 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 			rootStore.restApiContext,
 			isEmpty(filter) ? undefined : filter,
 			includeScopes,
+			onlySharedWithMe,
 		);
 		setCredentials(credentials);
 		return credentials;

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

@@ -199,6 +199,11 @@ export const useProjectsStore = defineStore(STORES.PROJECTS, () => {
 				setCurrentProject(null);
 			}
 
+			if (newRoute?.path?.includes('shared')) {
+				projectNavActiveId.value = 'shared';
+				setCurrentProject(null);
+			}
+
 			if (newRoute?.path?.includes('workflow/')) {
 				if (currentProjectId.value) {
 					projectNavActiveId.value = currentProjectId.value;

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

@@ -550,6 +550,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			parentFolderId?: string;
 		} = {},
 		includeFolders: boolean = false,
+		onlySharedWithMe: boolean = false,
 	): Promise<WorkflowListResource[]> {
 		const filter = { ...filters, projectId };
 		const options = {
@@ -563,6 +564,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			Object.keys(filter).length ? filter : undefined,
 			Object.keys(options).length ? options : undefined,
 			includeFolders ? includeFolders : undefined,
+			onlySharedWithMe ? onlySharedWithMe : undefined,
 		);
 		totalWorkflowCount.value = count;
 		// Also set fetched workflows to store

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

@@ -7,7 +7,7 @@ import ResourcesListLayout, {
 import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { useDocumentTitle } from '@/composables/useDocumentTitle';
 import { useI18n } from '@/composables/useI18n';
-import { useOverview } from '@/composables/useOverview';
+import { useProjectPages } from '@/composables/useProjectPages';
 import { useTelemetry } from '@/composables/useTelemetry';
 import {
 	CREDENTIAL_EDIT_MODAL_KEY,
@@ -28,6 +28,7 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { listenForModalChanges, useUIStore } from '@/stores/ui.store';
 import { useUsersStore } from '@/stores/users.store';
+import type { Project } from '@/types/projects.types';
 import { isCredentialsResource } from '@/utils/typeGuards';
 import { N8nCheckbox } from '@n8n/design-system';
 import { pickBy } from 'lodash-es';
@@ -54,7 +55,7 @@ const route = useRoute();
 const router = useRouter();
 const telemetry = useTelemetry();
 const i18n = useI18n();
-const overview = useOverview();
+const overview = useProjectPages();
 
 type Filters = BaseFilters & { type?: string[]; setupNeeded?: boolean };
 const updateFilter = (state: Filters) => {
@@ -111,6 +112,10 @@ const projectPermissions = computed(() =>
 	),
 );
 
+const personalProject = computed<Project | null>(() => {
+	return projectsStore.personalProject;
+});
+
 const setRouteCredentialId = (credentialId?: string) => {
 	void router.replace({ params: { credentialId }, query: route.query });
 };
@@ -182,7 +187,11 @@ const initialize = async () => {
 		useSettingsStore().isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Variables];
 
 	const loadPromises = [
-		credentialsStore.fetchAllCredentials(route?.params?.projectId as string | undefined),
+		credentialsStore.fetchAllCredentials(
+			route?.params?.projectId as string | undefined,
+			true,
+			overview.isSharedSubPage,
+		),
 		credentialsStore.fetchCredentialTypes(false),
 		externalSecretsStore.fetchAllSecrets(),
 		nodeTypesStore.loadNodeTypesIfNotLoaded(),
@@ -304,7 +313,13 @@ onMounted(() => {
 			</div>
 		</template>
 		<template #empty>
+			<EmptySharedSectionActionBox
+				v-if="overview.isSharedSubPage && personalProject"
+				:personal-project="personalProject"
+				resource-type="credentials"
+			/>
 			<n8n-action-box
+				v-else
 				data-test-id="empty-resources-list"
 				emoji="👋"
 				:heading="

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

@@ -5,7 +5,7 @@ import GlobalExecutionsList from '@/components/executions/global/GlobalExecution
 import { useDocumentTitle } from '@/composables/useDocumentTitle';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useI18n } from '@/composables/useI18n';
-import { useOverview } from '@/composables/useOverview';
+import { useProjectPages } from '@/composables/useProjectPages';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useToast } from '@/composables/useToast';
 import InsightsSummary from '@/features/insights/components/InsightsSummary.vue';
@@ -25,7 +25,7 @@ const executionsStore = useExecutionsStore();
 const insightsStore = useInsightsStore();
 const documentTitle = useDocumentTitle();
 const toast = useToast();
-const overview = useOverview();
+const overview = useProjectPages();
 
 const { executionsCount, executionsCountEstimated, filters, allExecutions } =
 	storeToRefs(executionsStore);

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

@@ -15,6 +15,8 @@ import { useTagsStore } from '@/stores/tags.store';
 import { createRouter, createWebHistory } from 'vue-router';
 import * as usersApi from '@/api/users';
 import { useFoldersStore } from '@/stores/folders.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useProjectPages } from '@/composables/useProjectPages';
 
 vi.mock('@/api/projects.api');
 vi.mock('@/api/users');
@@ -24,6 +26,12 @@ vi.mock('@/composables/useGlobalEntityCreation', () => ({
 		menu: [],
 	}),
 }));
+vi.mock('@/composables/useProjectPages', () => ({
+	useProjectPages: vi.fn().mockReturnValue({
+		isOverviewSubPage: false,
+		isSharedSubPage: false,
+	}),
+}));
 
 const router = createRouter({
 	history: createWebHistory(),
@@ -47,6 +55,8 @@ vi.mock('@/api/usage', () => ({
 let pinia: ReturnType<typeof createTestingPinia>;
 let foldersStore: ReturnType<typeof mockedStore<typeof useFoldersStore>>;
 let workflowsStore: ReturnType<typeof mockedStore<typeof useWorkflowsStore>>;
+let settingsStore: ReturnType<typeof mockedStore<typeof useSettingsStore>>;
+let projectPages: ReturnType<typeof useProjectPages>;
 
 const renderComponent = createComponentRenderer(WorkflowsView, {
 	global: {
@@ -55,7 +65,12 @@ const renderComponent = createComponentRenderer(WorkflowsView, {
 });
 
 const initialState = {
-	[STORES.SETTINGS]: { settings: { enterprise: { sharing: false }, folders: { enabled: false } } },
+	[STORES.SETTINGS]: {
+		settings: {
+			enterprise: { sharing: false, projects: { team: { limit: 5 } } },
+			folders: { enabled: false },
+		},
+	},
 };
 
 describe('WorkflowsView', () => {
@@ -65,12 +80,15 @@ describe('WorkflowsView', () => {
 		pinia = createTestingPinia({ initialState });
 		foldersStore = mockedStore(useFoldersStore);
 		workflowsStore = mockedStore(useWorkflowsStore);
+		settingsStore = mockedStore(useSettingsStore);
 
 		workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 		workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
 
 		foldersStore.totalWorkflowCount = 0;
 		foldersStore.fetchTotalWorkflowsAndFoldersCount.mockResolvedValue(0);
+
+		projectPages = useProjectPages();
 	});
 
 	describe('should show empty state', () => {
@@ -133,6 +151,48 @@ describe('WorkflowsView', () => {
 		});
 	});
 
+	describe('fetch workflow options', () => {
+		it('should not fetch folders for overview page', async () => {
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+			settingsStore.isFoldersFeatureEnabled = true;
+			vi.spyOn(projectPages, 'isOverviewSubPage', 'get').mockReturnValue(true);
+			vi.spyOn(projectPages, 'isSharedSubPage', 'get').mockReturnValue(false);
+
+			renderComponent({ pinia });
+			await waitAllPromises();
+
+			expect(workflowsStore.fetchWorkflowsPage).toHaveBeenCalledWith(
+				expect.any(String),
+				expect.any(Number),
+				expect.any(Number),
+				expect.any(String),
+				expect.any(Object),
+				false,
+				expect.any(Boolean),
+			);
+		});
+
+		it('should send proper API parameters for "Shared with you" page', async () => {
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+			settingsStore.isFoldersFeatureEnabled = true;
+			vi.spyOn(projectPages, 'isOverviewSubPage', 'get').mockReturnValue(false);
+			vi.spyOn(projectPages, 'isSharedSubPage', 'get').mockReturnValue(true);
+
+			renderComponent({ pinia });
+			await waitAllPromises();
+
+			expect(workflowsStore.fetchWorkflowsPage).toHaveBeenCalledWith(
+				expect.any(String),
+				expect.any(Number),
+				expect.any(Number),
+				expect.any(String),
+				expect.any(Object),
+				false, // No folders
+				true, // onlySharedWithMe = true
+			);
+		});
+	});
+
 	describe('filters', () => {
 		it('should set tag filter based on query parameters', async () => {
 			await router.replace({ query: { tags: 'test-tag' } });
@@ -158,6 +218,7 @@ describe('WorkflowsView', () => {
 					tags: [TEST_TAG.name],
 					isArchived: false,
 				}),
+				false, // No folders if tag filter is set
 				expect.any(Boolean),
 			);
 		});
@@ -180,6 +241,7 @@ describe('WorkflowsView', () => {
 					isArchived: false,
 				}),
 				expect.any(Boolean),
+				expect.any(Boolean),
 			);
 		});
 
@@ -200,6 +262,7 @@ describe('WorkflowsView', () => {
 					active: true,
 					isArchived: false,
 				}),
+				false, // No folders if active filter is set
 				expect.any(Boolean),
 			);
 		});
@@ -221,6 +284,7 @@ describe('WorkflowsView', () => {
 					active: false,
 					isArchived: false,
 				}),
+				false,
 				expect.any(Boolean),
 			);
 		});
@@ -241,6 +305,7 @@ describe('WorkflowsView', () => {
 				expect.objectContaining({
 					isArchived: undefined,
 				}),
+				false, // No folders if active filter is set
 				expect.any(Boolean),
 			);
 		});

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

@@ -18,7 +18,7 @@ import type { DragTarget, DropTarget } from '@/composables/useFolders';
 import { useFolders } from '@/composables/useFolders';
 import { useI18n } from '@/composables/useI18n';
 import { useMessage } from '@/composables/useMessage';
-import { useOverview } from '@/composables/useOverview';
+import { useProjectPages } from '@/composables/useProjectPages';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useToast } from '@/composables/useToast';
 import {
@@ -49,7 +49,7 @@ import { useUIStore } from '@/stores/ui.store';
 import { useUsageStore } from '@/stores/usage.store';
 import { useUsersStore } from '@/stores/users.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { type ProjectSharingData, ProjectTypes } from '@/types/projects.types';
+import { type Project, type ProjectSharingData, ProjectTypes } from '@/types/projects.types';
 import { getEasyAiWorkflowJson } from '@/utils/easyAiWorkflowUtils';
 import {
 	N8nCard,
@@ -112,7 +112,7 @@ const insightsStore = useInsightsStore();
 
 const documentTitle = useDocumentTitle();
 const { callDebounced } = useDebounce();
-const overview = useOverview();
+const projectPages = useProjectPages();
 
 // We render component in a loading state until initialization is done
 // This will prevent any additional workflow fetches while initializing
@@ -197,7 +197,6 @@ const mainBreadcrumbsActions = computed(() =>
 );
 
 const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
-const isOverviewPage = computed(() => route.name === VIEWS.WORKFLOWS);
 const currentUser = computed(() => usersStore.currentUser ?? ({} as IUser));
 const isShareable = computed(
 	() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing],
@@ -212,7 +211,7 @@ const teamProjectsEnabled = computed(() => {
 });
 
 const showFolders = computed(() => {
-	return foldersEnabled.value && !isOverviewPage.value;
+	return foldersEnabled.value && !projectPages.isOverviewSubPage && !projectPages.isSharedSubPage;
 });
 
 const currentFolder = computed(() => {
@@ -269,6 +268,10 @@ const currentParentName = computed(() => {
 	return projectName.value;
 });
 
+const personalProject = computed<Project | null>(() => {
+	return projectsStore.personalProject;
+});
+
 const workflowListResources = computed<Resource[]>(() => {
 	const resources: Resource[] = (workflowsAndFolders.value || []).map((resource) => {
 		if (resource.resource === 'folder') {
@@ -330,7 +333,7 @@ const showEasyAIWorkflowCallout = computed(() => {
 
 const projectPermissions = computed(() => {
 	return getResourcePermissions(
-		projectsStore.currentProject?.scopes ?? projectsStore.personalProject?.scopes,
+		projectsStore.currentProject?.scopes ?? personalProject.value?.scopes,
 	);
 });
 
@@ -367,12 +370,9 @@ const showRegisteredCommunityCTA = computed(
  * WATCHERS, STORE SUBSCRIPTIONS AND EVENT BUS HANDLERS
  */
 
-watch(
-	() => route.params?.projectId,
-	async () => {
-		loading.value = true;
-	},
-);
+watch([() => route.params?.projectId, () => route.name], async () => {
+	loading.value = true;
+});
 
 watch(
 	() => route.params?.folderId,
@@ -510,11 +510,10 @@ const fetchWorkflows = async () => {
 				active: activeFilter,
 				isArchived: archivedFilter,
 				tags: tags.length ? tags : undefined,
-				parentFolderId:
-					parentFolder ??
-					(isOverviewPage.value ? undefined : filters?.value.search ? undefined : PROJECT_ROOT), // Sending 0 will only show one level of folders
+				parentFolderId: getParentFolderId(parentFolder),
 			},
 			fetchFolders,
+			projectPages.isSharedSubPage,
 		);
 
 		foldersStore.cacheFolders(
@@ -536,7 +535,8 @@ const fetchWorkflows = async () => {
 		workflowsAndFolders.value = fetchedResources;
 
 		// Toggle ownership cards visibility only after we have fetched the workflows
-		showCardsBadge.value = isOverviewPage.value || filters.value.search !== '';
+		showCardsBadge.value =
+			projectPages.isOverviewSubPage || projectPages.isSharedSubPage || filters.value.search !== '';
 
 		return fetchedResources;
 	} catch (error) {
@@ -553,11 +553,31 @@ const fetchWorkflows = async () => {
 	}
 };
 
+/**
+ * Get parent folder id for filtering requests
+ */
+const getParentFolderId = (routeId?: string) => {
+	// If parentFolder is defined in route, use it
+	if (routeId !== null && routeId !== undefined) {
+		return routeId;
+	}
+
+	// If we're on overview/shared page or searching, don't filter by parent folder
+	if (projectPages.isOverviewSubPage || projectPages.isSharedSubPage || filters?.value.search) {
+		return undefined;
+	}
+
+	// Default: 0 will only show one level of folders
+	return PROJECT_ROOT;
+};
+
 // Filter and sort methods
 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: string) => {
@@ -1369,7 +1389,7 @@ const onNameSubmit = async ({
 		<template #header>
 			<ProjectHeader @create-folder="createFolderInCurrent">
 				<InsightsSummary
-					v-if="overview.isOverviewSubPage && insightsStore.isSummaryEnabled"
+					v-if="projectPages.isOverviewSubPage && insightsStore.isSummaryEnabled"
 					:loading="insightsStore.weeklySummary.isLoading"
 					:summary="insightsStore.weeklySummary.state"
 					time-range="week"
@@ -1379,10 +1399,21 @@ const onNameSubmit = async ({
 		<template v-if="foldersEnabled || showRegisteredCommunityCTA" #add-button>
 			<N8nTooltip
 				placement="top"
-				:disabled="!(isOverviewPage || (!readOnlyEnv && hasPermissionToCreateFolders))"
+				:disabled="
+					!(
+						projectPages.isOverviewSubPage ||
+						projectPages.isSharedSubPage ||
+						(!readOnlyEnv && hasPermissionToCreateFolders)
+					)
+				"
 			>
 				<template #content>
-					<span v-if="isOverviewPage && !showRegisteredCommunityCTA">
+					<span
+						v-if="
+							(projectPages.isOverviewSubPage || projectPages.isSharedSubPage) &&
+							!showRegisteredCommunityCTA
+						"
+					>
 						<span v-if="teamProjectsEnabled">
 							{{ i18n.baseText('folders.add.overview.withProjects.message') }}
 						</span>
@@ -1413,7 +1444,7 @@ const onNameSubmit = async ({
 		</template>
 		<template #callout>
 			<N8nCallout
-				v-if="showEasyAIWorkflowCallout && easyAICalloutVisible"
+				v-if="!loading && showEasyAIWorkflowCallout && easyAICalloutVisible"
 				theme="secondary"
 				icon="robot"
 				:class="$style['easy-ai-workflow-callout']"
@@ -1500,7 +1531,7 @@ const onNameSubmit = async ({
 					:read-only="
 						readOnlyEnv || (!hasPermissionToDeleteFolders && !hasPermissionToCreateFolders)
 					"
-					:personal-project="projectsStore.personalProject"
+					:personal-project="personalProject"
 					:data-resourceid="(data as FolderResource).id"
 					:data-resourcename="(data as FolderResource).name"
 					:class="{
@@ -1565,47 +1596,54 @@ const onNameSubmit = async ({
 			</Draggable>
 		</template>
 		<template #empty>
-			<div class="text-center mt-s" data-test-id="list-empty-state">
-				<N8nHeading tag="h2" size="xlarge" class="mb-2xs">
-					{{
-						currentUser.firstName
-							? i18n.baseText('workflows.empty.heading', {
-									interpolate: { name: currentUser.firstName },
-								})
-							: i18n.baseText('workflows.empty.heading.userNotSetup')
-					}}
-				</N8nHeading>
-				<N8nText size="large" color="text-base">
-					{{ emptyListDescription }}
-				</N8nText>
-			</div>
-			<div
-				v-if="!readOnlyEnv && projectPermissions.workflow.create"
-				:class="['text-center', 'mt-2xl', $style.actionsContainer]"
-			>
-				<N8nCard
-					:class="$style.emptyStateCard"
-					hoverable
-					data-test-id="new-workflow-card"
-					@click="addWorkflow"
-				>
-					<N8nIcon :class="$style.emptyStateCardIcon" icon="file" />
-					<N8nText size="large" class="mt-xs" color="text-dark">
-						{{ i18n.baseText('workflows.empty.startFromScratch') }}
+			<EmptySharedSectionActionBox
+				v-if="projectPages.isSharedSubPage && personalProject"
+				:personal-project="personalProject"
+				resource-type="workflows"
+			/>
+			<div v-else>
+				<div class="text-center mt-s" data-test-id="list-empty-state">
+					<N8nHeading tag="h2" size="xlarge" class="mb-2xs">
+						{{
+							currentUser.firstName
+								? i18n.baseText('workflows.empty.heading', {
+										interpolate: { name: currentUser.firstName },
+									})
+								: i18n.baseText('workflows.empty.heading.userNotSetup')
+						}}
+					</N8nHeading>
+					<N8nText size="large" color="text-base">
+						{{ emptyListDescription }}
 					</N8nText>
-				</N8nCard>
-				<N8nCard
-					v-if="showEasyAIWorkflowCallout"
-					:class="$style.emptyStateCard"
-					hoverable
-					data-test-id="easy-ai-workflow-card"
-					@click="openAIWorkflow('empty')"
+				</div>
+				<div
+					v-if="!readOnlyEnv && projectPermissions.workflow.create"
+					:class="['text-center', 'mt-2xl', $style.actionsContainer]"
 				>
-					<N8nIcon :class="$style.emptyStateCardIcon" icon="robot" />
-					<N8nText size="large" class="mt-xs pl-2xs pr-2xs" color="text-dark">
-						{{ i18n.baseText('workflows.empty.easyAI') }}
-					</N8nText>
-				</N8nCard>
+					<N8nCard
+						:class="$style.emptyStateCard"
+						hoverable
+						data-test-id="new-workflow-card"
+						@click="addWorkflow"
+					>
+						<N8nIcon :class="$style.emptyStateCardIcon" icon="file" />
+						<N8nText size="large" class="mt-xs" color="text-dark">
+							{{ i18n.baseText('workflows.empty.startFromScratch') }}
+						</N8nText>
+					</N8nCard>
+					<N8nCard
+						v-if="showEasyAIWorkflowCallout"
+						:class="$style.emptyStateCard"
+						hoverable
+						data-test-id="easy-ai-workflow-card"
+						@click="openAIWorkflow('empty')"
+					>
+						<N8nIcon :class="$style.emptyStateCardIcon" icon="robot" />
+						<N8nText size="large" class="mt-xs pl-2xs pr-2xs" color="text-dark">
+							{{ i18n.baseText('workflows.empty.easyAI') }}
+						</N8nText>
+					</N8nCard>
+				</div>
 			</div>
 		</template>
 		<template #filters="{ setKeyValue }">
@@ -1657,12 +1695,19 @@ const onNameSubmit = async ({
 			</div>
 		</template>
 		<template #postamble>
+			<!-- Empty states for shared section and folders -->
 			<div
-				v-if="workflowsAndFolders.length === 0 && currentFolder && !hasFilters"
+				v-if="workflowsAndFolders.length === 0 && !hasFilters"
 				:class="$style['empty-folder-container']"
 				data-test-id="empty-folder-container"
 			>
+				<EmptySharedSectionActionBox
+					v-if="projectPages.isSharedSubPage && personalProject"
+					:personal-project="personalProject"
+					resource-type="workflows"
+				/>
 				<n8n-action-box
+					v-else-if="currentFolder"
 					data-test-id="empty-folder-action-box"
 					:heading="
 						i18n.baseText('folders.empty.actionbox.title', {