Add button and command to upload active file

src/main.ts

@@ -1,4 +1,4 @@
-import { EventRef, Plugin } from "obsidian";
+import { EventRef, Plugin, FileView } from "obsidian";
 import { GitHubSyncSettings, DEFAULT_SETTINGS } from "./settings/settings";
 import GithubClient from "./github/client";
 import GitHubSyncSettingsTab from "./settings/tab";
@@ -19,6 +19,7 @@ export default class GitHubSyncPlugin extends Plugin {
   statusBarItem: HTMLElement | null = null;
   downloadAllRibbonIcon: HTMLElement | null = null;
   uploadModifiedFilesRibbonIcon: HTMLElement | null = null;
+  uploadCurrentFileRibbonIcon: HTMLElement | null = null;
   uploadAllFilesRibbonIcon: HTMLElement | null = null;
 
   activeLeafChangeListener: EventRef | null = null;
@@ -63,6 +64,10 @@ export default class GitHubSyncPlugin extends Plugin {
         this.showUploadModifiedFilesRibbonIcon();
       }
 
+      if (this.settings.showUploadActiveFileRibbonButton) {
+        this.showUploadActiveFileRibbonIcon();
+      }
+
       if (this.settings.showUploadAllFilesRibbonButton) {
         this.showUploadAllFilesRibbonIcon();
       }
@@ -80,10 +85,18 @@ export default class GitHubSyncPlugin extends Plugin {
       id: "upload-modified-files",
       name: "Upload modified files to GitHub",
       repeatable: false,
-      icon: "arrow-up",
+      icon: "refresh-cw",
       callback: async () => await this.uploadModifiedFiles(),
     });
 
+    this.addCommand({
+      id: "upload-active-file",
+      name: "Upload active file to GitHub",
+      repeatable: false,
+      icon: "arrow-up",
+      callback: async () => await this.uploadActiveFile(),
+    });
+
     this.addCommand({
       id: "upload-all-files",
       name: "Upload all files to GitHub",
@@ -143,6 +156,21 @@ export default class GitHubSyncPlugin extends Plugin {
     this.updateStatusBarItem();
   }
 
+  private async uploadActiveFile() {
+    const activeView = this.app.workspace.getActiveViewOfType(FileView);
+    if (!activeView) {
+      return;
+    }
+    const activeFile = activeView.file;
+    if (!activeFile) {
+      return;
+    }
+    // TODO: Remove the file from eventsListener if it's there
+    // TODO: Upload file
+    // TODO: Update SHA
+    this.updateStatusBarItem();
+  }
+
   /**
    * Opens dialog to upload all file in the tracked folder.
    * This doesn't take into account the state of the files and uploads
@@ -260,7 +288,7 @@ export default class GitHubSyncPlugin extends Plugin {
       return;
     }
     this.uploadModifiedFilesRibbonIcon = this.addRibbonIcon(
-      "arrow-up",
+      "refresh-cw",
       "Upload modified files to GitHub",
       async () => await this.uploadModifiedFiles(),
     );
@@ -271,6 +299,23 @@ export default class GitHubSyncPlugin extends Plugin {
     this.uploadModifiedFilesRibbonIcon = null;
   }
 
+  showUploadActiveFileRibbonIcon() {
+    if (this.uploadCurrentFileRibbonIcon) {
+      return;
+    }
+
+    this.uploadCurrentFileRibbonIcon = this.addRibbonIcon(
+      "arrow-up",
+      "Upload current file to GitHub",
+      async () => await this.uploadActiveFile(),
+    );
+  }
+
+  hideUploadActiveFileRibbonIcon() {
+    this.uploadCurrentFileRibbonIcon?.remove();
+    this.uploadCurrentFileRibbonIcon = null;
+  }
+
   showUploadAllFilesRibbonIcon() {
     if (this.uploadAllFilesRibbonIcon) {
       return;

src/settings/settings.ts

@@ -12,6 +12,7 @@ export interface GitHubSyncSettings {
   showStatusBarItem: boolean;
   showDownloadRibbonButton: boolean;
   showUploadModifiedFilesRibbonButton: boolean;
+  showUploadActiveFileRibbonButton: boolean;
   showUploadAllFilesRibbonButton: boolean;
 }
 
@@ -29,5 +30,6 @@ export const DEFAULT_SETTINGS: GitHubSyncSettings = {
   showStatusBarItem: true,
   showDownloadRibbonButton: true,
   showUploadModifiedFilesRibbonButton: true,
+  showUploadActiveFileRibbonButton: true,
   showUploadAllFilesRibbonButton: true,
 };

src/settings/tab.ts

@@ -251,6 +251,23 @@ export default class GitHubSyncSettingsTab extends PluginSettingTab {
           });
       });
 
+    new Setting(containerEl)
+      .setName("Show upload active file button")
+      .setDesc("Displays a ribbon button to upload active file")
+      .addToggle((toggle) => {
+        toggle
+          .setValue(this.plugin.settings.showUploadActiveFileRibbonButton)
+          .onChange((value) => {
+            this.plugin.settings.showUploadActiveFileRibbonButton = value;
+            this.plugin.saveSettings();
+            if (value) {
+              this.plugin.showUploadActiveFileRibbonIcon();
+            } else {
+              this.plugin.hideUploadActiveFileRibbonIcon();
+            }
+          });
+      });
+
     new Setting(containerEl)
       .setName("Show upload all files button")
       .setDesc("Displays a ribbon button to upload all files")