From a4e78cb2690856bf07f214dd9348e1aebe848af2 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Fri, 24 Apr 2026 12:18:31 +0200
Subject: [PATCH] Replace flow creation plus icon with New button

---
 .../main/editor-sidebar/editor-sidebar.css    | 31 +++++++++++++++++++
 .../main/editor-sidebar/editor-sidebar.html   | 22 +++++++++----
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/main/editor-sidebar/editor-sidebar.css b/src/app/pages/main/editor-sidebar/editor-sidebar.css
index ba7c82c..8fb946b 100644
--- a/src/app/pages/main/editor-sidebar/editor-sidebar.css
+++ b/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;
+}
diff --git a/src/app/pages/main/editor-sidebar/editor-sidebar.html b/src/app/pages/main/editor-sidebar/editor-sidebar.html
index 69f7a0d..be6ebf1 100644
--- a/src/app/pages/main/editor-sidebar/editor-sidebar.html
+++ b/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>