Replace flow creation plus icon with New button

src/app/pages/main/editor-sidebar/editor-sidebar.css

@@ -15,3 +15,34 @@
 .enabled:hover {
  background-color: var(--color-gray-100) ;
 }
+
+.editor-sidebar-new-flow-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 56px;
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid #2563eb;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.editor-sidebar-new-flow-button:hover:not(:disabled) {
+  background: #dbeafe;
+  border-color: #1d4ed8;
+}
+
+.editor-sidebar-new-flow-button:disabled {
+  opacity: 0.75;
+  cursor: not-allowed;
+}
+
+.editor-sidebar-new-flow-button-loading {
+  gap: 6px;
+}

src/app/pages/main/editor-sidebar/editor-sidebar.html

@@ -51,13 +51,23 @@
       <div data-tour="editor-sidebar-flows" class="h-full min-h-0 flex flex-col">
       <app-group-holder title="Flows" icon="bi-lightning-charge-fill">
         @if (!creatingFlow()) {
-        <i ngProjectAs="header-button" 
-          class="bi bi-plus-circle-fill text-blue-600 hover:cursor-pointer hover:text-blue-400 text-lg"
-          (click)="createNewFlow()"></i>
+        <button
+          ngProjectAs="header-button"
+          type="button"
+          class="editor-sidebar-new-flow-button"
+          (click)="createNewFlow()"
+          aria-label="Create new flow">
+          New
+        </button>
         } @else {
-        <span ngProjectAs="header-button" class="spinner-border spinner-border-sm text-blue-600" role="status">
-          <span class="visually-hidden">Creating flow...</span>
-        </span>
+        <button
+          ngProjectAs="header-button"
+          type="button"
+          class="editor-sidebar-new-flow-button editor-sidebar-new-flow-button-loading"
+          disabled>
+          <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+          <span>New</span>
+        </button>
         }
         <app-flows-list></app-flows-list>
       </app-group-holder>