Update plugin version to 1.1.1, enhance folder settings UI with donation options, and improve dashboard view with habit chart labeling.

Andre-Diamond · Andre-Diamond · commit 3c9f5f5cecd9 · 2025-03-22T10:45:44.000+02:00
diff --git a/main.ts b/main.ts
@@ -65,7 +65,7 @@ export default class NoteMetricsPlugin extends Plugin {
 			this.app.workspace.revealLeaf(existingLeaves[0]);
 			return;
 		}
-	
+
 		// If no dashboard leaf exists, create a new right sidebar leaf.
 		const rightLeaf = this.app.workspace.getRightLeaf(false);
 		if (rightLeaf) {
@@ -75,7 +75,7 @@ export default class NoteMetricsPlugin extends Plugin {
 			});
 			this.app.workspace.revealLeaf(rightLeaf);
 		}
-	}	
+	}
 }
 
 class NoteMetricsSettingTab extends PluginSettingTab {
@@ -90,34 +90,32 @@ class NoteMetricsSettingTab extends PluginSettingTab {
 		const { containerEl } = this;
 		containerEl.empty();
 
-		// Settings for folder selection.
-		new Setting(containerEl).setName('Folders to scan').setHeading();
+		// Add the heading using Setting
+		new Setting(containerEl)
+			.setName('Folders to scan')
+			.setDesc('Select folders to scan for tags and daily habits')
+			.setHeading();
+
+		// Container for all folder inputs
 		const folderContainer = containerEl.createDiv('folder-container');
 
 		const renderFolderInputs = () => {
 			folderContainer.empty();
 			this.plugin.settings.folders.forEach((folder, index) => {
-				// Create a row for each folder input.
 				const folderDiv = folderContainer.createDiv({ cls: 'folder-input-row' });
-				// Create an inline container for the text input and remove button.
 				const inputContainer = folderDiv.createDiv({ cls: 'input-container' });
+
 				new Setting(inputContainer)
-					.setName(
-						index === 0
-							? 'Default daily note folder'
-							: `Folder ${index + 1}`
-					)
-					.setDesc('Folder to scan for tags and daily habits.')
 					.addText((text) =>
 						text
-							.setPlaceholder('Enter folder name')
+							.setPlaceholder(index === 0 ? 'Default daily note folder' : 'Enter folder name')
 							.setValue(folder)
 							.onChange(async (value) => {
 								this.plugin.settings.folders[index] = value;
 								await this.plugin.saveSettings();
 							})
 					);
-				// For additional folders (not the default), add a remove button.
+
 				if (index > 0) {
 					const removeBtn = inputContainer.createEl('button', { text: '×' });
 					removeBtn.addClass('small-remove-button');
@@ -132,12 +130,39 @@ class NoteMetricsSettingTab extends PluginSettingTab {
 
 		renderFolderInputs();
 
-		containerEl
-			.createEl('button', { text: 'Add folder' })
-			.addEventListener('click', async () => {
-				this.plugin.settings.folders.push('');
-				await this.plugin.saveSettings();
-				renderFolderInputs();
-			});
+		const addButton = containerEl.createEl('button', { text: 'Add folder' });
+		addButton.addClass('add-folder-button');
+		addButton.addEventListener('click', async () => {
+			this.plugin.settings.folders.push('');
+			await this.plugin.saveSettings();
+			renderFolderInputs();
+		});
+
+		// Add donation section
+		containerEl.createEl('hr');
+
+		new Setting(containerEl)
+			.setName('Support the development')
+			.setDesc('If you find this plugin helpful, consider supporting its development')
+			.setHeading();
+
+		const donationButtons = containerEl.createDiv('donation-buttons');
+		donationButtons.addClass('donation-container');
+
+		const githubButton = donationButtons.createEl('button', {
+			text: 'GitHub Sponsors',
+			cls: 'donation-button github-sponsor'
+		});
+		githubButton.addEventListener('click', () => {
+			window.open('https://github.com/sponsors/Andre-Diamond');
+		});
+
+		const buyMeACoffeeButton = donationButtons.createEl('button', {
+			text: 'Buy Me a Coffee',
+			cls: 'donation-button buymeacoffee'
+		});
+		buyMeACoffeeButton.addEventListener('click', () => {
+			window.open('https://www.buymeacoffee.com/signius');
+		});
 	}
 }
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "note-metrics",
 	"name": "Daily Note Metrics",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"minAppVersion": "0.15.0",
 	"description": "Parses the tags in your Daily Notes to create interactive charts in a dashboard view.",
 	"author": "Andre-Diamond",
diff --git a/src/views/DashboardView.ts b/src/views/DashboardView.ts
@@ -17,6 +17,10 @@ export class DashboardView extends ItemView {
 		return VIEW_TYPE_DASHBOARD;
 	}
 
+	getIcon(): string {
+		return "bar-chart";
+	}
+
 	getDisplayText(): string {
 		return "Daily note dashboard";
 	}
@@ -80,6 +84,7 @@ export class DashboardView extends ItemView {
 			// Checkbox Habit Chart: Grouped by habit (only if data exists).
 			const habits = Object.keys(periodData.checkboxHabits).sort((a, b) => a.localeCompare(b));
 			if (habits.length > 0) {
+				checkboxChartContainer.createEl('h3', { text: "Habits" });
 				const counts = habits.map(habit => periodData.checkboxHabits[habit]);
 				const checkboxChartData = {
 					labels: habits,
diff --git a/styles.css b/styles.css
@@ -1,57 +1,101 @@
 .chart-container {
-	width: 100%;
-	height: 400px;
-	position: relative;
-	margin-top: 20px;
+  width: 100%;
+  height: 400px;
+  position: relative;
+  margin-top: 20px;
 }
 
 .refresh-button {
-  background-color: #4CAF50; 
+  background-color: #4CAF50;
   color: white;
   padding: 8px 16px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
-  margin-left: 25px; 
+  margin-left: 25px;
   position: relative;
-  top: 1px; 
+  top: 1px;
 }
 
 .refresh-button:hover {
   background-color: #45a049;
 }
 
+.folder-container {
+  margin-top: 12px;
+  margin-bottom: 24px;
+}
+
+.folder-input-row {
+  margin-bottom: 8px;
+}
+
 .input-container {
-	display: flex;
-	align-items: center;
-	gap: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
+.input-container .setting-item {
+  border: none;
+  padding: 0;
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.input-container .setting-item-info {
+  display: none;
 }
 
-.input-container input {
-	flex-grow: 1;
+.input-container .setting-item-control {
+  flex-grow: 1;
+  padding: 0;
 }
 
 .small-remove-button {
-	background: transparent;
-	border: none;
-	color: var(--text-muted);
-	font-size: 24px; 
-	cursor: pointer;
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 32px;
-	height: 32px;
-	padding: 0;
-	padding-bottom: 6px;
-	margin-bottom: 12px;
-	line-height: 1;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-muted);
+  font-size: 18px;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 4px;
+  transition: all 0.2s ease;
 }
 
 .small-remove-button:hover {
-	color: var(--interactive-accent);
+  color: var(--text-error);
+  border-color: var(--text-error);
+}
+
+.folder-settings-header {
+  margin-bottom: 12px;
+  color: var(--text-normal);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.add-folder-button {
+  background: var(--interactive-accent);
+  color: var(--text-on-accent);
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s ease;
+}
+
+.add-folder-button:hover {
+  background: var(--interactive-accent-hover);
 }
 
 @media (max-width: 480px) {
@@ -60,15 +104,15 @@
     font-size: 12px;
     margin-left: 10px;
   }
-  
+
   .input-container {
     flex-wrap: wrap;
   }
-  
+
   .input-container input {
     width: 100%;
   }
-  
+
   .small-remove-button {
     width: 28px;
     height: 28px;
@@ -79,3 +123,69 @@
     align-self: center;
   }
 }
+
+.period-type-selector,
+.period-selector {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 16px;
+  padding: 6px 32px 6px 12px;
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--text-normal);
+  background-color: var(--background-primary);
+  cursor: pointer;
+  margin-right: 12px;
+  min-width: 120px;
+}
+
+.period-type-selector:hover,
+.period-selector:hover {
+  border-color: var(--interactive-accent);
+}
+
+.period-type-selector:focus,
+.period-selector:focus {
+  outline: none;
+  border-color: var(--interactive-accent);
+  box-shadow: 0 0 0 2px var(--background-modifier-border);
+}
+
+.donation-container {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.donation-button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.github-sponsor {
+  background-color: #db61a2;
+  color: white;
+  border: none;
+}
+
+.github-sponsor:hover {
+  background-color: #bf4b8a;
+}
+
+.buymeacoffee {
+  background-color: #ffdd00;
+  color: #000000;
+  border: none;
+}
+
+.buymeacoffee:hover {
+  background-color: #e5c700;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"id": "note-metrics",`
`3`	`3`	`"name": "Daily Note Metrics",`
`4`		`- "version": "1.1.0",`
	`4`	`+ "version": "1.1.1",`
`5`	`5`	`"minAppVersion": "0.15.0",`
`6`	`6`	`"description": "Parses the tags in your Daily Notes to create interactive charts in a dashboard view.",`
`7`	`7`	`"author": "Andre-Diamond",`