feat(editor): Show workflow breadcrumbs in canvas (#14710)

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from '@/composables/useI18n';
+import {
+	type Project,
+	type ProjectIcon as ProjectIconType,
+	ProjectTypes,
+} from '@/types/projects.types';
+
+type Props = {
+	currentProject: Project;
+	isDragging?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	isDragging: false,
+});
+
+const emit = defineEmits<{
+	projectHover: [];
+	projectDrop: [];
+}>();
+
+const i18n = useI18n();
+
+const projectIcon = computed((): ProjectIconType => {
+	if (props.currentProject?.type === ProjectTypes.Personal) {
+		return { type: 'icon', value: 'user' };
+	} else if (props.currentProject?.name) {
+		return props.currentProject.icon ?? { type: 'icon', value: 'layer-group' };
+	} else {
+		return { type: 'icon', value: 'home' };
+	}
+});
+
+const projectName = computed(() => {
+	if (props.currentProject.type === ProjectTypes.Personal) {
+		return i18n.baseText('projects.menu.personal');
+	}
+	return props.currentProject.name;
+});
+
+const onHover = () => {
+	emit('projectHover');
+};
+
+const onProjectMouseUp = () => {
+	if (props.isDragging) {
+		emit('projectDrop');
+	}
+};
+</script>
+<template>
+	<div
+		:class="{ [$style['home-project']]: true, [$style.dragging]: isDragging }"
+		data-test-id="home-project"
+		@mouseenter="onHover"
+		@mouseup="isDragging ? onProjectMouseUp() : null"
+	>
+		<n8n-link :to="`/projects/${currentProject.id}`" :class="[$style['project-link']]">
+			<ProjectIcon :icon="projectIcon" :border-less="true" size="mini" :title="projectName" />
+			<N8nText size="medium" color="text-base" :class="$style['project-label']">
+				{{ projectName }}
+			</N8nText>
+		</n8n-link>
+	</div>
+</template>
+
+<style module lang="scss">
+.home-project {
+	display: flex;
+	padding: var(--spacing-3xs) var(--spacing-4xs) var(--spacing-4xs);
+	border: var(--border-width-base) var(--border-style-base) transparent;
+
+	&.dragging:hover {
+		border: var(--border-width-base) var(--border-style-base) var(--color-secondary);
+		border-radius: var(--border-radius-base);
+		background-color: var(--color-callout-secondary-background);
+		* {
+			cursor: grabbing;
+			color: var(--color-text-base);
+		}
+	}
+
+	&:hover :global(.n8n-text) {
+		color: var(--color-text-dark);
+	}
+}
+
+.project-link :global(.n8n-text) {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4xs);
+}
+
+:global(.n8n-text).project-label {
+	@media (max-width: $breakpoint-sm) {
+		display: none;
+	}
+}
+</style>