Add git status badges in file explorer

Author: whtiehack

.github/workflows/release.yml

@@ -32,4 +32,4 @@ jobs:
           gh release create "$tag" \
             --title="$tag" \
             --draft \
-            main.js manifest.json
+            main.js manifest.json styles.css

main.js

@@ -99,3 +99,51 @@ export async function setRemoteUrl(cwd: string, gitPath: string, url: string): P
 		await runGit({ cwd, gitPath, args: ["remote", "add", "origin", url] });
 	}
 }
+
+export type FileStatus = "M" | "A" | "D" | "R" | "?" | "";
+
+export async function getFileStatuses(cwd: string, gitPath: string): Promise<Map<string, FileStatus>> {
+	const statusMap = new Map<string, FileStatus>();
+
+	try {
+		const stdout = await runGit({ cwd, gitPath, args: ["status", "--porcelain=v1", "-z"] });
+		if (!stdout) return statusMap;
+
+		const parts = stdout.split("\0").filter(Boolean);
+
+		for (let i = 0; i < parts.length; i++) {
+			const entry = parts[i];
+			const xy = entry.slice(0, 2);
+			const filePath = entry.slice(3);
+
+			// Determine status: X is staged, Y is unstaged
+			// We show the most relevant status
+			let status: FileStatus = "";
+
+			if (xy === "??" || xy.includes("?")) {
+				status = "A"; // Untracked = new file
+			} else if (xy.includes("A")) {
+				status = "A"; // Added
+			} else if (xy.includes("D")) {
+				status = "D"; // Deleted
+			} else if (xy.includes("R")) {
+				status = "R"; // Renamed
+			} else if (xy.includes("M") || xy.includes("U")) {
+				status = "M"; // Modified
+			}
+
+			if (filePath && status) {
+				statusMap.set(filePath, status);
+			}
+
+			// Handle rename (has extra path)
+			if (xy.startsWith("R") || xy.startsWith("C")) {
+				i++;
+			}
+		}
+	} catch {
+		// Not a git repo or git error
+	}
+
+	return statusMap;
+}

src/git.ts

@@ -26,6 +26,9 @@ type Translations = {
 	includeFileListName: string;
 	includeFileListDesc: string;
 
+	showStatusBadgeName: string;
+	showStatusBadgeDesc: string;
+
 	// Repository
 	repoStatusName: string;
 	repoNotInitialized: string;
@@ -75,6 +78,9 @@ const en: Translations = {
 	includeFileListName: "Include file list in commit body",
 	includeFileListDesc: "List changed files in commit message body, one per line.",
 
+	showStatusBadgeName: "Show git status in file explorer",
+	showStatusBadgeDesc: "Display M (modified) / A (new) badges next to files.",
+
 	repoStatusName: "Repository status",
 	repoNotInitialized: "Not a git repository",
 	repoInitialized: "Git repository initialized",
@@ -122,6 +128,9 @@ const zhCN: Translations = {
 	includeFileListName: "在提交正文中包含文件列表",
 	includeFileListDesc: "在提交消息正文中列出变动的文件，每行一个。",
 
+	showStatusBadgeName: "在文件列表显示 Git 状态",
+	showStatusBadgeDesc: "在文件旁显示 M（已修改）/ A（新文件）标记。",
+
 	repoStatusName: "仓库状态",
 	repoNotInitialized: "尚未初始化为 Git 仓库",
 	repoInitialized: "Git 仓库已初始化",

src/i18n.ts

@@ -1,6 +1,6 @@
 import { EventRef, Notice, Platform, Plugin, TAbstractFile, TFile, FileSystemAdapter } from "obsidian";
 import { AutoGitSettings, AutoGitSettingTab, DEFAULT_SETTINGS } from "./settings";
-import { getChangedFiles, commitAll, push } from "./git";
+import { getChangedFiles, commitAll, push, getFileStatuses, FileStatus } from "./git";
 import { renderTemplate } from "./template";
 import { t } from "./i18n";
 
@@ -11,6 +11,8 @@ export default class AutoGitPlugin extends Plugin {
 	private isCommitting = false;
 	private pendingRerun = false;
 	private vaultEventRefs: EventRef[] = [];
+	private statusRefreshInterval: number | null = null;
+	private currentStatuses: Map<string, FileStatus> = new Map();
 
 	async onload() {
 		await this.loadSettings();
@@ -34,11 +36,16 @@ export default class AutoGitPlugin extends Plugin {
 		});
 
 		this.setupVaultListeners();
+		this.setupStatusBadges();
 	}
 
 	onunload() {
 		this.clearDebounce();
 		this.removeVaultListeners();
+		this.clearStatusBadges();
+		if (this.statusRefreshInterval) {
+			window.clearInterval(this.statusRefreshInterval);
+		}
 	}
 
 	async loadSettings() {
@@ -81,6 +88,7 @@ export default class AutoGitPlugin extends Plugin {
 		if (this.shouldIgnore(file.path)) return;
 
 		this.scheduleCommit();
+		this.scheduleStatusRefresh();
 	}
 
 	private shouldIgnore(path: string): boolean {
@@ -164,6 +172,9 @@ export default class AutoGitPlugin extends Plugin {
 			if (this.settings.autoPush) {
 				await this.doPush();
 			}
+
+			// Refresh badges after commit
+			this.refreshStatusBadges();
 		} catch (e) {
 			new Notice(t().noticeAutoGitError((e as Error).message));
 		} finally {
@@ -185,4 +196,75 @@ export default class AutoGitPlugin extends Plugin {
 			new Notice(t().noticePushFailed((e as Error).message));
 		}
 	}
+
+	// Status badge functionality
+	private setupStatusBadges() {
+		if (Platform.isMobileApp || !this.settings.showStatusBadge) return;
+
+		// Initial refresh
+		this.refreshStatusBadges();
+
+		// Refresh every 5 seconds
+		this.statusRefreshInterval = window.setInterval(() => {
+			this.refreshStatusBadges();
+		}, 5000);
+	}
+
+	private scheduleStatusRefresh() {
+		if (!this.settings.showStatusBadge) return;
+		// Debounced refresh after file change
+		window.setTimeout(() => this.refreshStatusBadges(), 500);
+	}
+
+	refreshStatusBadges() {
+		if (!this.settings.showStatusBadge) {
+			this.clearStatusBadges();
+			return;
+		}
+
+		const cwd = this.getVaultPathSafe();
+		if (!cwd) return;
+
+		getFileStatuses(cwd, this.settings.gitPath).then((statuses) => {
+			this.currentStatuses = statuses;
+			this.updateBadgesInDOM();
+		});
+	}
+
+	private clearStatusBadges() {
+		document.querySelectorAll(".git-status-badge").forEach((el) => el.remove());
+		this.currentStatuses.clear();
+	}
+
+	private updateBadgesInDOM() {
+		// Remove old badges
+		document.querySelectorAll(".git-status-badge").forEach((el) => el.remove());
+
+		// Find file explorer items
+		const fileItems = document.querySelectorAll(".nav-file-title");
+
+		fileItems.forEach((item) => {
+			const pathAttr = item.getAttribute("data-path");
+			if (!pathAttr) return;
+
+			const status = this.currentStatuses.get(pathAttr);
+			if (!status) return;
+
+			const badge = document.createElement("span");
+			badge.className = "git-status-badge";
+			badge.textContent = status === "A" ? "A" : status;
+
+			if (status === "M") {
+				badge.classList.add("modified");
+			} else if (status === "A") {
+				badge.classList.add("added");
+			} else if (status === "D") {
+				badge.classList.add("deleted");
+			} else if (status === "R") {
+				badge.classList.add("renamed");
+			}
+
+			item.appendChild(badge);
+		});
+	}
 }

src/main.ts

@@ -11,6 +11,7 @@ export interface AutoGitSettings {
 	autoPush: boolean;
 	gitPath: string;
 	ignoreObsidianDir: boolean;
+	showStatusBadge: boolean;
 }
 
 export const DEFAULT_SETTINGS: AutoGitSettings = {
@@ -21,6 +22,7 @@ export const DEFAULT_SETTINGS: AutoGitSettings = {
 	autoPush: false,
 	gitPath: "git",
 	ignoreObsidianDir: true,
+	showStatusBadge: true,
 };
 
 export class AutoGitSettingTab extends PluginSettingTab {
@@ -113,6 +115,17 @@ export class AutoGitSettingTab extends PluginSettingTab {
 				})
 			);
 
+		new Setting(containerEl)
+			.setName(i18n.showStatusBadgeName)
+			.setDesc(i18n.showStatusBadgeDesc)
+			.addToggle((toggle) =>
+				toggle.setValue(this.plugin.settings.showStatusBadge).onChange(async (value) => {
+					this.plugin.settings.showStatusBadge = value;
+					await this.plugin.saveSettings();
+					this.plugin.refreshStatusBadges();
+				})
+			);
+
 		new Setting(containerEl)
 			.setName(i18n.gitPathName)
 			.setDesc(i18n.gitPathDesc)

src/settings.ts

@@ -0,0 +1,24 @@
+.git-status-badge {
+	font-size: 10px;
+	font-weight: bold;
+	margin-left: 4px;
+	padding: 0 3px;
+	border-radius: 3px;
+	font-family: monospace;
+}
+
+.git-status-badge.modified {
+	color: #e5c07b;
+}
+
+.git-status-badge.added {
+	color: #98c379;
+}
+
+.git-status-badge.deleted {
+	color: #e06c75;
+}
+
+.git-status-badge.renamed {
+	color: #61afef;
+}