refactor(settings): move button styles to CSS and replace SVG innerHTML with safe DOM API creation

src/settings.ts

@@ -62,35 +62,19 @@ export class JiraSettingTab extends PluginSettingTab {
 
 			const toggleBtn = document.createElement("button");
 			toggleBtn.type = "button";
-			toggleBtn.style.marginLeft = "8px";
+			toggleBtn.classList.add("jira-password-toggle");
-			toggleBtn.style.background = "none";
-			toggleBtn.style.border = "none";
-			toggleBtn.style.cursor = "pointer";
 			let visible = false;
 
-			const eyeIcon = `
+			const icon = createEyeIcon();
-		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
+			toggleBtn.appendChild(icon);
-			stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-			<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/>
-			<circle cx="12" cy="12" r="3"/>
-		</svg>
-	`;
-			const eyeOffIcon = `
-		<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
-			stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-			<path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.81 21.81 0 0 1 5.06-6.06"/>
-			<path d="M1 1l22 22"/>
-			<path d="M9.53 9.53A3 3 0 0 0 12 15a3 3 0 0 0 2.47-5.47"/>
-			<path d="M14.47 14.47A3 3 0 0 1 12 9a3 3 0 0 1-2.47 5.47"/>
-		</svg>
-	`;
-
-			toggleBtn.innerHTML = eyeIcon;
 
 			toggleBtn.onclick = () => {
 				visible = !visible;
 				text.inputEl.type = visible ? "text" : "password";
-				toggleBtn.innerHTML = visible ? eyeOffIcon : eyeIcon;
+				toggleBtn.replaceChild(
+					visible ? createEyeOffIcon() : createEyeIcon(),
+					toggleBtn.firstChild!
+				);
 			};
 
 			text.inputEl.parentElement?.appendChild(toggleBtn);
@@ -137,20 +121,9 @@ export class JiraSettingTab extends PluginSettingTab {
 
 			const removeBtn = document.createElement("button");
 			removeBtn.type = "button";
-			removeBtn.innerHTML = `
+			removeBtn.classList.add("jira-issue-remove-btn");
-		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" 
-			stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-			<polyline points="3 6 5 6 21 6"></polyline>
-			<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path>
-			<line x1="10" y1="11" x2="10" y2="17"></line>
-			<line x1="14" y1="11" x2="14" y2="17"></line>
-		</svg>
-	`;
-			removeBtn.style.background = "none";
-			removeBtn.style.border = "none";
-			removeBtn.style.cursor = "pointer";
-			removeBtn.style.marginLeft = "8px";
 			removeBtn.title = "Remove";
+			removeBtn.appendChild(createTrashIcon());
 
 			removeBtn.onclick = async () => {
 				this.plugin.settings.issues.splice(idx, 1);
@@ -188,3 +161,124 @@ export class JiraSettingTab extends PluginSettingTab {
 		containerEl.appendChild(details);
 	}
 }
+
+function createEyeIcon(): SVGSVGElement {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("width", "18");
+	svg.setAttribute("height", "18");
+	svg.setAttribute("viewBox", "0 0 24 24");
+	svg.setAttribute("fill", "none");
+	svg.setAttribute("stroke", "currentColor");
+	svg.setAttribute("stroke-width", "2");
+	svg.setAttribute("stroke-linecap", "round");
+	svg.setAttribute("stroke-linejoin", "round");
+
+	const path1 = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"path"
+	);
+	path1.setAttribute("d", "M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z");
+	const circle = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"circle"
+	);
+	circle.setAttribute("cx", "12");
+	circle.setAttribute("cy", "12");
+	circle.setAttribute("r", "3");
+
+	svg.appendChild(path1);
+	svg.appendChild(circle);
+	return svg;
+}
+
+// Функция для создания SVG-иконки "глаз зачёркнутый"
+function createEyeOffIcon(): SVGSVGElement {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("width", "18");
+	svg.setAttribute("height", "18");
+	svg.setAttribute("viewBox", "0 0 24 24");
+	svg.setAttribute("fill", "none");
+	svg.setAttribute("stroke", "currentColor");
+	svg.setAttribute("stroke-width", "2");
+	svg.setAttribute("stroke-linecap", "round");
+	svg.setAttribute("stroke-linejoin", "round");
+
+	const path1 = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"path"
+	);
+	path1.setAttribute(
+		"d",
+		"M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.81 21.81 0 0 1 5.06-6.06"
+	);
+	const path2 = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"path"
+	);
+	path2.setAttribute("d", "M1 1l22 22");
+	const path3 = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"path"
+	);
+	path3.setAttribute("d", "M9.53 9.53A3 3 0 0 0 12 15a3 3 0 0 0 2.47-5.47");
+	const path4 = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"path"
+	);
+	path4.setAttribute("d", "M14.47 14.47A3 3 0 0 1 12 9a3 3 0 0 1-2.47 5.47");
+
+	svg.appendChild(path1);
+	svg.appendChild(path2);
+	svg.appendChild(path3);
+	svg.appendChild(path4);
+	return svg;
+}
+
+// Функция для создания SVG-иконки "корзина" (удаление)
+function createTrashIcon(): SVGSVGElement {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("width", "16");
+	svg.setAttribute("height", "16");
+	svg.setAttribute("viewBox", "0 0 24 24");
+	svg.setAttribute("fill", "none");
+	svg.setAttribute("stroke", "red");
+	svg.setAttribute("stroke-width", "2");
+	svg.setAttribute("stroke-linecap", "round");
+	svg.setAttribute("stroke-linejoin", "round");
+
+	const polyline = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"polyline"
+	);
+	polyline.setAttribute("points", "3 6 5 6 21 6");
+	const path1 = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"path"
+	);
+	path1.setAttribute(
+		"d",
+		"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"
+	);
+	const line1 = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"line"
+	);
+	line1.setAttribute("x1", "10");
+	line1.setAttribute("y1", "11");
+	line1.setAttribute("x2", "10");
+	line1.setAttribute("y2", "17");
+	const line2 = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"line"
+	);
+	line2.setAttribute("x1", "14");
+	line2.setAttribute("y1", "11");
+	line2.setAttribute("x2", "14");
+	line2.setAttribute("y2", "17");
+
+	svg.appendChild(polyline);
+	svg.appendChild(path1);
+	svg.appendChild(line1);
+	svg.appendChild(line2);
+	return svg;
+}

styles.css

@@ -15,3 +15,21 @@
   background: var(--background-modifier-hover);
   border-color: var(--interactive-accent);
 }
+
+.jira-password-toggle {
+  margin-left: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  vertical-align: middle;
+  padding: 0;
+}
+
+.jira-issue-remove-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-left: 8px;
+  vertical-align: middle;
+  padding: 0;
+}