Improve formatting of settings

src/settings/settingTab.ts

@@ -16,25 +16,21 @@ export class SettingTab extends PluginSettingTab {
 
 		containerEl.empty();
 
-		containerEl.createEl("h2", {
+		containerEl.createEl("h3", {
 			text: "Obsidian DeepL - Settings",
 		});
+
+		containerEl.createEl("h4", {
+			text: "Commands",
+		});
+
 		containerEl.createEl("p", {
-			text: "There is one command `Translate`.",
+			text: 'Translate: Translates the selected text from the "From language" to the "To language".',
 		});
 
-		new Setting(containerEl)
-			.setName("DeepL API Key")
-			.setDesc("Get one for free at https://deepl.com/pro.")
-			.addText((text) =>
-				text
-					.setPlaceholder("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xx")
-					.setValue(this.plugin.settings.apiKey)
-					.onChange(async (value) => {
-						this.plugin.settings.apiKey = value;
-						await this.plugin.saveSettings();
-					})
-			);
+		containerEl.createEl("h4", {
+			text: "Language settings",
+		});
 
 		new Setting(containerEl)
 			.setName("From language")
@@ -74,6 +70,23 @@ export class SettingTab extends PluginSettingTab {
 					})
 			);
 
+		containerEl.createEl("h4", {
+			text: "Authentication settings",
+		});
+
+		new Setting(containerEl)
+			.setName("DeepL API Key")
+			.setDesc("Get one for free at https://deepl.com/pro.")
+			.addText((text) =>
+				text
+					.setPlaceholder("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xx")
+					.setValue(this.plugin.settings.apiKey)
+					.onChange(async (value) => {
+						this.plugin.settings.apiKey = value;
+						await this.plugin.saveSettings();
+					})
+			);
+
 		new Setting(containerEl)
 			.setName("Use DeepL Pro API")
 			.setDesc("Whether to use the DeepL Pro API or the DeepL Free API.")