fix(editor): Remove title icon on Overview subpages (#14128)

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

@@ -4,14 +4,16 @@ 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 { ProjectTypes } from '@/types/projects.types';
+import { type ProjectIcon as ProjectIconType, ProjectTypes } from '@/types/projects.types';
 import { useProjectsStore } from '@/stores/projects.store';
 import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
+import ProjectIcon from '@/components/Projects/ProjectIcon.vue';
 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';
+import { useOverview } from '@/composables/useOverview';
 
 const route = useRoute();
 const router = useRouter();
@@ -19,11 +21,22 @@ const i18n = useI18n();
 const projectsStore = useProjectsStore();
 const sourceControlStore = useSourceControlStore();
 const settingsStore = useSettingsStore();
+const overview = useOverview();
 
 const emit = defineEmits<{
 	createFolder: [];
 }>();
 
+const headerIcon = computed((): ProjectIconType => {
+	if (projectsStore.currentProject?.type === ProjectTypes.Personal) {
+		return { type: 'icon', value: 'user' };
+	} else if (projectsStore.currentProject?.name) {
+		return projectsStore.currentProject.icon ?? { type: 'icon', value: 'layer-group' };
+	} else {
+		return { type: 'icon', value: 'home' };
+	}
+});
+
 const projectName = computed(() => {
 	if (!projectsStore.currentProject) {
 		return i18n.baseText('projects.menu.overview');
@@ -126,6 +139,12 @@ 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"
+				/>
 				<div :class="$style.headerActions">
 					<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
 					<N8nText color="text-light">
@@ -168,7 +187,7 @@ const onSelect = (action: string) => {
 .projectHeader,
 .projectDescription {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: space-between;
 	padding-bottom: var(--spacing-m);
 	min-height: var(--spacing-3xl);