From e7a0de0cf50ed25556591df42463e43837d79883 Mon Sep 17 00:00:00 2001
From: Alexandre Vazquez <alexandre.vazquez@gmail.com>
Date: Fri, 4 Jul 2025 12:00:23 +0200
Subject: [PATCH] Add parameters header and drop hint

---
 frontend/src/App.jsx   |  4 +++-
 frontend/src/style.css | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 06920b38..f3d2512a 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -362,7 +362,8 @@ export default function App() {
           onDragOver={(e) => e.preventDefault()}
           onDrop={handleDropNewParam}
         >
-          <div style={{ marginBottom: "0.5rem" }}>
+          <div className="params-header">
+            <div className="title">Data Pipeline</div>
             <button className="icon-button" onClick={addParam}>➕</button>
           </div>
           {activeTab.params.map((p, i) => (
@@ -408,6 +409,7 @@ export default function App() {
               )}
             </div>
           ))}
+          <div className="drop-hint">Drop your input XML files here..</div>
         </div>
         <div className="editor">
           <div style={{ marginBottom: "0.5rem" }} className="toggle">
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 59364207..5d18a6e8 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -87,6 +87,29 @@ body,
   padding: 0.5rem;
 }
 
+.params-header {
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+
+.params-header .title {
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+}
+
+.params-header button {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.drop-hint {
+  text-align: center;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
 .editor {
   width: 70%;
   padding: 0.5rem;