notice: add progress notice for git operations

- Add ProgressNotice class with loading animation
- Show spinning indicator during pull/push/commit
- Transition to success/fail state when complete
- Add i18n strings for progress messages

Author: whtiehack

main.js

@@ -114,6 +114,11 @@ type Translations = {
 	conflictStatusDesc: string;
 	resolveConflictButton: string;
 
+	// Notices - progress
+	noticePulling: string;
+	noticePushing: string;
+	noticeCommitting: string;
+
 	// Notices
 	noticeNoChanges: string;
 	noticeCommitted: (count: number) => string;
@@ -242,6 +247,10 @@ const en: Translations = {
 	conflictStatusDesc: "Please resolve conflicts manually, then click the button below.",
 	resolveConflictButton: "Mark as resolved",
 
+	noticePulling: "GitAutoCommit: Pulling...",
+	noticePushing: "GitAutoCommit: Pushing...",
+	noticeCommitting: "GitAutoCommit: Committing...",
+
 	noticeNoChanges: "GitAutoCommit: No changes to commit.",
 	noticeCommitted: (count) => `GitAutoCommit: Committed ${count} file(s).`,
 	noticePushed: "GitAutoCommit: Pushed to remote.",
@@ -369,6 +378,10 @@ const zhCN: Translations = {
 	conflictStatusDesc: "请手动解决冲突后，点击下方按钮。",
 	resolveConflictButton: "标记为已解决",
 
+	noticePulling: "GitAutoCommit: 正在拉取...",
+	noticePushing: "GitAutoCommit: 正在推送...",
+	noticeCommitting: "GitAutoCommit: 正在提交...",
+
 	noticeNoChanges: "GitAutoCommit: 没有可提交的更改。",
 	noticeCommitted: (count) => `GitAutoCommit: 已提交 ${count} 个文件。`,
 	noticePushed: "GitAutoCommit: 已推送到远程仓库。",

src/i18n.ts

@@ -5,6 +5,7 @@ import { renderTemplate } from "./template";
 import { t } from "./i18n";
 import { RevertConfirmModal } from "./modals";
 import { GitStatusBadgeManager } from "./statusBadges";
+import { ProgressNotice } from "./notice";
 
 export default class AutoGitPlugin extends Plugin {
 	settings: AutoGitSettings = DEFAULT_SETTINGS;
@@ -235,6 +236,8 @@ export default class AutoGitPlugin extends Plugin {
 				return false;
 			}
 
+			const progress = new ProgressNotice(t().noticeCommitting);
+
 			const now = new Date();
 			const subject = renderTemplate(this.settings.commitTemplate, {
 				date: now.toISOString().slice(0, 10),
@@ -251,17 +254,22 @@ export default class AutoGitPlugin extends Plugin {
 				message = subject + "\n\n" + fileList;
 			}
 
-			await commitAll(cwd, gitPath, message);
-			committed = true;
-			new Notice(t().noticeCommitted(changedFiles.length));
+			try {
+				await commitAll(cwd, gitPath, message);
+				committed = true;
+				progress.succeed(t().noticeCommitted(changedFiles.length));
+			} catch (e) {
+				progress.fail(t().noticeAutoGitError((e as Error).message));
+				throw e;
+			}
 
 			if (this.settings.autoPush) {
 				await this.doPush();
 			}
 
 			void this.statusBadges?.refresh();
-		} catch (e) {
-			new Notice(t().noticeAutoGitError((e as Error).message));
+		} catch {
+			// Error already handled in progress.fail
 		} finally {
 			this.isCommitting = false;
 			if (this.pendingRerun) {
@@ -273,12 +281,13 @@ export default class AutoGitPlugin extends Plugin {
 	}
 
 	async doPush() {
+		const progress = new ProgressNotice(t().noticePushing);
 		try {
 			const cwd = this.getVaultPath();
 			await push(cwd, this.settings.gitPath);
-			new Notice(t().noticePushed);
+			progress.succeed(t().noticePushed);
 		} catch (e) {
-			new Notice(t().noticePushFailed((e as Error).message));
+			progress.fail(t().noticePushFailed((e as Error).message));
 		}
 	}
 
@@ -389,19 +398,20 @@ export default class AutoGitPlugin extends Plugin {
 			return;
 		}
 
+		const progress = new ProgressNotice(t().noticePulling);
 		try {
 			const cwd = this.getVaultPath();
 			const result = await pull(cwd, this.settings.gitPath);
 
 			if (result.hasConflicts) {
 				await this.checkConflicts();
-				new Notice(t().noticeConflictDetected);
+				progress.fail(t().noticeConflictDetected);
 			} else if (result.success) {
-				new Notice(t().noticePulled);
+				progress.succeed(t().noticePulled);
 				void this.statusBadges?.refresh();
 			}
 		} catch (e) {
-			new Notice(t().noticePullFailed((e as Error).message));
+			progress.fail(t().noticePullFailed((e as Error).message));
 		}
 	}
 

src/main.ts

@@ -0,0 +1,25 @@
+import { Notice } from "obsidian";
+
+/** Notice with loading spinner that transitions to success/fail state */
+export class ProgressNotice {
+	private notice: Notice;
+
+	constructor(message: string) {
+		this.notice = new Notice(message, 0);
+		this.notice.messageEl.parentElement?.addClass("is-loading");
+	}
+
+	succeed(message: string, timeout = 3000) {
+		const el = this.notice.messageEl.parentElement;
+		el?.removeClass("is-loading");
+		el?.addClass("mod-success");
+		this.notice.setMessage(message);
+		window.setTimeout(() => this.notice.hide(), timeout);
+	}
+
+	fail(message: string, timeout = 5000) {
+		this.notice.messageEl.parentElement?.removeClass("is-loading");
+		this.notice.setMessage(message);
+		window.setTimeout(() => this.notice.hide(), timeout);
+	}
+}