From cb345e3d9fe258e330c142cc09a79f80bc040c01 Mon Sep 17 00:00:00 2001
From: Alexander Likhachev <65253792+avlihachev@users.noreply.github.com>
Date: Wed, 12 Nov 2025 09:32:28 +0200
Subject: [PATCH] Replace HTML headings with Setting().setHeading()

- Replace all createEl("h2"/"h3") with Setting().setHeading().setName()
- Remove emojis from UI headings (sentence case)
- Add CSS classes for replaced HTML elements
- Ensures consistent UI styling with Obsidian framework

Addresses Obsidian plugin review requirements.
---
 main.ts    | 22 +++++++++++-----------
 styles.css | 15 ++++++++++++---
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/main.ts b/main.ts
index 054df30..48b393a 100644
--- a/main.ts
+++ b/main.ts
@@ -364,7 +364,7 @@ class WorkoutModal extends Modal {
     contentEl.empty();
     contentEl.addClass("workout-modal");
 
-    contentEl.createEl("h2", { text: "🏋️ New workout" });
+    new Setting(contentEl).setHeading().setName("New workout");
     contentEl.createEl("p", { text: "Select a workout program" });
 
     // Get all templates
@@ -376,7 +376,7 @@ class WorkoutModal extends Modal {
     templates.forEach((template) => {
       const templateCard = templatesContainer.createDiv("template-card");
 
-      templateCard.createEl("h3", { text: template.name });
+      templateCard.createEl("div", { text: template.name, cls: "template-card-title" });
 
       if (template.description) {
         templateCard.createEl("p", {
@@ -509,7 +509,7 @@ class ExerciseTrackingModal extends Modal {
 
     // Header
     const header = contentEl.createDiv("workout-header");
-    header.createEl("h2", { text: this.session.program });
+    header.createEl("div", { text: this.session.program, cls: "workout-session-title" });
 
     // Summary stats
     const stats = contentEl.createDiv("workout-stats");
@@ -754,7 +754,7 @@ class QuickExerciseModal extends Modal {
 
   onOpen() {
     const { contentEl } = this;
-    contentEl.createEl("h2", { text: "⚡ Quick Add" });
+    new Setting(contentEl).setHeading().setName("Quick add");
     // Implementation for quick exercise addition
     contentEl.createEl("p", {
       text: "Quickly add an exercise to today's workout",
@@ -844,11 +844,11 @@ class TemplateEditorModal extends Modal {
     contentEl.empty();
     contentEl.addClass("template-editor-modal");
 
-    contentEl.createEl("h2", { text: "✏️ Edit template" });
+    new Setting(contentEl).setHeading().setName("Edit template");
 
     // Basic info section
     const basicSection = contentEl.createDiv("editor-section");
-    basicSection.createEl("h3", { text: "Basic information" });
+    new Setting(basicSection).setHeading().setName("Basic information");
     new Setting(basicSection).setName("Name").addText((text) =>
       text.setValue(this.editableTemplate.name).onChange((value) => {
         this.editableTemplate.name = value;
@@ -891,7 +891,7 @@ class TemplateEditorModal extends Modal {
 
     // Exercises section
     const exercisesSection = contentEl.createDiv("editor-section");
-    exercisesSection.createEl("h3", { text: "Exercises" });
+    new Setting(exercisesSection).setHeading().setName("Exercises");
 
     const exercisesList = exercisesSection.createDiv("exercises-list");
     this.renderExercises(exercisesList);
@@ -913,7 +913,7 @@ class TemplateEditorModal extends Modal {
 
     // Warmup/Cooldown section
     const cardioSection = contentEl.createDiv("editor-section");
-    cardioSection.createEl("h3", { text: "Warmup and cooldown" });
+    new Setting(cardioSection).setHeading().setName("Warmup and cooldown");
 
     const warmupEnabled = this.editableTemplate.warmup !== undefined;
     new Setting(cardioSection).setName("Warmup").addToggle((toggle) =>
@@ -1271,7 +1271,7 @@ class TemplateManagementModal extends Modal {
     contentEl.empty();
     contentEl.addClass("template-management-modal");
 
-    contentEl.createEl("h2", { text: "📋 Template management" });
+    new Setting(contentEl).setHeading().setName("Template management");
 
     const templates = this.plugin.templateManager.getAllTemplates();
 
@@ -1280,7 +1280,7 @@ class TemplateManagementModal extends Modal {
       const templateItem = contentEl.createDiv("template-management-item");
 
       const header = templateItem.createDiv("template-header");
-      header.createEl("h3", { text: template.name });
+      header.createEl("div", { text: template.name, cls: "template-management-title" });
 
       const info = templateItem.createDiv("template-info");
       info.createEl("span", {
@@ -1381,7 +1381,7 @@ class WorkoutAISettingTab extends PluginSettingTab {
     const { containerEl } = this;
     containerEl.empty();
 
-    containerEl.createEl("h2", { text: "Workout AI tracker settings" });
+    new Setting(containerEl).setHeading().setName("Workout AI tracker settings");
 
     new Setting(containerEl)
       .setName("Claude API key")
diff --git a/styles.css b/styles.css
index c95c080..f28e135 100644
--- a/styles.css
+++ b/styles.css
@@ -80,7 +80,8 @@
   border-left: 3px solid var(--interactive-accent);
 }
 
-.template-card h3 {
+.template-card h3,
+.template-card .template-card-title {
   margin: 0 0 6px 0;
   color: var(--text-normal);
   font-size: 15px;
@@ -252,7 +253,8 @@
   margin-bottom: 16px;
 }
 
-.workout-header h2 {
+.workout-header h2,
+.workout-session-title {
   margin: 0;
   font-size: 20px;
   font-weight: 600;
@@ -569,7 +571,8 @@
   border-left: 4px solid var(--interactive-accent);
 }
 
-.template-header h3 {
+.template-header h3,
+.template-management-title {
   margin: 0 0 8px 0;
   color: var(--text-accent);
   font-size: 16px;
@@ -724,3 +727,9 @@
     grid-template-columns: 1fr;
   }
 }
+
+/* Default template label */
+.default-template-label {
+  color: var(--text-muted);
+  font-size: 12px;
+}