feat(editor): Show avatars for users currently working on the same workflow (#7763)

This PR introduces the following changes:
- New Vue stores: `collaborationStore` and `pushConnectionStore`
- Front-end push connection handling overhaul: Keep only a singe
connection open and handle it from the new store
- Add user avatars in the editor header when there are multiple users
working on the same workflow
- Sending a heartbeat event to back-end service periodically to confirm
user is still active

- Back-end overhauls (authored by @tomi):
  - Implementing a cleanup procedure that removes inactive users
  - Refactoring collaboration service current implementation

---------

Co-authored-by: Tomi Turtiainen <10324676+tomi@users.noreply.github.com>

packages/editor-ui/src/components/MainHeader/CollaborationPane.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useUsersStore } from '@/stores/users.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { useCollaborationStore } from '@/stores/collaboration.store';
+import { onBeforeUnmount } from 'vue';
+import { onMounted } from 'vue';
+import { computed, ref } from 'vue';
+import { TIME } from '@/constants';
+
+const collaborationStore = useCollaborationStore();
+const usersStore = useUsersStore();
+const workflowsStore = useWorkflowsStore();
+
+const HEARTBEAT_INTERVAL = 5 * TIME.MINUTE;
+const heartbeatTimer = ref<number | null>(null);
+
+const activeUsersSorted = computed(() => {
+	const currentWorkflowUsers = (collaborationStore.getUsersForCurrentWorkflow ?? []).map(
+		(userInfo) => userInfo.user,
+	);
+	const owner = currentWorkflowUsers.find((user) => user.globalRoleId === 1);
+	return {
+		defaultGroup: owner
+			? [owner, ...currentWorkflowUsers.filter((user) => user.id !== owner.id)]
+			: currentWorkflowUsers,
+	};
+});
+
+const currentUserEmail = computed(() => {
+	return usersStore.currentUser?.email;
+});
+
+const startHeartbeat = () => {
+	if (heartbeatTimer.value !== null) {
+		clearInterval(heartbeatTimer.value);
+		heartbeatTimer.value = null;
+	}
+	heartbeatTimer.value = window.setInterval(() => {
+		collaborationStore.notifyWorkflowOpened(workflowsStore.workflow.id);
+	}, HEARTBEAT_INTERVAL);
+};
+
+const stopHeartbeat = () => {
+	if (heartbeatTimer.value !== null) {
+		clearInterval(heartbeatTimer.value);
+	}
+};
+
+const onDocumentVisibilityChange = () => {
+	if (document.visibilityState === 'hidden') {
+		stopHeartbeat();
+	} else {
+		startHeartbeat();
+	}
+};
+
+onMounted(() => {
+	startHeartbeat();
+	document.addEventListener('visibilitychange', onDocumentVisibilityChange);
+});
+
+onBeforeUnmount(() => {
+	document.removeEventListener('visibilitychange', onDocumentVisibilityChange);
+	stopHeartbeat();
+});
+</script>
+
+<template>
+	<div
+		:class="`collaboration-pane-container ${$style.container}`"
+		data-test-id="collaboration-pane"
+	>
+		<n8n-user-stack :users="activeUsersSorted" :currentUserEmail="currentUserEmail" />
+	</div>
+</template>
+
+<style lang="scss" module>
+.container {
+	margin: 0 var(--spacing-4xs);
+}
+</style>