Merge pull request #8 from alexandrev/7fe9nr-codex/update-toggle-section-with-combobox-and-align-buttons

Add dropdown for XSLT version and align file actions

frontend/src/App.jsx

@@ -57,6 +57,19 @@ function debounce(fn, delay) {
   };
 }
 
+function setStylesheetVersion(text, version) {
+  const regex = /<xsl:stylesheet\b([^>]*)>/;
+  const match = text.match(regex);
+  if (!match) return text;
+  let attrs = match[1];
+  if (/version=['"][^'"]*['"]/.test(attrs)) {
+    attrs = attrs.replace(/version=['"][^'"]*['"]/, `version="${version}"`);
+  } else {
+    attrs += ` version="${version}"`;
+  }
+  return text.replace(regex, `<xsl:stylesheet${attrs}>`);
+}
+
 const goPro = import.meta.env.VITE_GO_PRO === "true";
 
 function defaultTab() {
@@ -351,27 +364,27 @@ export default function App() {
         </div>
         <div className="editor">
           <div style={{ marginBottom: "0.5rem" }} className="toggle">
-            <button
-              className={activeTab.version === "1.0" ? "active" : ""}
-              onClick={() =>
+            <select
+              value={activeTab.version}
+              onChange={(e) =>
                 setTabs((tabs) =>
-                  tabs.map((t) => (t.id === active ? { ...t, version: "1.0" } : t)),
+                  tabs.map((t) =>
+                    t.id === active
+                      ? {
+                          ...t,
+                          version: e.target.value,
+                          xslt: setStylesheetVersion(t.xslt, e.target.value),
+                        }
+                      : t,
+                  ),
                 )
               }
             >
-              XSLT 1.0
-            </button>
-            <button
-              className={activeTab.version === "2.0" ? "active" : ""}
-              onClick={() =>
-                setTabs((tabs) =>
-                  tabs.map((t) => (t.id === active ? { ...t, version: "2.0" } : t)),
-                )
-              }
-            >
-              XSLT 2.0
-            </button>
-            <label className="icon-button file-label" style={{ marginLeft: "0.5rem" }}>
+              <option value="1.0">XSLT 1.0</option>
+              <option value="2.0">XSLT 2.0</option>
+            </select>
+            <div className="right-actions">
+              <label className="icon-button file-label">
                 📤
                 <input
                   type="file"
@@ -381,7 +394,9 @@ export default function App() {
                     loadFile(e, (t) =>
                       setTabs((tabs) =>
                         tabs.map((tab) =>
-                        tab.id === active ? { ...tab, xslt: stripParamBlock(t) } : tab,
+                          tab.id === active
+                            ? { ...tab, xslt: stripParamBlock(t) }
+                            : tab,
                         ),
                       )
                     )
@@ -396,11 +411,11 @@ export default function App() {
                     "transform.xsl",
                   )
                 }
-              style={{ marginLeft: "0.5rem" }}
               >
                 📥
               </button>
             </div>
+          </div>
           <Editor
             height="100%"
             language="xml"

frontend/src/style.css

@@ -39,10 +39,22 @@ body,
   font-weight: bold;
 }
 
-.toggle button {
+.toggle {
+  display: flex;
+  align-items: center;
+}
+
+.toggle button,
+.toggle select {
   margin-right: 0.25rem;
 }
 
+.toggle .right-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
 .error-box {
   background: #fee;
   color: #900;