feat(editor): Main navigation redesign (#4144)

* refactor(editor): N8N-4540 Main navigation layout rework (#4060)

* ✨ Implemented new editor layout using css grid

* ✨ Reworking main navigation layout, migrating some styling to css modules

* ✨ Reworking main sidebar layout and responsiveness

* 💄 Minor type update

* ✨ Updated editor grid layout so empty cells are collapsed (`fit-content`), fixed updates menu items styling

* ✨ Implemented new user area look & feel in main sidebar

* 💄 Adjusting sidebar bottom padding when user area is not shown

* 💄 CSS cleanup/refactor + minor vue refactoring

* ✨ Fixing overscoll issue in chrome and scrolling behaviour of the content view

* 👌 Addressing review feedback

* ✨ Added collapsed and expanded versions of n8n logo

* ✨ Updating infinite scrolling in templates view to work with the new layout

* 💄 Updating main sidebar expanded width and templates view left margin

* 💄 Updating main content height

* 💄 Adding global styles for scrollable views with centered content, minor updates to user area

* ✨ Updating zoomToFit logic, lasso select box position and new nodes positioning

* ✨ Fixing new node drop position now that mouse detection has been adjusted

* 👌 Updating templates view scroll to top logic and responsive padding, aligning menu items titles

* 💄 Moving template layout style from global css class to component level

* ✨ Moved 'Workflows'  menu to node view header. Added new dropdown component for user area and the new WF menu

* 💄 Updating disabled states in new WF menu

* 💄 Initial stab at new sidebar styling

* ✨ Finished main navigation restyling

* ✨ Updating `zoomToFit` and centering logic

* ✨ Adding updates menu item to settings sidebar

* 💄 Adding updates item to the settings sidebar and final touches on main sidebar style

* 💄 Removing old code & refactoring

* 💄 Minor CSS tweaks

* 💄 Opening credentials modal on sidebar menu item click. Minor CSS updates

* 💄 Updating sidebar expand/collapse animation

* 💄 Few more refinements of sidebar animation

* 👌 Addressing code review comments

* ✨ Moved ActionDropdown component to design system

* 👌 Fixing bugs reported during code review and testing

* 👌 Addressing design review comments for the new sidebar

* ✔️ Updating `N8nActionDropdown` component tests

* ✨ Remembering scroll position when going back to templates list

* ✨ Updating zoomToFit logic to account for footer content

* 👌 Addressing latest sidebar review comments

* 👌 Addressing main sidebar product review comments

* 💄 Updating css variable names after vite merge

* ✔️ Fixing linting errors in the design system

* ✔️ Fixing `element-ui` type import

* 👌 Addressing the code review comments.

* ✨ Adding link to new credentials view, removed old modal

* 💄 Updating credentials view responsiveness and route highlight handling

* 💄 Adding highlight to workflows submenu when on new workflow page

* 💄 Updated active submenu text color

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

@@ -20,6 +20,11 @@
 	"generic.beta": "beta",
 	"generic.yes": "Yes",
 	"generic.no": "No",
+	"generic.settings": "Settings",
+	"generic.unsavedWork.confirmMessage.headline": "Save changes before leaving?",
+	"generic.unsavedWork.confirmMessage.message": "If you don't save, you will lose your changes.",
+	"generic.unsavedWork.confirmMessage.confirmButtonText": "Save",
+	"generic.unsavedWork.confirmMessage.cancelButtonText": "Leave without saving",
 	"about.aboutN8n": "About n8n",
 	"about.close": "Close",
 	"about.license": "License",
@@ -344,22 +349,13 @@
 	"mainSidebar.confirmMessage.workflowDelete.confirmButtonText": "Yes, delete",
 	"mainSidebar.confirmMessage.workflowDelete.headline": "Delete Workflow?",
 	"mainSidebar.confirmMessage.workflowDelete.message": "Are you sure that you want to delete '{workflowName}'?",
-	"mainSidebar.confirmMessage.workflowNew.cancelButtonText": "Leave without saving",
-	"mainSidebar.confirmMessage.workflowNew.confirmButtonText": "Save",
-	"mainSidebar.confirmMessage.workflowNew.headline": "Save changes before leaving?",
-	"mainSidebar.confirmMessage.workflowNew.message": "If you don't save, you will lose your changes.",
 	"mainSidebar.credentials": "Credentials",
-	"mainSidebar.delete": "Delete",
-	"mainSidebar.download": "Download",
-	"mainSidebar.duplicate": "Duplicate",
 	"mainSidebar.executions": "Executions",
 	"mainSidebar.help": "Help",
 	"mainSidebar.helpMenuItems.course": "Course",
 	"mainSidebar.helpMenuItems.documentation": "Documentation",
 	"mainSidebar.helpMenuItems.forum": "Forum",
 	"mainSidebar.helpMenuItems.quickstart": "Quickstart",
-	"mainSidebar.importFromFile": "Import from File",
-	"mainSidebar.importFromUrl": "Import from URL",
 	"mainSidebar.new": "New",
 	"mainSidebar.newTemplate": "New from template",
 	"mainSidebar.open": "Open",
@@ -369,7 +365,6 @@
 	"mainSidebar.prompt.invalidUrl": "Invalid URL",
 	"mainSidebar.prompt.workflowUrl": "Workflow URL",
 	"mainSidebar.save": "@:_reusableBaseText.save",
-	"mainSidebar.settings": "Settings",
 	"mainSidebar.showError.stopExecution.title": "Problem stopping execution",
 	"mainSidebar.showMessage.handleFileImport.message": "The file does not contain valid JSON data",
 	"mainSidebar.showMessage.handleFileImport.title": "Could not import file",
@@ -379,6 +374,11 @@
 	"mainSidebar.showMessage.stopExecution.title": "Execution stopped",
 	"mainSidebar.templates": "Templates",
 	"mainSidebar.workflows": "Workflows",
+	"menuActions.duplicate": "Duplicate",
+	"menuActions.download": "Download",
+	"menuActions.importFromUrl": "Import from URL...",
+	"menuActions.importFromFile": "Import from File...",
+	"menuActions.delete": "Delete",
 	"multipleParameter.addItem": "Add item",
 	"multipleParameter.currentlyNoItemsExist": "Currently no items exist",
 	"multipleParameter.deleteItem": "Delete item",
@@ -560,14 +560,6 @@
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
-	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
-	"nodeView.confirmMessage.beforeRouteLeave.confirmButtonText": "Save",
-	"nodeView.confirmMessage.beforeRouteLeave.headline": "Save changes before leaving?",
-	"nodeView.confirmMessage.beforeRouteLeave.message": "If you don't save, you will lose your changes.",
-	"nodeView.confirmMessage.initView.cancelButtonText": "Leave without saving",
-	"nodeView.confirmMessage.initView.confirmButtonText": "Save",
-	"nodeView.confirmMessage.initView.headline": "Save changes before leaving?",
-	"nodeView.confirmMessage.initView.message": "If you don't save, you will lose your changes.",
 	"nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText": "",
 	"nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText": "Yes, import",
 	"nodeView.confirmMessage.receivedCopyPasteData.headline": "Import Workflow?",
@@ -1058,10 +1050,6 @@
 	"workflowDetails.showMessage.title": "Name missing",
 	"workflowHelpers.showMessage.title": "Problem saving workflow",
 	"workflowOpen.active": "Active",
-	"workflowOpen.confirmMessage.cancelButtonText": "Leave without saving",
-	"workflowOpen.confirmMessage.confirmButtonText": "Save",
-	"workflowOpen.confirmMessage.headline": "Save changes before leaving?",
-	"workflowOpen.confirmMessage.message": "If you don't save, you will lose your changes.",
 	"workflowOpen.couldNotLoadActiveWorkflows": "Could not load active workflows",
 	"workflowOpen.created": "Created",
 	"workflowOpen.filterWorkflows": "Filter by tags",
@@ -1072,6 +1060,8 @@
 	"workflowOpen.showMessage.message": "This is the current workflow",
 	"workflowOpen.showMessage.title": "Workflow already open",
 	"workflowOpen.updated": "Updated",
+	"workflowOpen.newWFButton.label": "Add workflow",
+	"workflowOpen.newWFButton.title": "Create a new workflow",
 	"workflowPreview.showError.arrayEmpty": "Must have an array of nodes",
 	"workflowPreview.showError.missingWorkflow": "Missing workflow",
 	"workflowPreview.showError.previewError.message": "Unable to preview workflow",
@@ -1113,7 +1103,7 @@
 	"workflowSettings.saveManualOptions.yes": "Yes",
 	"workflowSettings.seconds": "seconds",
 	"workflowSettings.selectOption": "Select Option",
-	"workflowSettings.settingsFor": "Settings for {workflowName} (#{workflowId})",
+	"workflowSettings.settingsFor": "Workflow settings for {workflowName} (#{workflowId})",
 	"workflowSettings.showError.saveSettings1.errorMessage": "Timeout is activated but set to 0",
 	"workflowSettings.showError.saveSettings1.message": "There was a problem saving the settings",
 	"workflowSettings.showError.saveSettings1.title": "Problem saving settings",