n8n-editor-ui 1.72.1 → 1.73.0

package/dist/assets/Logo-DkVmhuQi.js

@@ -0,0 +1,121 @@
+import { c as openBlock, h as createElementBlock, j as createBaseVNode, d as defineComponent, q as computed, he as useTemplateRef, o as onMounted, hf as useFavicon, i as createVNode, n as normalizeClass, l as unref, e as createBlock, f as createCommentVNode, t as toDisplayString, aa as useCssModule, _ as _export_sfc } from "./index-DYxqsGB9.js";
+const _hoisted_1$1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "30",
+  height: "30"
+};
+function render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+    createBaseVNode("path", {
+      fill: "#EA4B71",
+      "fill-rule": "evenodd",
+      d: "M27.2 16.4a3.2 3.2 0 0 1-3.1-2.4h-3.667a1.6 1.6 0 0 0-1.578 1.337l-.132.79A3.2 3.2 0 0 1 17.683 18a3.2 3.2 0 0 1 1.04 1.874l.132.789A1.6 1.6 0 0 0 20.433 22h.468a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-6.3.8h-.467a3.2 3.2 0 0 1-3.156-2.674l-.132-.789a1.6 1.6 0 0 0-1.578-1.337h-1.268a3.201 3.201 0 0 1-6.198 0H6.299A3.201 3.201 0 0 1 0 18a3.2 3.2 0 0 1 6.3-.8h1.8a3.201 3.201 0 0 1 6.2 0h1.267a1.6 1.6 0 0 0 1.578-1.337l.132-.79a3.2 3.2 0 0 1 3.156-2.673h3.668a3.201 3.201 0 0 1 6.299.8 3.2 3.2 0 0 1-3.2 3.2m0-1.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m-24 4.8a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2m9.6-1.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0m12.8 4.8a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 0 1 3.2 0",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ]));
+}
+const LogoIcon = { render: render$1 };
+const _hoisted_1 = {
+  width: "26",
+  height: "30"
+};
+function render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    createBaseVNode("g", { fill: "#101330" }, [
+      createBaseVNode("path", {
+        "fill-rule": "evenodd",
+        d: "M15.002 16.918v-.076c.558-.28 1.116-.762 1.116-1.716 0-1.372-1.13-2.198-2.69-2.198-1.598 0-2.74.877-2.74 2.224 0 .915.533 1.41 1.116 1.69v.076a2.16 2.16 0 0 0-1.42 2.059c0 1.385 1.141 2.351 3.032 2.351 1.89 0 2.994-.966 2.994-2.351a2.16 2.16 0 0 0-1.408-2.059m-1.587-2.82c.635 0 1.104.406 1.104 1.092s-.482 1.093-1.103 1.093c-.622 0-1.142-.407-1.142-1.093 0-.699.495-1.093 1.142-1.093m0 6.01c-.735 0-1.332-.47-1.332-1.27 0-.725.495-1.272 1.32-1.272.812 0 1.307.534 1.307 1.297 0 .775-.571 1.245-1.294 1.245",
+        "clip-rule": "evenodd"
+      }),
+      createBaseVNode("path", { d: "M18.367 21.2h1.624v-3.442c0-1.131.685-1.627 1.46-1.627.76 0 1.357.509 1.357 1.55v3.52h1.624V17.35c0-1.664-.964-2.63-2.474-2.63-.952 0-1.485.381-1.865.877h-.102l-.14-.75h-1.484zm-14.376 0H2.367v-6.352h1.485l.14.75h.1c.381-.496.914-.877 1.866-.877 1.51 0 2.474.966 2.474 2.63v3.85H6.808V17.68c0-1.041-.596-1.55-1.358-1.55-.774 0-1.459.496-1.459 1.627z" })
+    ], -1)
+  ]));
+}
+const LogoText = { render };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Logo",
+  props: {
+    location: {},
+    collapsed: { type: Boolean },
+    releaseChannel: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { location, releaseChannel } = props;
+    const showReleaseChannelTag = computed(() => {
+      if (releaseChannel === "stable") return false;
+      if (location === "authView") return true;
+      return !props.collapsed;
+    });
+    const showLogoText = computed(() => {
+      if (location === "authView") return true;
+      return !props.collapsed;
+    });
+    const $style = useCssModule();
+    const containerClasses = computed(() => {
+      if (location === "authView") {
+        return [$style.logoContainer, $style.authView];
+      }
+      return [
+        $style.logoContainer,
+        $style.sidebar,
+        props.collapsed ? $style.sidebarCollapsed : $style.sidebarExpanded
+      ];
+    });
+    const svg = useTemplateRef("logo");
+    onMounted(() => {
+      if (releaseChannel === "stable" || !("createObjectURL" in URL)) return;
+      const logoEl = svg.value.$el;
+      const logoColor = releaseChannel === "dev" ? "#838383" : "#E9984B";
+      logoEl.querySelector("path")?.setAttribute("fill", logoColor);
+      const blob = new Blob([logoEl.outerHTML], { type: "image/svg+xml" });
+      useFavicon(URL.createObjectURL(blob));
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(containerClasses.value),
+        "data-test-id": "n8n-logo"
+      }, [
+        createVNode(unref(LogoIcon), {
+          class: normalizeClass(unref($style).logo),
+          ref: "logo"
+        }, null, 8, ["class"]),
+        showLogoText.value ? (openBlock(), createBlock(unref(LogoText), {
+          key: 0,
+          class: normalizeClass(unref($style).logoText)
+        }, null, 8, ["class"])) : createCommentVNode("", true),
+        showReleaseChannelTag.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          size: "small",
+          round: "",
+          class: normalizeClass(unref($style).releaseChannelTag)
+        }, toDisplayString(unref(releaseChannel)), 3)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const logoContainer = "_logoContainer_r87yw_1";
+const logoText = "_logoText_r87yw_6";
+const releaseChannelTag = "_releaseChannelTag_r87yw_13";
+const authView = "_authView_r87yw_27";
+const sidebar = "_sidebar_r87yw_32";
+const sidebarExpanded = "_sidebarExpanded_r87yw_36";
+const logo = "_logo_r87yw_1";
+const sidebarCollapsed = "_sidebarCollapsed_r87yw_40";
+const style0 = {
+  logoContainer,
+  logoText,
+  releaseChannelTag,
+  authView,
+  sidebar,
+  sidebarExpanded,
+  logo,
+  sidebarCollapsed
+};
+const cssModules = {
+  "$style": style0
+};
+const Logo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  Logo as L
+};

package/dist/assets/{MainHeader-Bg4Jr0GW.css → MainHeader-B1mQLyCP.css}

@@ -77,17 +77,17 @@ input[disabled][data-v-87c6f53b] {
   opacity: 0.5;
 }._container_iuui0_1 {
   margin: 0 var(--spacing-4xs);
-}.name-container[data-v-7066a25f] {
+}.name-container[data-v-8134859e] {
   margin-right: 20px;
 }
-.name-container[data-v-7066a25f] .el-input {
+.name-container[data-v-8134859e] .el-input {
   padding: 0;
 }
-.name[data-v-7066a25f] {
+.name[data-v-8134859e] {
   color: var(--color-text-dark);
   font-size: 15px;
 }
-.activator[data-v-7066a25f] {
+.activator[data-v-8134859e] {
   color: var(--color-text-dark);
   font-weight: 400;
   font-size: 13px;
@@ -95,32 +95,32 @@ input[disabled][data-v-87c6f53b] {
   display: flex;
   align-items: center;
 }
-.activator > span[data-v-7066a25f] {
+.activator > span[data-v-8134859e] {
   margin-right: 5px;
 }
-.add-tag[data-v-7066a25f] {
+.add-tag[data-v-8134859e] {
   font-size: 12px;
   padding: 20px 0;
   color: var(--color-text-light);
   font-weight: 600;
   white-space: nowrap;
 }
-.add-tag[data-v-7066a25f]:hover {
+.add-tag[data-v-8134859e]:hover {
   color: var(--color-primary);
 }
-.tags[data-v-7066a25f] {
+.tags[data-v-8134859e] {
   display: flex;
   align-items: center;
   width: 100%;
   flex: 1;
   margin-right: 20px;
 }
-.tags-edit[data-v-7066a25f] {
+.tags-edit[data-v-8134859e] {
   min-width: 100px;
   width: 100%;
   max-width: 460px;
 }
-.actions[data-v-7066a25f] {
+.actions[data-v-8134859e] {
   display: flex;
   align-items: center;
   gap: var(--spacing-m);

package/dist/assets/{MainHeader-CZBWRbIF.js → MainHeader-DzT-lrog.js}

@@ -1,11 +1,11 @@
-import { d as defineComponent, q as computed, c as openBlock, h as createElementBlock, s as renderSlot, v as shorten, r as ref, x as onBeforeUnmount, o as onMounted, y as nextTick, z as debounce, e as createBlock, w as withCtx, j as createBaseVNode, A as renderList, n as normalizeClass, k as createTextVNode, t as toDisplayString, l as unref, i as createVNode, F as Fragment, B as normalizeStyle, C as createEventBus, m as resolveComponent, _ as _export_sfc, D as useTagsStore, E as onClickOutside, G as withKeys, H as watch, I as withModifiers, J as useDebounce, K as useUIStore, L as getBannerRowHeight, N as BREAKPOINT_SM, O as BREAKPOINT_XL, P as BREAKPOINT_LG, Q as BREAKPOINT_MD, g as useI18n, V as VIEWS, R as defineStore, S as STORES, T as useWorkflowsStore, u as useUsersStore, U as useRoute, W as TIME, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, Y as useDocumentVisibility, f as createCommentVNode, Z as useRootStore, $ as useCanvasStore, p as useSettingsStore, a0 as useSourceControlStore, a1 as useProjectsStore, a2 as useNpsSurveyStore, b as useRouter, a as useToast, a3 as useDocumentTitle, a4 as useWorkflowHelpers, a5 as usePageRedirectionHelper, a6 as MAX_WORKFLOW_NAME_LENGTH, a7 as _sfc_main$f, a8 as EnterpriseEditionFeature, a9 as SaveButton, aa as useCssModule, ab as WORKFLOW_SHARE_MODAL_KEY, ac as nodeViewEventBus, ad as WORKFLOW_MENU_ACTIONS, ae as MODAL_CONFIRM, af as MODAL_CLOSE, ag as WORKFLOW_SETTINGS_MODAL_KEY, ah as SOURCE_CONTROL_PUSH_MODAL_KEY, ai as VALID_WORKFLOW_IMPORT_URL_REGEX, aj as DUPLICATE_MODAL_KEY, ak as useTelemetry, al as useMessage, am as getResourcePermissions, an as hasPermission, ao as MAIN_HEADER_TABS, ap as hyphenate, aq as h, ar as hasOwn, as as __vitePreload, at as useNDVStore, au as useExecutionsStore, av as usePostHog, aw as useLocalStorage, ax as onBeforeMount, ay as withDirectives, az as vShow, aA as LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON, aB as WORKFLOW_EVALUATION_EXPERIMENT, aC as STICKY_NODE_TYPE } from "./index-fCEqBD8K.js";
-import { _ as _sfc_main$g } from "./PushConnectionTracker.vue_vue_type_script_setup_true_lang-ouQuoTYp.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-BbpMhG1U.js";
-import { u as useBeforeUnload, a as useNodeViewVersionSwitcher } from "./useNodeViewVersionSwitcher-Eg-dOWbq.js";
-import { u as usePushConnectionStore } from "./pushConnection.store-Kmly9nV5.js";
-import { F as FileSaver_minExports } from "./FileSaver.min-BiLlhrlQ.js";
-import { u as usePushConnection } from "./usePushConnection-D-iAKJiL.js";
-import "./useWorkflowActivate-D8cU5eJ_.js";
+import { d as defineComponent, q as computed, c as openBlock, h as createElementBlock, s as renderSlot, v as shorten, r as ref, x as onBeforeUnmount, o as onMounted, y as nextTick, z as debounce, e as createBlock, w as withCtx, j as createBaseVNode, A as renderList, F as Fragment, B as normalizeStyle, l as unref, C as createEventBus, m as resolveComponent, n as normalizeClass, k as createTextVNode, t as toDisplayString, i as createVNode, _ as _export_sfc, D as useTagsStore, E as onClickOutside, G as withKeys, H as watch, I as withModifiers, J as useDebounce, K as useUIStore, L as getBannerRowHeight, N as BREAKPOINT_SM, O as BREAKPOINT_XL, P as BREAKPOINT_LG, Q as BREAKPOINT_MD, g as useI18n, V as VIEWS, R as defineStore, S as STORES, T as useWorkflowsStore, u as useUsersStore, U as useRoute, W as TIME, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, Y as useDocumentVisibility, f as createCommentVNode, Z as useRootStore, $ as useCanvasStore, p as useSettingsStore, a0 as useSourceControlStore, a1 as useProjectsStore, a2 as useNpsSurveyStore, b as useRouter, a as useToast, a3 as useDocumentTitle, a4 as useWorkflowHelpers, a5 as usePageRedirectionHelper, a6 as MAX_WORKFLOW_NAME_LENGTH, a7 as _sfc_main$f, a8 as EnterpriseEditionFeature, a9 as SaveButton, aa as useCssModule, ab as WORKFLOW_SHARE_MODAL_KEY, ac as nodeViewEventBus, ad as WORKFLOW_MENU_ACTIONS, ae as MODAL_CONFIRM, af as MODAL_CLOSE, ag as WORKFLOW_SETTINGS_MODAL_KEY, ah as SOURCE_CONTROL_PUSH_MODAL_KEY, ai as VALID_WORKFLOW_IMPORT_URL_REGEX, aj as DUPLICATE_MODAL_KEY, ak as useTelemetry, al as useMessage, am as getResourcePermissions, an as hasPermission, ao as MAIN_HEADER_TABS, ap as hyphenate, aq as h, ar as hasOwn, as as __vitePreload, at as useNDVStore, au as useExecutionsStore, av as usePostHog, aw as useLocalStorage, ax as onBeforeMount, ay as withDirectives, az as vShow, aA as LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON, aB as WORKFLOW_EVALUATION_EXPERIMENT, aC as STICKY_NODE_TYPE } from "./index-DYxqsGB9.js";
+import { _ as _sfc_main$g } from "./PushConnectionTracker.vue_vue_type_script_setup_true_lang-a7Fc7Xy7.js";
+import { W as WorkflowActivator } from "./WorkflowActivator-BbwFaJ9a.js";
+import { u as useBeforeUnload, a as useNodeViewVersionSwitcher } from "./useNodeViewVersionSwitcher-tFqgPPim.js";
+import { u as usePushConnectionStore } from "./pushConnection.store-BVUirLTG.js";
+import { F as FileSaver_minExports } from "./FileSaver.min-gIFS8BdZ.js";
+import { u as usePushConnection } from "./usePushConnection-FexDCcd7.js";
+import "./useWorkflowActivate-CIqICdFm.js";
 const _hoisted_1$8 = ["title", "data-test-id"];
 const DEFAULT_WORKFLOW_NAME_LIMIT = 25;
 const WORKFLOW_NAME_END_COUNT_TO_KEEP = 4;
@@ -1259,7 +1259,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (!id || ["new", PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(id)) {
         let toastTitle = locale.baseText("workflows.create.personal.toast.title");
         let toastText = locale.baseText("workflows.create.personal.toast.text");
-        if (projectsStore.currentProject) {
+        if (projectsStore.currentProject && projectsStore.currentProject.id !== projectsStore.personalProject?.id) {
           toastTitle = locale.baseText("workflows.create.project.toast.title", {
             interpolate: { projectName: projectsStore.currentProject.name ?? "" }
           });
@@ -1498,7 +1498,7 @@ const style1 = {
 const cssModules$1 = {
   "$style": style1
 };
-const WorkflowDetails = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$1], ["__scopeId", "data-v-7066a25f"]]);
+const WorkflowDetails = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$1], ["__scopeId", "data-v-8134859e"]]);
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TabBar",
   props: {

package/dist/assets/{MainSidebar-Cm-l0HUG.js → MainSidebar-5Pl77alo.js}

@@ -1,6 +1,6 @@
-import { d as defineComponent, aD as useLoadingService, K as useUIStore, a0 as useSourceControlStore, a as useToast, r as ref, q as computed, c as openBlock, h as createElementBlock, l as unref, n as normalizeClass, j as createBaseVNode, i as createVNode, k as createTextVNode, t as toDisplayString, w as withCtx, e as createBlock, f as createCommentVNode, B as normalizeStyle, g as useI18n, an as hasPermission, ah as SOURCE_CONTROL_PUSH_MODAL_KEY, y as nextTick, aE as sourceControlEventBus, aF as SOURCE_CONTROL_PULL_MODAL_KEY, m as resolveComponent, C as createEventBus, _ as _export_sfc, aG as get, R as defineStore, S as STORES, aH as useCloudPlanStore, Z as useRootStore, aI as useStorage, aJ as DateTime, ak as useTelemetry, a1 as useProjectsStore, F as Fragment, A as renderList, V as VIEWS, aK as sortByProperty, p as useSettingsStore, aL as useTemplatesStore, u as useUsersStore, aM as useVersionsStore, T as useWorkflowsStore, J as useDebounce, U as useRoute, b as useRouter, a5 as usePageRedirectionHelper, o as onMounted, x as onBeforeUnmount, E as onClickOutside, aN as N8nNavigationDropdown, aO as createSlots, aP as useExternalHooks, aQ as VERSIONS_MODAL_KEY, aR as ABOUT_MODAL_KEY } from "./index-fCEqBD8K.js";
-import { u as useBugReporting } from "./useBugReporting-CbgIVUCL.js";
-import { u as useGlobalEntityCreation } from "./useGlobalEntityCreation-DGVSN-Im.js";
+import { d as defineComponent, aD as useLoadingService, K as useUIStore, a0 as useSourceControlStore, a as useToast, r as ref, q as computed, c as openBlock, h as createElementBlock, l as unref, n as normalizeClass, j as createBaseVNode, i as createVNode, k as createTextVNode, t as toDisplayString, w as withCtx, e as createBlock, f as createCommentVNode, B as normalizeStyle, g as useI18n, an as hasPermission, ah as SOURCE_CONTROL_PUSH_MODAL_KEY, y as nextTick, aE as sourceControlEventBus, aF as SOURCE_CONTROL_PULL_MODAL_KEY, m as resolveComponent, C as createEventBus, _ as _export_sfc, aG as get, R as defineStore, S as STORES, aH as useCloudPlanStore, Z as useRootStore, aI as useStorage, aJ as DateTime, ak as useTelemetry, p as useSettingsStore, a1 as useProjectsStore, b as useRouter, aK as sortByProperty, V as VIEWS, a5 as usePageRedirectionHelper, am as getResourcePermissions, F as Fragment, A as renderList, aL as useTemplatesStore, u as useUsersStore, aM as useVersionsStore, T as useWorkflowsStore, J as useDebounce, U as useRoute, o as onMounted, x as onBeforeUnmount, E as onClickOutside, aN as N8nNavigationDropdown, aO as createSlots, aP as useExternalHooks, aQ as VERSIONS_MODAL_KEY, aR as ABOUT_MODAL_KEY } from "./index-DYxqsGB9.js";
+import { u as useBugReporting } from "./useBugReporting-C3NtP4ZZ.js";
+import { L as Logo } from "./Logo-DkVmhuQi.js";
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "MainSidebarSourceControl",
   props: {
@@ -28,6 +28,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       loadingService.setLoadingText(i18n.baseText("settings.sourceControl.loading.checkingForChanges"));
       try {
         const status = await sourceControlStore.getAggregatedStatus();
+        if (!status.length) {
+          toast.showMessage({
+            title: "No changes to commit",
+            message: "Everything is up to date",
+            type: "info"
+          });
+          return;
+        }
         uiStore.openModalWithData({
           name: SOURCE_CONTROL_PUSH_MODAL_KEY,
           data: { eventBus, status }
@@ -335,12 +343,199 @@ const cssModules$2 = {
   "$style": style0$2
 };
 const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+const useGlobalEntityCreation = () => {
+  const CREATE_PROJECT_ID = "create-project";
+  const settingsStore = useSettingsStore();
+  const cloudPlanStore = useCloudPlanStore();
+  const projectsStore = useProjectsStore();
+  const sourceControlStore = useSourceControlStore();
+  const router = useRouter();
+  const i18n = useI18n();
+  const toast = useToast();
+  const isCreatingProject = ref(false);
+  const displayProjects = computed(
+    () => sortByProperty(
+      "name",
+      projectsStore.myProjects.filter((p) => p.type === "team")
+    )
+  );
+  const disabledWorkflow = (scopes = []) => sourceControlStore.preferences.branchReadOnly || !getResourcePermissions(scopes).workflow.create;
+  const disabledCredential = (scopes = []) => sourceControlStore.preferences.branchReadOnly || !getResourcePermissions(scopes).credential.create;
+  const menu = computed(() => {
+    if (!projectsStore.isTeamProjectFeatureEnabled) {
+      return [
+        {
+          id: "workflow",
+          title: "Workflow",
+          route: {
+            name: VIEWS.NEW_WORKFLOW,
+            query: {
+              projectId: projectsStore.personalProject?.id
+            }
+          }
+        },
+        {
+          id: "credential",
+          title: "Credential",
+          route: {
+            name: VIEWS.CREDENTIALS,
+            params: {
+              projectId: projectsStore.personalProject?.id,
+              credentialId: "create"
+            }
+          }
+        },
+        {
+          id: CREATE_PROJECT_ID,
+          title: "Project",
+          disabled: true
+        }
+      ];
+    }
+    return [
+      {
+        id: "workflow",
+        title: "Workflow",
+        submenu: [
+          {
+            id: "workflow-title",
+            title: "Create in",
+            disabled: true
+          },
+          {
+            id: "workflow-personal",
+            title: i18n.baseText("projects.menu.personal"),
+            icon: "user",
+            disabled: disabledWorkflow(projectsStore.personalProject?.scopes),
+            route: {
+              name: VIEWS.NEW_WORKFLOW,
+              query: { projectId: projectsStore.personalProject?.id }
+            }
+          },
+          ...displayProjects.value.map((project) => ({
+            id: `workflow-${project.id}`,
+            title: project.name,
+            icon: "layer-group",
+            disabled: disabledWorkflow(project.scopes),
+            route: {
+              name: VIEWS.NEW_WORKFLOW,
+              query: { projectId: project.id }
+            }
+          }))
+        ]
+      },
+      {
+        id: "credential",
+        title: "Credential",
+        submenu: [
+          {
+            id: "credential-title",
+            title: "Create in",
+            disabled: true
+          },
+          {
+            id: "credential-personal",
+            title: i18n.baseText("projects.menu.personal"),
+            icon: "user",
+            disabled: disabledCredential(projectsStore.personalProject?.scopes),
+            route: {
+              name: VIEWS.PROJECTS_CREDENTIALS,
+              params: { projectId: projectsStore.personalProject?.id, credentialId: "create" }
+            }
+          },
+          ...displayProjects.value.map((project) => ({
+            id: `credential-${project.id}`,
+            title: project.name,
+            icon: "layer-group",
+            disabled: disabledCredential(project.scopes),
+            route: {
+              name: VIEWS.PROJECTS_CREDENTIALS,
+              params: { projectId: project.id, credentialId: "create" }
+            }
+          }))
+        ]
+      },
+      {
+        id: CREATE_PROJECT_ID,
+        title: "Project",
+        disabled: !projectsStore.canCreateProjects
+      }
+    ];
+  });
+  const createProject = async () => {
+    isCreatingProject.value = true;
+    try {
+      const newProject = await projectsStore.createProject({
+        name: i18n.baseText("projects.settings.newProjectName")
+      });
+      await router.push({ name: VIEWS.PROJECT_SETTINGS, params: { projectId: newProject.id } });
+      toast.showMessage({
+        title: i18n.baseText("projects.settings.save.successful.title", {
+          interpolate: { projectName: newProject.name }
+        }),
+        type: "success"
+      });
+    } catch (error) {
+      toast.showError(error, i18n.baseText("projects.error.title"));
+    } finally {
+      isCreatingProject.value = false;
+    }
+  };
+  const handleSelect = (id) => {
+    if (id !== CREATE_PROJECT_ID) return;
+    if (projectsStore.canCreateProjects) {
+      void createProject();
+      return;
+    }
+    void usePageRedirectionHelper().goToUpgrade("rbac", "upgrade-rbac");
+  };
+  const projectsLimitReachedMessage = computed(() => {
+    if (settingsStore.isCloudDeployment) {
+      return i18n.baseText("projects.create.limitReached.cloud", {
+        adjustToNumber: projectsStore.teamProjectsLimit,
+        interpolate: {
+          planName: cloudPlanStore.currentPlanData?.displayName ?? "",
+          limit: projectsStore.teamProjectsLimit
+        }
+      });
+    }
+    if (!projectsStore.isTeamProjectFeatureEnabled) {
+      return i18n.baseText("projects.create.limitReached.self");
+    }
+    return i18n.baseText("projects.create.limitReached", {
+      adjustToNumber: projectsStore.teamProjectsLimit,
+      interpolate: {
+        limit: projectsStore.teamProjectsLimit
+      }
+    });
+  });
+  const createProjectAppendSlotName = computed(() => `item.append.${CREATE_PROJECT_ID}`);
+  const upgradeLabel = computed(() => {
+    if (settingsStore.isCloudDeployment) {
+      return i18n.baseText("generic.upgrade");
+    }
+    if (!projectsStore.isTeamProjectFeatureEnabled) {
+      return i18n.baseText("generic.enterprise");
+    }
+    return i18n.baseText("generic.upgrade");
+  });
+  return {
+    menu,
+    handleSelect,
+    createProjectAppendSlotName,
+    projectsLimitReachedMessage,
+    upgradeLabel,
+    createProject,
+    isCreatingProject,
+    displayProjects
+  };
+};
 const _hoisted_1$1 = {
   key: 0,
   class: "mt-m mb-m"
 };
-const _hoisted_2$1 = {
-  key: 3,
+const _hoisted_2 = {
+  key: 4,
   class: "mb-m"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -353,6 +548,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const locale = useI18n();
     const projectsStore = useProjectsStore();
+    const globalEntityCreation = useGlobalEntityCreation();
+    const isCreatingProject = computed(() => globalEntityCreation.isCreatingProject.value);
+    const displayProjects = computed(() => globalEntityCreation.displayProjects.value);
     const home = computed(() => ({
       id: "home",
       label: locale.baseText("projects.menu.overview"),
@@ -383,15 +581,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       }
     }));
-    const displayProjects = computed(
-      () => sortByProperty(
-        "name",
-        projectsStore.myProjects.filter((p) => p.type === "team")
-      )
+    const showAddFirstProject = computed(
+      () => projectsStore.isTeamProjectFeatureEnabled && !displayProjects.value.length
     );
     return (_ctx, _cache) => {
       const _component_N8nMenuItem = resolveComponent("N8nMenuItem");
       const _component_ElMenu = resolveComponent("ElMenu");
+      const _component_N8nButton = resolveComponent("N8nButton");
       const _component_N8nText = resolveComponent("N8nText");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.projects)
@@ -414,12 +610,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         unref(projectsStore).isTeamProjectFeatureEnabled ? (openBlock(), createElementBlock("hr", _hoisted_1$1)) : createCommentVNode("", true),
         !props.collapsed && unref(projectsStore).isTeamProjectFeatureEnabled ? (openBlock(), createBlock(_component_N8nText, {
           key: 1,
-          class: normalizeClass(_ctx.$style.projectsLabel),
+          class: normalizeClass([_ctx.$style.projectsLabel]),
           tag: "h3",
           bold: ""
         }, {
           default: withCtx(() => [
-            createBaseVNode("span", null, toDisplayString(unref(locale).baseText("projects.menu.title")), 1)
+            createBaseVNode("span", null, toDisplayString(unref(locale).baseText("projects.menu.title")), 1),
+            unref(projectsStore).canCreateProjects ? (openBlock(), createBlock(_component_N8nButton, {
+              key: 0,
+              icon: "plus",
+              text: "",
+              "data-test-id": "project-plus-button",
+              disabled: isCreatingProject.value,
+              class: normalizeClass(_ctx.$style.plusBtn),
+              onClick: unref(globalEntityCreation).createProject
+            }, null, 8, ["disabled", "class", "onClick"])) : createCommentVNode("", true)
           ]),
           _: 1
         }, 8, ["class"])) : createCommentVNode("", true),
@@ -452,29 +657,51 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["collapse", "class"])) : createCommentVNode("", true),
-        unref(projectsStore).isTeamProjectFeatureEnabled ? (openBlock(), createElementBlock("hr", _hoisted_2$1)) : createCommentVNode("", true)
+        showAddFirstProject.value ? (openBlock(), createBlock(_component_N8nButton, {
+          key: 3,
+          class: normalizeClass([
+            _ctx.$style.addFirstProjectBtn,
+            {
+              [_ctx.$style.collapsed]: props.collapsed
+            }
+          ]),
+          disabled: isCreatingProject.value,
+          type: "tertiary",
+          icon: "plus",
+          "data-test-id": "add-first-project-button",
+          onClick: unref(globalEntityCreation).createProject
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(locale).baseText("projects.menu.addFirstProject")), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "disabled", "onClick"])) : createCommentVNode("", true),
+        unref(projectsStore).isTeamProjectFeatureEnabled ? (openBlock(), createElementBlock("hr", _hoisted_2)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const projects = "_projects_6p5d2_1";
-const projectItems = "_projectItems_6p5d2_9";
-const upgradeLink = "_upgradeLink_6p5d2_15";
-const collapsed = "_collapsed_6p5d2_20";
-const projectsLabel = "_projectsLabel_6p5d2_24";
+const projects = "_projects_1etb9_1";
+const plusBtn = "_plusBtn_1etb9_8";
+const projectItems = "_projectItems_1etb9_12";
+const upgradeLink = "_upgradeLink_1etb9_18";
+const collapsed = "_collapsed_1etb9_23";
+const projectsLabel = "_projectsLabel_1etb9_27";
+const addFirstProjectBtn = "_addFirstProjectBtn_1etb9_50";
 const style0$1 = {
   projects,
+  plusBtn,
   projectItems,
   upgradeLink,
   collapsed,
-  projectsLabel
+  projectsLabel,
+  addFirstProjectBtn
 };
 const cssModules$1 = {
   "$style": style0$1
 };
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-6cb5f5b7"]]);
-const _hoisted_1 = ["src"];
-const _hoisted_2 = {
+const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-6e17621d"]]);
+const _hoisted_1 = {
   class: "ml-3xs",
   "data-test-id": "main-sidebar-user-menu"
 };
@@ -610,9 +837,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     ]);
     const createBtn = ref();
     const isCollapsed = computed(() => uiStore.sidebarMenuCollapsed);
-    const logoPath = computed(
-      () => basePath.value + (isCollapsed.value ? "static/logo/collapsed.svg" : uiStore.logo)
-    );
     const hasVersionUpdates = computed(
       () => settingsStore.settings.releaseChannel === "stable" && versionsStore.hasVersionUpdates
     );
@@ -718,7 +942,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       menu,
       handleSelect: handleMenuSelect,
       createProjectAppendSlotName,
-      projectsLimitReachedMessage
+      projectsLimitReachedMessage,
+      upgradeLabel
     } = useGlobalEntityCreation();
     onClickOutside(createBtn, () => {
       createBtn.value?.close();
@@ -767,12 +992,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.logo)
         }, [
-          createBaseVNode("img", {
-            src: logoPath.value,
-            "data-test-id": "n8n-logo",
-            class: normalizeClass(_ctx.$style.icon),
-            alt: "n8n"
-          }, null, 10, _hoisted_1),
+          createVNode(Logo, {
+            location: "sidebar",
+            collapsed: isCollapsed.value,
+            "release-channel": unref(settingsStore).settings.releaseChannel
+          }, null, 8, ["collapsed", "release-channel"]),
           createVNode(unref(N8nNavigationDropdown), {
             ref_key: "createBtn",
             ref: createBtn,
@@ -794,7 +1018,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => unref(handleMenuSelect)(item.id)
                   }, {
                     default: withCtx(() => [
-                      createTextVNode(toDisplayString(unref(i18n).baseText("generic.upgrade")), 1)
+                      createTextVNode(toDisplayString(unref(upgradeLabel)), 1)
                     ]),
                     _: 2
                   }, 1032, ["onClick"])
@@ -862,7 +1086,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ref: user,
                 class: normalizeClass(_ctx.$style.userArea)
               }, [
-                createBaseVNode("div", _hoisted_2, [
+                createBaseVNode("div", _hoisted_1, [
                   createVNode(_component_ElDropdown, {
                     placement: "right-end",
                     trigger: "click",
@@ -939,15 +1163,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const sideMenu = "_sideMenu_15e4m_1";
-const logo = "_logo_15e4m_10";
-const sideMenuCollapsed = "_sideMenuCollapsed_15e4m_25";
-const sideMenuCollapseButton = "_sideMenuCollapseButton_15e4m_37";
-const updates = "_updates_15e4m_56";
-const expanded = "_expanded_15e4m_69";
-const userArea = "_userArea_15e4m_76";
-const userName = "_userName_15e4m_83";
-const userActions = "_userActions_15e4m_97";
+const sideMenu = "_sideMenu_1adju_1";
+const logo = "_logo_1adju_10";
+const sideMenuCollapsed = "_sideMenuCollapsed_1adju_25";
+const sideMenuCollapseButton = "_sideMenuCollapseButton_1adju_34";
+const updates = "_updates_1adju_53";
+const expanded = "_expanded_1adju_66";
+const userArea = "_userArea_1adju_73";
+const userName = "_userName_1adju_80";
+const userActions = "_userActions_1adju_94";
 const style0 = {
   sideMenu,
   logo,