update the setting ui

src/ui/settingTabs.ts

@@ -91,10 +91,13 @@ export class ObsidianSettingTab extends PluginSettingTab {
                         this.plugin.settings.NextButton = value;
                         await this.plugin.saveSettings();
                         await this.plugin.commands.updateCommand();
-                    })
-            );
 
-        new Setting(containerEl)
+						// Clear existing components
+						notionAPINextEl.empty();
+						databaseIDNextEl.empty();
+
+						if (value) {
+							new Setting(notionAPINextEl)
 								.setName(i18nConfig.NotionAPI)
 								.setDesc(i18nConfig.NotionAPIDesc)
 								.addText((text) => {
@@ -108,8 +111,10 @@ export class ObsidianSettingTab extends PluginSettingTab {
 										})
 								});
 
+							notionAPINextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
+							notionAPINextEl.style.paddingTop = value ? "0.75em" : "0";
 
-        const notionDatabaseID = new Setting(containerEl)
+							new Setting(databaseIDNextEl)
 								.setName(i18nConfig.DatabaseID)
 								.setDesc(i18nConfig.NotionAPIDesc)
 								.addText((text) => {
@@ -124,6 +129,34 @@ export class ObsidianSettingTab extends PluginSettingTab {
 									}
 								);
 
+							databaseIDNextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
+							databaseIDNextEl.style.paddingTop = value ? "0.75em" : "0";
+
+						} else {
+							notionAPINextEl.style.borderTop = "none";
+							notionAPINextEl.style.paddingTop = "0";
+							databaseIDNextEl.style.borderTop = "none";
+							databaseIDNextEl.style.paddingTop = "0";
+						}
+                    })
+            );
+
+		const notionAPINextEl = containerEl.createDiv('api-next', (div) => {
+			div.style.alignItems = "center";
+			div.style.borderTop = "none";
+			div.style.paddingBottom = "0";
+		}
+		);
+
+		const databaseIDNextEl = containerEl.createDiv('databaseID-next', (div) => {
+			div.style.alignItems = "center";
+			div.style.borderTop = "none";
+			div.style.paddingBottom = "0";
+		}
+		);
+
+
+
         // notionDatabaseID.controlEl.querySelector('input').type='password'
 
 
@@ -142,10 +175,14 @@ export class ObsidianSettingTab extends PluginSettingTab {
                         this.plugin.settings.GeneralButton = value;
                         await this.plugin.saveSettings();
                         await this.plugin.commands.updateCommand();
-                    })
-            );
 
-		new Setting(containerEl)
+						// Clear existing components
+						CustomTitleEl.empty();
+						notionAPIGeneralEl.empty();
+						databaseIDGeneralEl.empty();
+
+						if (value) {
+							new Setting(CustomTitleEl)
 								.setName(i18nConfig.NotionCustomTitle)
 								.setDesc(i18nConfig.NotionCustomTitleDesc)
 								.addToggle((toggle) =>
@@ -172,6 +209,9 @@ export class ObsidianSettingTab extends PluginSettingTab {
 																this.plugin.settings.CustomTitleName = value;
 																await this.plugin.saveSettings();
 																await this.plugin.commands.updateCommand();
+
+																// Clear existing components
+																CustomTitleEl.empty();
 															})
 													);
 												dynamicSettingContainer.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
@@ -183,8 +223,64 @@ export class ObsidianSettingTab extends PluginSettingTab {
 										})
 								);
 
+							CustomTitleEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
+							CustomTitleEl.style.paddingTop = value ? "0.75em" : "0";
+
+							new Setting(notionAPIGeneralEl)
+								.setName(i18nConfig.NotionAPI)
+								.setDesc(i18nConfig.NotionAPIDesc)
+								.addText((text) => {
+									text.inputEl.type = 'password';
+									return text
+										.setPlaceholder(i18nConfig.NotionAPIText)
+										.setValue(this.plugin.settings.notionAPIGeneral)
+										.onChange(async (value) => {
+											this.plugin.settings.notionAPIGeneral = value;
+											await this.plugin.saveSettings();
+										})
+								});
+
+							notionAPIGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
+							notionAPIGeneralEl.style.paddingTop = value ? "0.75em" : "0";
+
+
+							new Setting(databaseIDGeneralEl)
+								.setName(i18nConfig.DatabaseID)
+								.setDesc(i18nConfig.NotionAPIDesc)
+								.addText((text) => {
+										text.inputEl.type = 'password';
+										return text
+											.setPlaceholder(i18nConfig.NotionIDText)
+											.setValue(this.plugin.settings.databaseIDGeneral)
+											.onChange(async (value) => {
+												this.plugin.settings.databaseIDGeneral = value;
+												await this.plugin.saveSettings();
+											})
+									}
+								);
+
+							databaseIDGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
+							databaseIDGeneralEl.style.paddingTop = value ? "0.75em" : "0";
+
+						} else {
+							CustomTitleEl.style.borderTop = "none";
+							CustomTitleEl.style.paddingTop = "0";
+							notionAPIGeneralEl.style.borderTop = "none";
+							notionAPIGeneralEl.style.paddingTop = "0";
+							databaseIDGeneralEl.style.borderTop = "none";
+							databaseIDGeneralEl.style.paddingTop = "0";
+						}
+                    })
+            );
+
+		const CustomTitleEl = containerEl.createDiv('api-general', (div) => {
+				div.style.alignItems = "center";
+				div.style.borderTop = "none";
+				div.style.paddingBottom = "0";
+			}
+		);
+
 		const dynamicSettingContainer = containerEl.createDiv('setting-popover', (div) => {
-			div.style.display = "flex";
 			div.style.alignItems = "center";
 			div.style.borderTop = "none";
 			div.style.paddingBottom = "0";
@@ -201,36 +297,23 @@ export class ObsidianSettingTab extends PluginSettingTab {
         // 			await this.plugin.saveSettings();
         // 		})
         // );
-        new Setting(containerEl)
-            .setName(i18nConfig.NotionAPI)
-            .setDesc(i18nConfig.NotionAPIDesc)
-            .addText((text) => {
-                text.inputEl.type = 'password';
-                return text
-                    .setPlaceholder(i18nConfig.NotionAPIText)
-                    .setValue(this.plugin.settings.notionAPIGeneral)
-                    .onChange(async (value) => {
-                        this.plugin.settings.notionAPIGeneral = value;
-                        await this.plugin.saveSettings();
-                    })
-            });
 
 
-        new Setting(containerEl)
+		const notionAPIGeneralEl = containerEl.createDiv('api-general', (div) => {
-            .setName(i18nConfig.DatabaseID)
+				div.style.alignItems = "center";
-            .setDesc(i18nConfig.NotionAPIDesc)
+				div.style.borderTop = "none";
-            .addText((text) => {
+				div.style.paddingBottom = "0";
-                text.inputEl.type = 'password';
-                return text
-                    .setPlaceholder(i18nConfig.NotionIDText)
-                    .setValue(this.plugin.settings.databaseIDGeneral)
-                    .onChange(async (value) => {
-                        this.plugin.settings.databaseIDGeneral = value;
-                        await this.plugin.saveSettings();
-                    })
 		}
 		);
 
+		const databaseIDGeneralEl = containerEl.createDiv('databaseID-general', (div) => {
+				div.style.alignItems = "center";
+				div.style.borderTop = "none";
+				div.style.paddingBottom = "0";
+		}
+		);
+
+
         // Custom Database Settings
 
         // containerEl.createEl('h2', {text: i18nConfig.NotionCustomSettingHeader});