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,55 +364,57 @@ export default function App() {
         </div>
         <div className="editor">
           <div style={{ marginBottom: "0.5rem" }} className="toggle">
-            <button
+            <select
-              className={activeTab.version === "1.0" ? "active" : ""}
+              value={activeTab.version}
-              onClick={() =>
+              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
+              <option value="1.0">XSLT 1.0</option>
-            </button>
+              <option value="2.0">XSLT 2.0</option>
-            <button
+            </select>
-              className={activeTab.version === "2.0" ? "active" : ""}
+            <div className="right-actions">
-              onClick={() =>
+              <label className="icon-button file-label">
-                setTabs((tabs) =>
+                📤
-                  tabs.map((t) => (t.id === active ? { ...t, version: "2.0" } : t)),
+                <input
-                )
+                  type="file"
-              }
+                  accept=".xsl,.xslt"
-            >
+                  className="file-input"
-              XSLT 2.0
+                  onChange={(e) =>
-            </button>
+                    loadFile(e, (t) =>
-            <label className="icon-button file-label" style={{ marginLeft: "0.5rem" }}>
+                      setTabs((tabs) =>
-              📤
+                        tabs.map((tab) =>
-              <input
+                          tab.id === active
-                type="file"
+                            ? { ...tab, xslt: stripParamBlock(t) }
-                accept=".xsl,.xslt"
+                            : tab,
-                className="file-input"
+                        ),
-                onChange={(e) =>
+                      )
-                  loadFile(e, (t) =>
-                    setTabs((tabs) =>
-                      tabs.map((tab) =>
-                        tab.id === active ? { ...tab, xslt: stripParamBlock(t) } : tab,
-                      ),
                     )
+                  }
+                />
+              </label>
+              <button
+                className="icon-button"
+                onClick={() =>
+                  download(
+                    injectParamBlock(activeTab.xslt, activeTab.params),
+                    "transform.xsl",
                   )
                 }
-              />
+              >
-            </label>
+                📥
-            <button
+              </button>
-              className="icon-button"
+            </div>
-              onClick={() =>
-                download(
-                  injectParamBlock(activeTab.xslt, activeTab.params),
-                  "transform.xsl",
-                )
-              }
-              style={{ marginLeft: "0.5rem" }}
-            >
-              📥
-            </button>
           </div>
           <Editor
             height="100%"

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;