fixed task node styling, and added intermediary syncing... state to sync button

1 files changed, 16 insertions, 11 deletions

diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
index 6c966a59d..8e269a21a 100644
--- a/src/client/views/nodes/TaskBox.tsx
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -19,6 +19,7 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
     _heightDisposer?: IReactionDisposer;
     _widthDisposer?: IReactionDisposer;
     @observable _needsSync = false; // Whether the task needs to be synced with Google Tasks
+    @observable _syncing = false; // Whether the task is currently syncing with Google Tasks
 
     // contains the last synced task information
     private _lastSyncedTask: {
@@ -236,6 +237,7 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const token = await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
         if (!token) return;
 
+        this._syncing = true;
         const doc = this.Document;
         const taskTitle = StrCast(doc.title);
         const taskDesc = StrCast(doc[this.fieldKey]);
@@ -268,6 +270,8 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
         } else {
             console.warn('❌ Auto-sync failed:', result);
         }
+
+        this._syncing = false;
     };
 
     /**
@@ -442,8 +446,8 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     return;
                 }
 
+                this._syncing = true;
                 const body = this.buildGoogleTaskBody();
-
                 const isUpdate = !!doc.$googleTaskId;
                 const endpoint = isUpdate ? `/googleTasks/${doc.$googleTaskId}` : '/googleTasks/create';
                 const method = isUpdate ? 'PATCH' : 'POST';
@@ -479,6 +483,7 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 console.error('Fetch error:', err);
                 alert('❌ Task syncing failed.');
             }
+            this._syncing = false;
         };
 
         return (
@@ -520,18 +525,18 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             <input type="checkbox" checked={isCompleted} onChange={this.toggleComplete} />
                             Complete
                         </label>
-
-                        <button
-                            className="task-manager-google"
-                            disabled={!this.needsSync}
-                            onClick={event => {
-                                event.preventDefault();
-                                handleGoogleTaskSync();
-                            }}>
-                            Sync to Google
-                        </button>
                     </div>
 
+                    <button
+                        className="task-manager-google"
+                        disabled={!this.needsSync}
+                        onClick={event => {
+                            event.preventDefault();
+                            handleGoogleTaskSync();
+                        }}>
+                        {this._syncing ? 'Syncing...' : (this.needsSync ? 'Sync to Google' : 'Synced to Google')}
+                    </button>
+
                     {!allDay && (
                         <div className="task-manager-times" style={{ opacity: isCompleted ? 0.7 : 1 }}>
                             <label>