From 7c6293fa41dba6dd2d61e5dceb1163768085a954 Mon Sep 17 00:00:00 2001
From: Nathan-CSE <nathan.nguyen.au@gmail.com>
Date: Wed, 7 May 2025 19:15:22 +1000
Subject: [PATCH] tweaked with some settings

---
 main.ts       | 50 +++++++++++++++++++++++++++++++++++++++-----------
 manifest.json |  6 +++---
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/main.ts b/main.ts
index b2c10f6..d57a588 100644
--- a/main.ts
+++ b/main.ts
@@ -1,4 +1,4 @@
-import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { App, Editor, MarkdownView, Modal, Notice, ColorComponent, TextComponent, SliderComponent, Plugin, PluginSettingTab, Setting } from 'obsidian';
 
 interface GridBackgroundSettings {
 	gridSize: number;
@@ -54,6 +54,7 @@ export default class GridBackgroundPlugin extends Plugin {
 
 class GridBackgroundSettingTab extends PluginSettingTab {
 	plugin: GridBackgroundPlugin;
+	sliderGridSize: SliderComponent;
 
 	constructor(app: App, plugin: GridBackgroundPlugin) {
 		super(app, plugin);
@@ -65,17 +66,44 @@ class GridBackgroundSettingTab extends PluginSettingTab {
     containerEl.empty();
     containerEl.createEl('h2', { text: 'Grid Background Settings' });
 
-    new Setting(containerEl)
+    const gridSizeSetting = new Setting(containerEl)
       .setName('Grid Size')
-      .setDesc('Spacing between grid lines (in px)')
-      .addText(text =>
-        text
-          .setPlaceholder('e.g. 20')
-          .setValue(this.plugin.settings.gridSize.toString())
-          .onChange(async (value) => {
-            this.plugin.settings.gridSize = parseInt(value) || 20;
-            await this.plugin.saveSettings();
-          }));
+      .setDesc('Spacing between grid lines (in px)');
+
+    const gridSizeSlider = gridSizeSetting.addSlider(sliderValue =>
+      sliderValue
+        .setInstant(true)
+        .setValue(this.plugin.settings.gridSize)
+        .setLimits(20, 100, 1)
+        .onChange(async (value) => {
+          this.plugin.settings.gridSize = value || 20;
+          (gridSizeText.components[0] as TextComponent).setValue(value.toString());
+          await this.plugin.saveSettings();
+        })
+    );
+
+    const gridSizeText = gridSizeSetting.addText(text =>
+      text
+        .setPlaceholder('e.g. 20')
+        .setValue(this.plugin.settings.gridSize.toString())
+        .onChange(async (value) => {
+          this.plugin.settings.gridSize = parseInt(value) || 20;
+          (gridSizeText.components[0] as TextComponent).setValue(value.toString());
+          await this.plugin.saveSettings();
+        })
+    );
+
+    gridSizeSetting.addButton(button =>
+      button
+        .setButtonText('Reset')
+        .setCta()
+        .onClick(async () => {
+          this.plugin.settings.gridSize = DEFAULT_SETTINGS.gridSize;
+          (gridSizeText.components[0] as TextComponent).setValue(this.plugin.settings.gridSize.toString());
+          (gridSizeSlider.components[0] as SliderComponent).setValue(this.plugin.settings.gridSize);
+          await this.plugin.saveSettings();
+        })
+    );
 
     new Setting(containerEl)
       .setName('Grid Colour')
diff --git a/manifest.json b/manifest.json
index 5497575..aec68be 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,9 +1,9 @@
 {
-	"id": "sample-plugin",
-	"name": "Sample Plugin",
+	"id": "grid-background",
+	"name": "Grid Background",
 	"version": "1.0.0",
 	"minAppVersion": "0.15.0",
-	"description": "Adds a customizable grid background to note views.",
+	"description": "Adds a customisable grid background to note views.",
 	"author": "Nathan Nguyen",
 	"isDesktopOnly": false
 }