From 8c4734a1220fa58a2d8ffdce802568759002604a Mon Sep 17 00:00:00 2001
From: Skitty1238 <157652284+Skitty1238@users.noreply.github.com>
Date: Fri, 6 Jun 2025 12:04:59 -0400
Subject: fixed task node styling, and added intermediary syncing... state to
 sync button

---
 src/client/views/nodes/TaskBox.scss | 10 ++++++++++
 src/client/views/nodes/TaskBox.tsx  | 27 ++++++++++++++++-----------
 2 files changed, 26 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
index 071fe1f7c..e129e75d1 100644
--- a/src/client/views/nodes/TaskBox.scss
+++ b/src/client/views/nodes/TaskBox.scss
@@ -82,6 +82,8 @@ input[type='datetime-local'] {
 }
 
 .task-manager-google {
+    align-self: flex-start;
+    width: auto;
     font-size: 0.85rem;
     padding: 6px 12px;
     border-radius: 6px;
@@ -105,3 +107,11 @@ input[type='datetime-local'] {
         pointer-events: none;
       }
 }
+
+.task-box-blur-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
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>
-- 
cgit v1.2.3-70-g09d2