Add ribbon button with Git actions menu (pull, commit, push, revert)

Author: whtiehack

main.js

@@ -144,6 +144,11 @@ export async function setRemoteUrl(cwd: string, gitPath: string, url: string): P
 	}
 }
 
+export async function revertAll(cwd: string, gitPath: string): Promise<void> {
+	await runGit({ cwd, gitPath, args: ["checkout", "--", "."] });
+	await runGit({ cwd, gitPath, args: ["clean", "-fd"] });
+}
+
 export type FileStatus = "M" | "A" | "R" | "U" | "?" | "";
 
 export async function getFileStatuses(cwd: string, gitPath: string): Promise<Map<string, FileStatus>> {

src/git.ts

@@ -33,6 +33,16 @@ type Translations = {
 	showStatusBadgeName: string;
 	showStatusBadgeDesc: string;
 
+	showRibbonButtonName: string;
+	showRibbonButtonDesc: string;
+	ribbonMenuPull: string;
+	ribbonMenuCommit: string;
+	ribbonMenuPush: string;
+	ribbonMenuCommitAndPush: string;
+	ribbonMenuRevertAll: string;
+	noticeReverted: string;
+	noticeRevertFailed: (msg: string) => string;
+
 	// Repository
 	repoStatusName: string;
 	repoNotInitialized: string;
@@ -108,6 +118,16 @@ const en: Translations = {
 	showStatusBadgeName: "Show git status in file explorer",
 	showStatusBadgeDesc: "Display colored dots next to changed files and folders.",
 
+	showRibbonButtonName: "Show ribbon button",
+	showRibbonButtonDesc: "Add a ribbon icon for quick Git actions.",
+	ribbonMenuPull: "Pull",
+	ribbonMenuCommit: "Commit",
+	ribbonMenuPush: "Push",
+	ribbonMenuCommitAndPush: "Commit and push",
+	ribbonMenuRevertAll: "Revert all changes",
+	noticeReverted: "GitAutoCommit: All changes reverted.",
+	noticeRevertFailed: (msg) => `GitAutoCommit: Revert failed - ${msg}`,
+
 	repoStatusName: "Repository status",
 	repoNotInitialized: "Not a git repository",
 	repoInitialized: "Git repository initialized",
@@ -180,6 +200,16 @@ const zhCN: Translations = {
 	showStatusBadgeName: "在文件列表显示 Git 状态",
 	showStatusBadgeDesc: "在变动的文件和文件夹旁显示彩色圆点。",
 
+	showRibbonButtonName: "显示侧边栏按钮",
+	showRibbonButtonDesc: "添加快捷 Git 操作按钮。",
+	ribbonMenuPull: "拉取",
+	ribbonMenuCommit: "提交",
+	ribbonMenuPush: "推送",
+	ribbonMenuCommitAndPush: "提交并推送",
+	ribbonMenuRevertAll: "还原所有修改",
+	noticeReverted: "GitAutoCommit: 已还原所有修改。",
+	noticeRevertFailed: (msg) => `GitAutoCommit: 还原失败 - ${msg}`,
+
 	repoStatusName: "仓库状态",
 	repoNotInitialized: "尚未初始化为 Git 仓库",
 	repoInitialized: "Git 仓库已初始化",

src/i18n.ts

@@ -1,6 +1,6 @@
-import { EventRef, Notice, Platform, Plugin, TAbstractFile, TFile, FileSystemAdapter } from "obsidian";
+import { EventRef, Menu, Notice, Platform, Plugin, TAbstractFile, TFile, FileSystemAdapter } from "obsidian";
 import { AutoGitSettings, AutoGitSettingTab, DEFAULT_SETTINGS } from "./settings";
-import { getChangedFiles, commitAll, push, pull, getFileStatuses, getConflictFiles, markConflictsResolved, FileStatus } from "./git";
+import { getChangedFiles, commitAll, push, pull, getFileStatuses, getConflictFiles, markConflictsResolved, revertAll, FileStatus } from "./git";
 import { renderTemplate } from "./template";
 import { t } from "./i18n";
 
@@ -16,10 +16,12 @@ export default class AutoGitPlugin extends Plugin {
 	private conflictFiles: Set<string> = new Set();
 	private _hasConflicts = false;
 	private resolveConflictCommand: { id: string } | null = null;
+	private ribbonIconEl: HTMLElement | null = null;
 
 	async onload() {
 		await this.loadSettings();
 		this.addSettingTab(new AutoGitSettingTab(this.app, this));
+		this.updateRibbonButton();
 
 		this.addCommand({
 			id: "commit-now",
@@ -70,6 +72,10 @@ export default class AutoGitPlugin extends Plugin {
 		if (this.statusRefreshInterval) {
 			window.clearInterval(this.statusRefreshInterval);
 		}
+		if (this.ribbonIconEl) {
+			this.ribbonIconEl.remove();
+			this.ribbonIconEl = null;
+		}
 	}
 
 	async loadSettings() {
@@ -230,6 +236,59 @@ export default class AutoGitPlugin extends Plugin {
 		}
 	}
 
+	updateRibbonButton() {
+		if (this.settings.showRibbonButton && !Platform.isMobileApp) {
+			if (!this.ribbonIconEl) {
+				this.ribbonIconEl = this.addRibbonIcon("git-branch", "Git", (evt) => {
+					this.showRibbonMenu(evt);
+				});
+			}
+		} else if (this.ribbonIconEl) {
+			this.ribbonIconEl.remove();
+			this.ribbonIconEl = null;
+		}
+	}
+
+	private showRibbonMenu(evt: MouseEvent) {
+		const i18n = t();
+		const menu = new Menu();
+
+		menu.addItem((item) =>
+			item.setTitle(i18n.ribbonMenuPull).setIcon("download").onClick(() => void this.doPull())
+		);
+		menu.addItem((item) =>
+			item.setTitle(i18n.ribbonMenuCommit).setIcon("check").onClick(() => void this.runCommit("manual"))
+		);
+		menu.addItem((item) =>
+			item.setTitle(i18n.ribbonMenuPush).setIcon("upload").onClick(() => void this.doPush())
+		);
+		menu.addItem((item) =>
+			item.setTitle(i18n.ribbonMenuCommitAndPush).setIcon("upload").onClick(async () => {
+				const committed = await this.runCommit("manual");
+				if (committed) {
+					await this.doPush();
+				}
+			})
+		);
+		menu.addSeparator();
+		menu.addItem((item) =>
+			item.setTitle(i18n.ribbonMenuRevertAll).setIcon("rotate-ccw").onClick(() => void this.doRevert())
+		);
+
+		menu.showAtMouseEvent(evt);
+	}
+
+	private async doRevert() {
+		try {
+			const cwd = this.getVaultPath();
+			await revertAll(cwd, this.settings.gitPath);
+			new Notice(t().noticeReverted);
+			this.refreshStatusBadges();
+		} catch (e) {
+			new Notice(t().noticeRevertFailed((e as Error).message));
+		}
+	}
+
 	private async doPull() {
 		if (Platform.isMobileApp) {
 			new Notice(t().noticeMobileNotSupported);

src/main.ts

@@ -13,6 +13,7 @@ export interface AutoGitSettings {
 	gitPath: string;
 	ignoreObsidianDir: boolean;
 	showStatusBadge: boolean;
+	showRibbonButton: boolean;
 }
 
 export const DEFAULT_SETTINGS: AutoGitSettings = {
@@ -25,6 +26,7 @@ export const DEFAULT_SETTINGS: AutoGitSettings = {
 	gitPath: "git",
 	ignoreObsidianDir: true,
 	showStatusBadge: true,
+	showRibbonButton: true,
 };
 
 export class AutoGitSettingTab extends PluginSettingTab {
@@ -144,6 +146,17 @@ export class AutoGitSettingTab extends PluginSettingTab {
 				})
 			);
 
+		new Setting(containerEl)
+			.setName(i18n.showRibbonButtonName)
+			.setDesc(i18n.showRibbonButtonDesc)
+			.addToggle((toggle) =>
+				toggle.setValue(this.plugin.settings.showRibbonButton).onChange(async (value) => {
+					this.plugin.settings.showRibbonButton = value;
+					await this.plugin.saveSettings();
+					this.plugin.updateRibbonButton();
+				})
+			);
+
 		new Setting(containerEl)
 			.setName(i18n.gitPathName)
 			.setDesc(i18n.gitPathDesc)