Added in a button for syncing

apps/obsidian-plugin/build.mjs

@@ -0,0 +1,25 @@
+import { build } from "esbuild";
+import { rmSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+rmSync(path.join(__dirname, "main.js"), { force: true });
+rmSync(path.join(__dirname, "main.js.map"), { force: true });
+
+await build({
+  entryPoints: [path.join(__dirname, "src", "main.ts")],
+  bundle: true,
+  outfile: path.join(__dirname, "main.js"),
+  format: "cjs",
+  platform: "browser",
+  target: "es2020",
+  sourcemap: "inline",
+  external: ["obsidian"],
+  logLevel: "info",
+  treeShaking: true,
+  banner: {
+    js: '/* Obsidian plugin bundle: generated by apps/obsidian-plugin/build.mjs */'
+  }
+});

apps/obsidian-plugin/package.json

@@ -2,10 +2,10 @@
   "name": "@obsidian-sync/obsidian-plugin",
   "private": true,
   "version": "0.1.0",
-  "main": "dist/main.js",
+  "main": "main.js",
   "types": "dist/main.d.ts",
   "scripts": {
-    "build": "tsc -b",
+    "build": "node build.mjs",
     "typecheck": "tsc -b --pretty false"
   },
   "dependencies": {

apps/obsidian-plugin/src/main.ts

@@ -9,6 +9,8 @@ export default class ObsidianSyncPlugin extends Plugin {
 
   private syncService?: SyncService;
   private scheduledSyncHandle?: number;
+  private manualSyncStatusItem?: HTMLElement;
+  private isManualSyncRunning = false;
 
   async onload(): Promise<void> {
     await this.loadSettings();
@@ -28,7 +30,7 @@ export default class ObsidianSyncPlugin extends Plugin {
       id: "obsidian-sync-run-manual",
       name: "Run encrypted sync now",
       callback: async () => {
-        await this.syncService?.runManualSync();
+        await this.runManualSyncFromUi();
       }
     });
 
@@ -43,6 +45,8 @@ export default class ObsidianSyncPlugin extends Plugin {
       }
     });
 
+    this.addManualSyncControls();
+
     this.configureSyncSchedule();
     new Notice("Obsidian Sync loaded.");
   }
@@ -83,6 +87,51 @@ export default class ObsidianSyncPlugin extends Plugin {
     return this.syncService;
   }
 
+  private addManualSyncControls(): void {
+    const triggerManualSync = () => {
+      void this.runManualSyncFromUi();
+    };
+
+    this.addRibbonIcon("refresh-cw", "Run encrypted sync now", triggerManualSync);
+
+    const statusBarItem = this.addStatusBarItem();
+    statusBarItem.addClass("mod-clickable");
+    statusBarItem.onClickEvent(triggerManualSync);
+    this.manualSyncStatusItem = statusBarItem;
+    this.updateManualSyncControls();
+  }
+
+  private async runManualSyncFromUi(): Promise<void> {
+    if (this.isManualSyncRunning) {
+      new Notice("A manual sync is already running.");
+      return;
+    }
+
+    this.isManualSyncRunning = true;
+    this.updateManualSyncControls();
+
+    try {
+      await this.getSyncServiceOrThrow().runManualSync();
+    } finally {
+      this.isManualSyncRunning = false;
+      this.updateManualSyncControls();
+    }
+  }
+
+  private updateManualSyncControls(): void {
+    if (!this.manualSyncStatusItem) {
+      return;
+    }
+
+    const label = this.isManualSyncRunning ? "Syncing..." : "Sync now";
+    const tooltip = this.isManualSyncRunning ? "Encrypted sync is currently running" : "Run encrypted sync now";
+
+    this.manualSyncStatusItem.setText(label);
+    this.manualSyncStatusItem.setAttribute("aria-label", tooltip);
+    this.manualSyncStatusItem.setAttribute("title", tooltip);
+    this.manualSyncStatusItem.toggleClass("is-disabled", this.isManualSyncRunning);
+  }
+
   private configureSyncSchedule(): void {
     if (this.scheduledSyncHandle !== undefined) {
       window.clearInterval(this.scheduledSyncHandle);