almost finish the structure

src/ui/CustomModal.ts

@@ -4,7 +4,7 @@ import {ObsidianSettingTab} from "./settingTabs";
 
 export class CustomModal extends Modal {
 	propertyLines: Setting[] = []; // Store all property line settings
-	properties: { customValue: string, customType: string }[] = []; // Array to store property values and types
+	properties: { customName: string, customType: string }[] = []; // Array to store property values and types
 	plugin: ObsidianSyncNotionPlugin;
 	settingTab: ObsidianSettingTab;
 
@@ -14,19 +14,45 @@ export class CustomModal extends Modal {
 
 	createPropertyLine(containerEl: HTMLElement): void {
 		const propertyIndex = this.properties.length;
-		this.properties.push({customValue: "", customType: ""}); // Initialize with empty values
+		this.properties.push({customName: "", customType: ""}); // Initialize with empty values
 
 		const propertyLine = new Setting(containerEl)
 
+		if (propertyIndex === 0) {
+			propertyLine
+				.setName("Title")
+				.setDesc("The title of the page, must be the first property")
+
+				propertyLine.addText((text) => {
+					text
+						.setPlaceholder("Property name")
+						.setValue("")
+						.onChange(async (value) => {
+							this.properties[propertyIndex].customName = value; // Update the customValue of the specific property
+						});
+
+				}
+			)
+
+			propertyLine.addDropdown((dropdown) => {
+					dropdown
+						.addOption("title", "Title")
+						.setValue("")
+						.onChange(async (value) => {
+							this.properties[propertyIndex].customType = value; // Update the customType of the specific property
+						});
+				}
+			)
+		} else {
 		propertyLine
-			.setName("Property " + (propertyIndex + 1))
+			.setName("Property " + (propertyIndex))
 
 		propertyLine.addText((text) => {
 				text
 					.setPlaceholder("Property name")
 					.setValue("")
 					.onChange(async (value) => {
-						this.properties[propertyIndex].customValue = value; // Update the customValue of the specific property
+						this.properties[propertyIndex].customName = value; // Update the customValue of the specific property
 					});
 			}
 		)
@@ -70,7 +96,7 @@ export class CustomModal extends Modal {
 					});
 			}
 		);
-
+		}
 		this.propertyLines.push(propertyLine);
 	}
 

src/ui/EditModal.ts

@@ -235,9 +235,6 @@ export class EditModal extends SettingModal {
 			// add database id
 			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.dataTemp.databaseIDTemp, 'dataTemp', 'databaseIDTemp')
 
-			// add custom title name
-			this.createSettingEl(nextTabs, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.dataTemp.customTitleNameTemp, 'dataTemp', 'customTitleNameTemp')
-
 			// add new property button
 			new Setting(nextTabs)
 				.setName(i18nConfig.NotionCustomValues)

src/ui/settingModal.ts

@@ -214,9 +214,6 @@ export class SettingModal extends Modal {
 			// add database id
 			this.createSettingEl(nextTabs, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.data.databaseID, 'data', 'databaseID')
 
-			// add custom title name
-			this.createSettingEl(nextTabs, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.data.customTitleName, 'data', 'customTitleName')
-
 			// add new property button
 			new Setting(nextTabs)
 				.setName(i18nConfig.NotionCustomValues)
@@ -251,9 +248,9 @@ export class SettingModal extends Modal {
 	renderCustomPreview(properties: any[], nextTabs: HTMLElement) {
 		const previewContainer = nextTabs.createDiv('preview-container');
 
-		properties.forEach((property: { customValue: any; customType: any; }) => {
+		properties.forEach((property: { customName: any; customType: any; }) => {
 			const propertyEl = previewContainer.createEl('div', {cls: 'property-preview'});
-			propertyEl.createEl('span', {text: `Property: ${property.customValue}, Type: ${property.customType}`});
+			propertyEl.createEl('span', {text: `Property: ${property.customName}, Type: ${property.customType}`});
 		});
 
 	}

src/ui/settingTabs.ts

@@ -37,7 +37,7 @@ export interface DatabaseDetails {
 	tagButton: boolean;
 	customTitleButton: boolean;
 	customTitleName: string;
-	customProperties:{ customValue: string, customType: string }[];
+	customProperties:{ customName: string, customType: string }[];
 	// customValues: string;
 	saved: boolean;
 }