feat: Github star button in-app

cypress/e2e/19-execution.cy.ts

@@ -514,6 +514,7 @@ describe('Execution', () => {
 	});
 
 	it('should send proper payload for node rerun', () => {
+		cy.viewport(1920, 1080);
 		cy.createFixtureWorkflow('Multiple_trigger_node_rerun.json', 'Multiple trigger node rerun');
 
 		workflowPage.getters.zoomToFitButton().click();

cypress/e2e/20-workflow-executions.cy.ts

@@ -101,6 +101,7 @@ describe('Workflow Executions', () => {
 		});
 
 		it('should show workflow data in executions tab after hard reload and modify name and tags', () => {
+			cy.viewport(1920, 1080);
 			executionsTab.actions.switchToExecutionsTab();
 			checkMainHeaderELements();
 			workflowPage.getters.saveButton().find('button').should('not.exist');

cypress/e2e/45-ai-assistant.cy.ts

@@ -36,6 +36,7 @@ describe('AI Assistant::enabled', () => {
 	});
 
 	it('renders placeholder UI', () => {
+		cy.viewport(1920, 1080);
 		aiAssistant.getters.askAssistantFloatingButton().should('be.visible');
 		aiAssistant.getters.askAssistantFloatingButton().click();
 		aiAssistant.getters.askAssistantChat().should('be.visible');

cypress/e2e/5-ndv.cy.ts

@@ -66,6 +66,7 @@ describe('NDV', () => {
 	});
 
 	it('should disconect Switch outputs if rules order was changed', () => {
+		cy.viewport(1920, 1080);
 		cy.createFixtureWorkflow('NDV-test-switch_reorder.json', 'NDV test switch reorder');
 		workflowPage.actions.zoomToFit();
 
@@ -232,6 +233,7 @@ describe('NDV', () => {
 			ndv.getters.outputPanel().find('[class*=_pagination]').should('exist');
 		});
 		it('should display large schema', () => {
+			cy.viewport(1920, 1080);
 			cy.createFixtureWorkflow(
 				'Test_workflow_schema_test_pinned_data.json',
 				'NDV test schema view 2',
@@ -718,6 +720,7 @@ describe('NDV', () => {
 	});
 
 	it('Should open appropriate node creator after clicking on connection hint link', () => {
+		cy.viewport(1920, 1080);
 		const nodeCreator = new NodeCreator();
 		const hintMapper = {
 			Memory: 'AI Nodes',

packages/editor-ui/package.json

@@ -74,6 +74,7 @@
     "vue": "catalog:frontend",
     "vue-agile": "^2.0.0",
     "vue-chartjs": "^5.2.0",
+    "vue-github-button": "^3.1.3",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "2.2.4",
     "vue-markdown-render": "catalog:frontend",

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

@@ -18,6 +18,8 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { usePushConnection } from '@/composables/usePushConnection';
 
+import GithubButton from 'vue-github-button';
+
 const router = useRouter();
 const route = useRoute();
 const locale = useI18n();
@@ -161,7 +163,7 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
 </script>
 
 <template>
-	<div>
+	<div class="container">
 		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
 			<div v-show="!hideMenuBar" class="top-menu">
 				<WorkflowDetails
@@ -182,10 +184,27 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
 				/>
 			</div>
 		</div>
+		<div class="github-button">
+			<GithubButton
+				href="https://github.com/n8n-io/n8n"
+				:data-color-scheme="uiStore.appliedTheme"
+				data-size="large"
+				data-show-count="true"
+				aria-label="Star n8n-io/n8n on GitHub"
+				>Star</GithubButton
+			>
+		</div>
 	</div>
 </template>
 
 <style lang="scss">
+.container {
+	display: flex;
+	position: relative;
+	width: 100%;
+	align-items: center;
+}
+
 .main-header {
 	background-color: var(--color-background-xlight);
 	height: $header-height;
@@ -201,6 +220,18 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
 	font-size: 0.9em;
 	height: $header-height;
 	font-weight: 400;
-	padding: 0 var(--spacing-m) 0 var(--spacing-xs);
+	padding: 0 var(--spacing-m) 0 var(--spacing-m);
+}
+
+.github-button {
+	display: flex;
+	position: relative;
+	align-items: center;
+	height: $header-height;
+	padding-left: var(--spacing-m);
+	padding-right: var(--spacing-m);
+	background-color: var(--color-background-xlight);
+	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
+	border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 }
 </style>