feat(setting-tab): working on SettingTab.ts

main.ts

@@ -112,9 +112,9 @@ export default class PrioPlugin extends Plugin {
 
 		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
 		// Using this function will automatically remove the event listener when this plugin is disabled.
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
-			console.log('click', evt);
-		});
+		// this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
+		// 	console.log('click', evt);
+		// });
 
 		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
 		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));

styles.css

@@ -41,3 +41,8 @@ If your plugin does not need CSS, delete this file.
 .btn-primary:hover {
 	background-color: var(--interactive-accent-hover);
 }
+
+.level-text {
+	max-width: 50px;
+	margin: 5px;
+}

utils/SettingTab.ts

@@ -1,5 +1,6 @@
-import {App, PluginSettingTab, Setting} from "obsidian";
+import {App, PluginSettingTab, Setting, SliderComponent} from "obsidian";
 import PrioPlugin from "../main";
+import {Preset} from "./Presets";
 
 export class SettingTab extends PluginSettingTab {
 	plugin: PrioPlugin;
@@ -14,9 +15,11 @@ export class SettingTab extends PluginSettingTab {
 
 		containerEl.empty();
 
-		let presets = this.plugin.settings.presets;
+		let presets: Preset[] = this.plugin.settings.presets ?? [];
+
 
 		containerEl.createEl('h2', {text: 'General Settings'});
+
 		if (this.plugin.settings.presets) {
 			const dropDownOptions: Record<string, string> = {'default': 'Default'};
 			this.plugin.settings.presets.map(preset => {
@@ -29,28 +32,64 @@ export class SettingTab extends PluginSettingTab {
 					search
 						.setPlaceholder('Search Presets')
 						.onChange(async (value) => {
-							presets = this.plugin.settings.presets?.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase()));
+							presets = this.plugin.settings.presets?.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase())) ?? [];
+							presetList.empty()
+							this.generatePresetList(presets, presetList);
 						});
 				});
 		}
-		new Setting(containerEl)
-			.setName('Levels')
-			.setDesc('Set the priority levels to use.')
-			.addSlider((slider) => {
-				slider
-					.setLimits(1, 10, 1)
-					.setValue(this.plugin.settings.levels)
-					.onChange(async (value) => {
-						this.plugin.settings.levels = value;
-					});
-			});
 
 		const presetList = createEl('ol', {
 			cls: 'preset-list',
 			parent: containerEl
 		});
 
-		(presets || []).map(preset => {
+		const levelSliderSetting = new Setting(containerEl);
+		let levelSlider: SliderComponent;
+		const levelText = createEl('input', {
+			value: this.plugin.settings.levels.toString(),
+			type: 'numeric',
+			cls: 'level-text',
+			parent: levelSliderSetting.settingEl,
+			attr: {
+				min: 1,
+				max: 10,
+				step: 1,
+				type: 'number'
+			}
+		});
+
+		levelText.addEventListener('change', (event) => {
+			let value = parseInt((event.target as HTMLInputElement).value);
+			if (value < 1) {
+				value = 1;
+			}
+			if (value > 10) {
+				value = 10;
+			}
+			levelSlider.setValue(value);
+		});
+
+		this.generatePresetList(presets, presetList);
+
+		levelSliderSetting
+			.setName('Levels')
+			.setDesc('Set the count of priority levels to use.')
+			.addSlider((slider) => {
+				levelSlider = slider
+				levelSlider
+					.setLimits(1, 10, 1)
+					.setValue(this.plugin.settings.levels)
+					.onChange(async (value) => {
+						this.plugin.settings.levels = value;
+						levelText.value = value.toString();
+					})
+					.setDynamicTooltip()
+			})
+
+	}
+
+	generatePresetList = (presets: Preset[], presetList: HTMLOListElement) => (presets || []).map(preset => {
 		const el = createEl('li', {
 			text: preset.name,
 			cls: 'preset-list-item',
@@ -75,7 +114,5 @@ export class SettingTab extends PluginSettingTab {
 			}
 		})
 		return el;
-		})
-
-	}
+	});
 }