From 645df1d00f953524c6da22103d26c38ae4331cd6 Mon Sep 17 00:00:00 2001
From: Skitty1238 <157652284+Skitty1238@users.noreply.github.com>
Date: Wed, 4 Jun 2025 13:59:34 -0400
Subject: partial google calendar task integration + fix with dark mode colors
 for task nodes so that text is still visible

---
 src/client/views/nodes/TaskBox.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/TaskBox.scss')

diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
index 0fcc2f955..6ef0c6454 100644
--- a/src/client/views/nodes/TaskBox.scss
+++ b/src/client/views/nodes/TaskBox.scss
@@ -6,6 +6,15 @@
     width: 100%;
     height: 100%;
     box-sizing: border-box;
+
+    input,
+    textarea,
+    select,
+    button {
+        background-color: #fff !important;
+        color: #000 !important;
+        border-color: #ccc !important;
+    }
 }
 
 .task-manager-title {
@@ -69,4 +78,4 @@ input[type="datetime-local"] {
     border: 1px solid #ccc;
     border-radius: 6px;
     box-sizing: border-box;
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From eb9c93a635191ef9ec842592c4a85262811cf108 Mon Sep 17 00:00:00 2001
From: Skitty1238 <157652284+Skitty1238@users.noreply.github.com>
Date: Wed, 4 Jun 2025 21:05:47 -0400
Subject: allowed for incomplete tasks + fix for all day tasks not being added
 correctly + button styling

---
 src/client/views/nodes/TaskBox.scss |  30 +++++++--
 src/client/views/nodes/TaskBox.tsx  | 130 ++++++++++++------------------------
 2 files changed, 68 insertions(+), 92 deletions(-)

(limited to 'src/client/views/nodes/TaskBox.scss')

diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
index 6ef0c6454..a7f75acdb 100644
--- a/src/client/views/nodes/TaskBox.scss
+++ b/src/client/views/nodes/TaskBox.scss
@@ -40,7 +40,7 @@
     resize: none;
     line-height: 1.4;
     resize: none;
-    flex-grow: 1
+    flex-grow: 1;
 }
 
 .task-manager-checkboxes {
@@ -49,7 +49,8 @@
     gap: 16px;
 }
 
-.task-manager-allday, .task-manager-complete {
+.task-manager-allday,
+.task-manager-complete {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -71,11 +72,32 @@
     gap: 4px;
 }
 
-input[type="datetime-local"] {
+input[type='datetime-local'] {
     width: 100%;
     font-size: 0.9rem;
     padding: 6px 8px;
     border: 1px solid #ccc;
     border-radius: 6px;
     box-sizing: border-box;
-}
\ No newline at end of file
+}
+
+.task-manager-checkboxes {
+    display: flex;
+    flex-wrap: wrap; /* allows wrapping on small screens */
+    align-items: center;
+    gap: 16px;
+    row-gap: 8px; /* optional: tighter vertical spacing if it wraps */
+}
+
+.task-manager-google {
+    font-size: 0.85rem;
+    padding: 6px 12px;
+    border-radius: 6px;
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background-color 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
index 8855e43c8..0d4fb622b 100644
--- a/src/client/views/nodes/TaskBox.tsx
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -255,6 +255,48 @@ export class TaskBox extends React.Component<TaskBoxProps> {
                         <input type="checkbox" checked={isCompleted} onChange={this.toggleComplete} />
                         Complete
                     </label>
+
+                    <button
+                        className="task-manager-google"
+                        onClick={async event => {
+                            event.preventDefault();
+
+                            console.log('GT button clicked');
+                            try {
+                                const token = await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
+                                console.log('Got token', token);
+
+                                const response = await fetch('/googleTasks/create', {
+                                    method: 'POST',
+                                    credentials: 'include',
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                        Authorization: `Bearer ${token}`,
+                                    },
+                                    body: JSON.stringify({
+                                        title: taskTitle || 'Untitled Task',
+                                        notes: taskDesc,
+                                        due: allDay ? new Date(String(doc.$task_dateRange)?.split('|')[0]).toISOString() : (doc.$task_endTime instanceof DateField && doc.$task_endTime.date?.toISOString()) || undefined,
+                                        status: doc.$task_completed ? 'completed' : 'needsAction',
+                                        completed: doc.$task_completed ? new Date().toISOString() : undefined,
+                                    }),
+                                });
+
+                                const result = await response.json();
+                                console.log('Google Task result:', result);
+
+                                if (result?.id) {
+                                    alert('✅ Task sent to Google Tasks!');
+                                } else {
+                                    alert(`❌ Failed: ${result?.error?.message || 'Unknown error'}`);
+                                }
+                            } catch (err) {
+                                console.error('Fetch error:', err);
+                                alert('❌ Task creation failed.');
+                            }
+                        }}>
+                        Add to Google
+                    </button>
                 </div>
 
                 {!allDay && (
@@ -269,94 +311,6 @@ export class TaskBox extends React.Component<TaskBoxProps> {
                         </label>
                     </div>
                 )}
-
-                {/** test button */}
-                {/* <button
-                    className="task-manager-google"
-                    onClick={async () => {
-                        console.log('GT button clicked');
-                        const token = await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
-                        console.log('Got token', token);
-
-                        try {
-                            const response = await fetch('/googleTasks/create', {
-                                method: 'POST',
-                                credentials: 'include',
-                                headers: {
-                                    'Content-Type': 'application/json',
-                                    Authorization: `Bearer ${token}`,
-                                },
-                                body: JSON.stringify({
-                                    title: taskTitle || 'Untitled Task',
-                                    notes: taskDesc,
-                                    due: allDay ? String(doc.$task_dateRange)?.split('|')[0] + 'T23:59:00Z' : (doc.$task_endTime instanceof DateField && doc.$task_endTime.date?.toISOString()) || undefined,
-                                }),
-                            });
-
-                            const result = await response.text();
-                            console.log('Google Task result:', result);
-                            alert(result?.id ? 'Task sent to Google Tasks!' : `Failed: ${result?.error?.message || 'Unknown error'}`);
-                        } catch (err) {
-                            console.error('Fetch error:', err);
-                            alert('Fetch failed: ');
-                        }
-                    }}>
-                    GT
-                </button> */}
-
-                {/* <button
-                className="task-manager-google"
-                onClick={async () => {
-                    console.log('GT button clicked');
-                    const url = await Networking.FetchFromServer('/readGoogleAccessToken');
-                    console.log('🔗 Redirecting to Google auth:', url);
-                    window.location.href = url; // Redirect user to authenticate
-                }}
-                >
-                GT
-                </button> */}
-
-                <button
-                    className="task-manager-google"
-                    onClick={async event => {
-                        event.preventDefault();
-
-                        console.log('GT button clicked');
-                        try {
-                            const token = await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
-                            console.log('Got token', token);
-
-                            const response = await fetch('/googleTasks/create', {
-                                method: 'POST',
-                                credentials: 'include',
-                                headers: {
-                                    'Content-Type': 'application/json',
-                                    Authorization: `Bearer ${token}`,
-                                },
-                                body: JSON.stringify({
-                                    title: taskTitle || 'Untitled Task',
-                                    notes: taskDesc,
-                                    due: allDay ? String(doc.$task_dateRange)?.split('|')[0] + 'T23:59:00Z' : (doc.$task_endTime instanceof DateField && doc.$task_endTime.date?.toISOString()) || undefined,
-                                    status: doc.$task_completed ? 'completed' : 'needsAction',
-                                    completed: doc.$task_completed ? new Date().toISOString() : undefined,
-                                }),
-                            });
-
-                            const result = await response.json();
-                            console.log('Google Task result:', result);
-
-                            if (result?.id) {
-                                alert('✅ Task sent to Google Tasks!');
-                            } else {
-                                alert(`❌ Failed: ${result?.error?.message || 'Unknown error'}`);
-                            }
-                        } catch (err) {
-                            console.error('Fetch error:', err);
-                            alert('❌ Task creation failed.');
-                        }
-                    }}>
-                    GT
-                </button>
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From d73f7d9960285aceec01ef41a80bbb19e5d86f8c Mon Sep 17 00:00:00 2001
From: Skitty1238 <157652284+Skitty1238@users.noreply.github.com>
Date: Thu, 5 Jun 2025 11:35:57 -0400
Subject: style changes

---
 src/client/views/nodes/TaskBox.scss | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

(limited to 'src/client/views/nodes/TaskBox.scss')

diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
index a7f75acdb..cc04f7973 100644
--- a/src/client/views/nodes/TaskBox.scss
+++ b/src/client/views/nodes/TaskBox.scss
@@ -1,4 +1,5 @@
 .task-manager-container {
+    color-scheme: light;
     display: flex;
     flex-direction: column;
     padding: 8px;
@@ -6,15 +7,6 @@
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-
-    input,
-    textarea,
-    select,
-    button {
-        background-color: #fff !important;
-        color: #000 !important;
-        border-color: #ccc !important;
-    }
 }
 
 .task-manager-title {
@@ -93,11 +85,17 @@ input[type='datetime-local'] {
     font-size: 0.85rem;
     padding: 6px 12px;
     border-radius: 6px;
-    background-color: #4285f4;
+    background-color: #5e88c8;
     color: white;
     border: none;
     cursor: pointer;
     white-space: nowrap;
     transition: background-color 0.2s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    
+    &:hover {
+        background-color: #4773b0; // darker shade of your base blue
+        color: white;
+        transform: scale(1.01); // subtle hover feel without real size change
+    }
 }
-- 
cgit v1.2.3-70-g09d2


From 353fcddb918ee9ccaedd69032f9212fc66c04a7f Mon Sep 17 00:00:00 2001
From: Skitty1238 <157652284+Skitty1238@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:54:09 -0400
Subject: sync button only accessible when a change is made to the task (to
 counter unnecessary syncing)

---
 src/client/views/nodes/TaskBox.scss |  8 +++++-
 src/client/views/nodes/TaskBox.tsx  | 55 +++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/TaskBox.scss')

diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
index cc04f7973..071fe1f7c 100644
--- a/src/client/views/nodes/TaskBox.scss
+++ b/src/client/views/nodes/TaskBox.scss
@@ -92,10 +92,16 @@ input[type='datetime-local'] {
     white-space: nowrap;
     transition: background-color 0.2s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    
+
     &:hover {
         background-color: #4773b0; // darker shade of your base blue
         color: white;
         transform: scale(1.01); // subtle hover feel without real size change
     }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
 }
diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
index 7df3876c3..82c22057e 100644
--- a/src/client/views/nodes/TaskBox.tsx
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -23,6 +23,23 @@ interface TaskBoxProps {
  */
 @observer
 export class TaskBox extends React.Component<TaskBoxProps> {
+    // contains the last synced task information
+    lastSyncedTask: {
+        title: string;
+        text: string;
+        due?: string;
+        completed: boolean;
+    } = {
+        title: '',
+        text: '',
+        due: '',
+        completed: false,
+    };
+
+    state = {
+        needsSync: false,
+    };
+
     /**
      * Method to reuturn the
      * @param fieldStr
@@ -234,6 +251,34 @@ export class TaskBox extends React.Component<TaskBoxProps> {
                 }
             }
         );
+
+        this._googleTaskCreateDisposer = reaction(
+            () => {
+                const { title, text, $task_completed, $task_dateRange, $task_startTime, $task_endTime, $task_allDay } = doc;
+
+                const completed = !!$task_completed;
+                let due: string | undefined;
+
+                if ($task_allDay && typeof $task_dateRange === 'string') {
+                    const datePart = $task_dateRange.split('|')[0];
+                    if (datePart && !isNaN(new Date(datePart).getTime())) {
+                        due = new Date(datePart + 'T00:00:00Z').toISOString();
+                    }
+                } else if ($task_endTime && $task_endTime instanceof DateField && $task_endTime.date) {
+                    due = $task_endTime.date.toISOString();
+                } else if ($task_startTime && $task_startTime instanceof DateField && $task_startTime.date) {
+                    due = $task_startTime.date.toISOString();
+                }
+
+                return { title, text, completed, due };
+            },
+            current => {
+                const hasChanged = current.title !== this.lastSyncedTask.title || current.text !== this.lastSyncedTask.text || current.due !== this.lastSyncedTask.due || current.completed !== this.lastSyncedTask.completed;
+
+                this.setState({ needsSync: hasChanged });
+            },
+            { fireImmediately: true }
+        );
     }
 
     componentWillUnmount() {
@@ -350,6 +395,15 @@ export class TaskBox extends React.Component<TaskBoxProps> {
 
                 if (result?.id) {
                     alert('✅ Task synced with Google Tasks!');
+                    if (result?.id) {
+                        this.lastSyncedTask = {
+                            title: taskTitle,
+                            text: taskDesc,
+                            due,
+                            completed: isCompleted,
+                        };
+                        this.setState({ needsSync: false });
+                    }
                 } else {
                     alert(`❌ Failed: ${result?.error?.message || 'Unknown error'}`);
                 }
@@ -402,6 +456,7 @@ export class TaskBox extends React.Component<TaskBoxProps> {
 
                     <button
                         className="task-manager-google"
+                        disabled={!this.state.needsSync}
                         onClick={event => {
                             event.preventDefault();
                             handleGoogleTaskSync();
-- 
cgit v1.2.3-70-g09d2


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/client/views/nodes/TaskBox.scss')

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


From 8e0473f2c7846f68a49d656745542e833cc5eb3e Mon Sep 17 00:00:00 2001
From: Skitty1238 <157652284+Skitty1238@users.noreply.github.com>
Date: Mon, 9 Jun 2025 12:12:01 -0400
Subject: delete button style changes

---
 src/client/views/nodes/TaskBox.scss | 15 +++++++++++++
 src/client/views/nodes/TaskBox.tsx  | 44 +++++++++++++++++++++----------------
 2 files changed, 40 insertions(+), 19 deletions(-)

(limited to 'src/client/views/nodes/TaskBox.scss')

diff --git a/src/client/views/nodes/TaskBox.scss b/src/client/views/nodes/TaskBox.scss
index e129e75d1..beee58697 100644
--- a/src/client/views/nodes/TaskBox.scss
+++ b/src/client/views/nodes/TaskBox.scss
@@ -115,3 +115,18 @@ input[type='datetime-local'] {
     flex-direction: column;
     min-width: 0;
 }
+
+.task-manager-button-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.task-manager-delete {
+    @extend .task-manager-google;
+    background-color: #182430;
+
+    &:hover {
+        background-color: #000000;
+    }
+}
diff --git a/src/client/views/nodes/TaskBox.tsx b/src/client/views/nodes/TaskBox.tsx
index 3c7a2f345..5a54e8049 100644
--- a/src/client/views/nodes/TaskBox.tsx
+++ b/src/client/views/nodes/TaskBox.tsx
@@ -481,7 +481,7 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
     handleDeleteTask = async () => {
         const doc = this.Document;
         if (!doc.$googleTaskId) return;
-        if (!window.confirm('Are you sure you want to permanently delete this task from Google Tasks?')) return;
+        if (!window.confirm('Are you sure you want to permanently delete this task? This action is undoable.')) return;
 
         try {
             const token = await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
@@ -583,24 +583,30 @@ export class TaskBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         </label>
                     </div>
 
-                    <button
-                        className="task-manager-google"
-                        // disabled={!this.needsSync}
-                        onClick={event => {
-                            event.preventDefault();
-                            handleGoogleTaskSync();
-                        }}>
-                        {this._syncing ? 'Syncing...' : this.needsSync ? 'Push Updates' : 'Sync Task'}
-                    </button>
-
-                    <button
-                        className="task-delete"
-                        onClick={event => {
-                            event.preventDefault();
-                            this.handleDeleteTask();
-                        }}>
-                        Delete Task
-                    </button>
+                    <div className="task-manager-button-row">
+                        <button
+                            className="task-manager-google"
+                            onClick={event => {
+                                event.preventDefault();
+                                handleGoogleTaskSync();
+                            }}>
+                            {this._syncing ? 'Syncing...' : this.needsSync ? 'Push Updates' : 'Sync Task'}
+                        </button>
+
+                        <button
+                            className="task-manager-delete"
+                            onClick={event => {
+                                event.preventDefault();
+                                this.handleDeleteTask();
+                            }}>
+                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="12" height="12" viewBox="0 0 24 24" style={{ fill: 'white', marginRight: '6px', verticalAlign: 'middle', marginTop: '-2px' }}>
+                                <path d="M 10 2 L 9 3 L 5 3 C 4.4 3 4 3.4 4 4 C 4 4.6 4.4 5 5 5 L 7 5 L 17 5 L 19 5 C 19.6 5 20 4.6 20 4 C 20 3.4 19.6 3 19 3 L 15 3 L 14 2 L 10 2 z M 5 7 L 5 20 C 5 21.1 5.9 22 7 22 L 17 22 C 18.1 22 19 21.1 19 20 L 19 7 L 5 7 z M 9 9 C 9.6 9 10 9.4 10 10 L 10 19 C 10 19.6 9.6 20 9 20 C 8.4 20 8 19.6 8 19 L 8 10 C 8 9.4 8.4 9 9 9 z M 15 9 C 15.6 9 16 9.4 16 10 L 16 19 C 16 19.6 15.6 20 15 20 C 14.4 20 14 19.6 14 19 L 14 10 C 14 9.4 14.4 9 15 9 z"></path>
+                            </svg>
+
+                            
+                            Delete
+                        </button>
+                    </div>
 
                     {!allDay && (
                         <div className="task-manager-times" style={{ opacity: isCompleted ? 0.7 : 1 }}>
-- 
cgit v1.2.3-70-g09d2