feat: add About tab to settings with version and plugin description

src/settings-tab.ts

@@ -1,11 +1,11 @@
-import { Setting, PluginSettingTab, App, Plugin } from 'obsidian';
+import { Setting, PluginSettingTab, App, Plugin, setIcon } from 'obsidian';
 import { WaypointSettings, DEFAULT_SETTINGS, PeriodNoteSettings } from 'src/settings';
 
 export class WaypointSettingTab extends PluginSettingTab {
 	private plugin: Plugin;
 	private settings: WaypointSettings;
 	private onSettingsChange: () => void;
-	private activeTab: 'calendar' | 'periodic' | 'recent' | 'display' = 'calendar';
+	private activeTab: 'calendar' | 'periodic' | 'recent' | 'display' | 'about' = 'calendar';
 
 	constructor(app: App, plugin: Plugin, settings: WaypointSettings, onSettingsChange: () => void) {
 		super(app, plugin);
@@ -25,6 +25,7 @@ export class WaypointSettingTab extends PluginSettingTab {
 			{ key: 'periodic' as const, label: 'Periodic Notes' },
 			{ key: 'recent' as const, label: 'Recent Files' },
 			{ key: 'display' as const, label: 'Display' },
+			{ key: 'about' as const, label: 'About' },
 		];
 
 		for (const tab of tabs) {
@@ -53,6 +54,9 @@ export class WaypointSettingTab extends PluginSettingTab {
 			case 'display':
 				this.renderDisplayTab(tabContent);
 				break;
+			case 'about':
+				this.renderAboutTab(tabContent);
+				break;
 		}
 	}
 
@@ -297,4 +301,52 @@ export class WaypointSettingTab extends PluginSettingTab {
 		await (this.plugin as any).saveSettings();
 		this.onSettingsChange();
 	}
+
+	// ═══════════════════════════════
+	//  About tab
+	// ═══════════════════════════════
+
+	private renderAboutTab(container: HTMLElement): void {
+		const version = this.plugin.manifest.version;
+
+		const header = container.createDiv();
+		header.style.display = 'flex';
+		header.style.alignItems = 'center';
+		header.style.gap = '12px';
+		header.style.marginBottom = '16px';
+
+		const icon = header.createDiv();
+		icon.style.display = 'flex';
+		icon.style.alignItems = 'center';
+		icon.style.justifyContent = 'center';
+		icon.style.width = '48px';
+		icon.style.height = '48px';
+		icon.style.borderRadius = '12px';
+		icon.style.background = 'var(--interactive-accent)';
+		icon.style.color = 'var(--text-on-accent)';
+		icon.style.fontSize = '24px';
+		setIcon(icon, 'compass');
+
+		const titleGroup = header.createDiv();
+		const title = titleGroup.createEl('h2', { text: 'Waypoint Sidebar' });
+		title.style.margin = '0';
+		title.style.lineHeight = '1.2';
+		const subtitle = titleGroup.createDiv({ text: `v${version}` });
+		subtitle.style.color = 'var(--text-muted)';
+		subtitle.style.fontSize = 'var(--font-ui-small)';
+
+		const desc = container.createDiv();
+		desc.style.marginBottom = '20px';
+		desc.style.lineHeight = '1.6';
+		desc.style.color = 'var(--text-normal)';
+		desc.innerHTML = [
+			`<p><strong>Waypoint</strong> is a sidebar plugin that brings three essential panels into one view:</p>`,
+			`<ul style="padding-left: 20px; margin: 8px 0;">`,
+			`<li><strong>Calendar</strong> — a monthly grid for your periodic notes (daily, weekly, monthly, quarterly, yearly). Click any day, week, or month to open or create the corresponding note.</li>`,
+			`<li><strong>Recent Files</strong> — a list of recently opened files with type filtering, drag-and-drop, and right-click actions.</li>`,
+			`<li><strong>Bookmarks</strong> — custom bookmarks with icons, groups, nesting, and drag-and-drop reordering. Separate from Obsidian's native bookmarks.</li>`,
+			`</ul>`,
+			`<p style="color: var(--text-muted); font-size: var(--font-ui-small);">Made by Olivier. Licensed under MIT.</p>`,
+		].join('\n');
+	}
 }