From 17df1df4e13f811677283702b0209a4c2f6e9b25 Mon Sep 17 00:00:00 2001
From: Exr0n <mail@exr0n.com>
Date: Tue, 10 Sep 2024 12:42:52 -0400
Subject: [PATCH 1/5] floating checkmark, closes #4

---
 src/components/task.css |  9 +++++++++
 src/components/task.jsx | 16 +++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/task.css b/src/components/task.css
index d759e7a..5f92175 100644
--- a/src/components/task.css
+++ b/src/components/task.css
@@ -1,3 +1,7 @@
+.task {
+    position: relative;
+}
+
 .task-cm > .cm-mountpoint {
     padding: 0;
 }
@@ -33,6 +37,11 @@
     margin-right: 0 !important;
 }
 
+.floating-task-action {
+    position: absolute;
+    transform: translateX(-18px) scale(0.8);
+}
+
 .task-action:hover {
     color: var(--foreground-color);
 }
diff --git a/src/components/task.jsx b/src/components/task.jsx
index 85eded8..49f67ca 100644
--- a/src/components/task.jsx
+++ b/src/components/task.jsx
@@ -82,7 +82,7 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
     const deffered = (task.start && new Date(task.start) > today);
 
     return (
-        <div className="task" ref={wrapperRef}>
+        <div className="task group" ref={wrapperRef}>
             <DateModal
                 initialDate={task.schedule ? new Date(task.schedule) : null}
                 onDate={(d) => {
@@ -107,6 +107,20 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 }}
                 onClose={() => setDeferOpen(false)}
                 ref={deferRef} />
+
+            <div className="task-action floating-task-action opacity-0 group-hover:opacity-100 transition-opacity" data-tooltip-id={hasFocus? "rootp" : "notp"}  data-tooltip-content={task.completed ? strings.TOOLTIPS.UNCOMPLETE : strings.TOOLTIPS.COMPLETE} data-tooltip-place={"bottom"}
+                    onClick={() => {
+                        // TODO completing tasks is a bit of a thing so
+                        // TODO supporting repeating tasks, etc.
+                        dispatch(edit({id: task.id, completed: !task.completed}));
+                        setHasFocus(false);
+                    }}
+            >
+                <i className={task.completed ? "task-action fa-solid fa-circle-check" : "task-action fa-solid fa-check" } style={{transform: "translateY(-4px)"}} />
+            </div>
+
+
+            
             <div className={"task-cm"+(task.start && deffered ? " deferred" : "")+(task.completed ? " completed" : "")+(dueSoon && !overdue ? " due-soon" : "")+(overdue ? " overdue" : "")}>
                 <Editor
                     strike={task.completed}

From 3395b960a6afc2f089d05d901eea83e7fa1fe743 Mon Sep 17 00:00:00 2001
From: Exr0n <mail@exr0n.com>
Date: Tue, 10 Sep 2024 22:33:46 -0400
Subject: [PATCH 2/5] invisible hover box to make a bigger touch target

---
 src/components/task.jsx | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/task.jsx b/src/components/task.jsx
index 49f67ca..731952e 100644
--- a/src/components/task.jsx
+++ b/src/components/task.jsx
@@ -108,7 +108,7 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 onClose={() => setDeferOpen(false)}
                 ref={deferRef} />
 
-            <div className="task-action floating-task-action opacity-0 group-hover:opacity-100 transition-opacity" data-tooltip-id={hasFocus? "rootp" : "notp"}  data-tooltip-content={task.completed ? strings.TOOLTIPS.UNCOMPLETE : strings.TOOLTIPS.COMPLETE} data-tooltip-place={"bottom"}
+            <div className="task-action floating-task-action opacity-0 group-hover:opacity-100 transition-opacity" 
                     onClick={() => {
                         // TODO completing tasks is a bit of a thing so
                         // TODO supporting repeating tasks, etc.
@@ -119,6 +119,7 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 <i className={task.completed ? "task-action fa-solid fa-circle-check" : "task-action fa-solid fa-check" } style={{transform: "translateY(-4px)"}} />
             </div>
 
+            <div className="h-full w-[25px] absolute translate-x-[-25px] opacity-0"> </div>
 
             
             <div className={"task-cm"+(task.start && deffered ? " deferred" : "")+(task.completed ? " completed" : "")+(dueSoon && !overdue ? " due-soon" : "")+(overdue ? " overdue" : "")}>
@@ -134,16 +135,6 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 />
 
                 <animated.div className={"task-actions"} style={{...springs}}>
-                    <div className="task-action" data-tooltip-id={hasFocus? "rootp" : "notp"}  data-tooltip-content={task.completed ? strings.TOOLTIPS.UNCOMPLETE : strings.TOOLTIPS.COMPLETE} data-tooltip-place={"bottom"}
-                         onClick={() => {
-                             // TODO completing tasks is a bit of a thing so
-                             // TODO supporting repeating tasks, etc.
-                             dispatch(edit({id: task.id, completed: !task.completed}));
-                             setHasFocus(false);
-                         }}
-                    >
-                        <i className={task.completed ? "task-action fa-solid fa-circle-check" : "task-action fa-solid fa-check" } style={{transform: "translateY(0.5px)"}} />
-                    </div>
                     <div className={"task-action pr-5" + (scheduleOpen ? " accent": "")}
                          onClick={() => setScheduleOpen(true)}
                          data-tooltip-id={hasFocus? "rootp" : "notp"}

From 92067713a9e7509eb780b4ab1c0c31c1c227f14c Mon Sep 17 00:00:00 2001
From: Exr0n <mail@exr0n.com>
Date: Tue, 10 Sep 2024 22:45:44 -0400
Subject: [PATCH 3/5] show the checkmark even without hover if task is open

---
 src/components/task.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/task.jsx b/src/components/task.jsx
index 731952e..28b78c4 100644
--- a/src/components/task.jsx
+++ b/src/components/task.jsx
@@ -108,7 +108,7 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 onClose={() => setDeferOpen(false)}
                 ref={deferRef} />
 
-            <div className="task-action floating-task-action opacity-0 group-hover:opacity-100 transition-opacity" 
+            <div className={`task-action floating-task-action ${hasFocus ? "opacity-1" : "opacity-0" } group-hover:opacity-100 transition-opacity` }
                     onClick={() => {
                         // TODO completing tasks is a bit of a thing so
                         // TODO supporting repeating tasks, etc.

From 837f5c1ab1ef3ef39e2c1465c911a7a119a52c99 Mon Sep 17 00:00:00 2001
From: Exr0n <mail@exr0n.com>
Date: Tue, 10 Sep 2024 22:50:09 -0400
Subject: [PATCH 4/5] pointer events none so you can actually complete tasks

---
 src/components/task.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/task.jsx b/src/components/task.jsx
index 28b78c4..8cc945d 100644
--- a/src/components/task.jsx
+++ b/src/components/task.jsx
@@ -119,7 +119,7 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 <i className={task.completed ? "task-action fa-solid fa-circle-check" : "task-action fa-solid fa-check" } style={{transform: "translateY(-4px)"}} />
             </div>
 
-            <div className="h-full w-[25px] absolute translate-x-[-25px] opacity-0"> </div>
+            <div className="h-full w-[25px] absolute translate-x-[-25px] opacity-0 pointer-events-none"> </div>
 
             
             <div className={"task-cm"+(task.start && deffered ? " deferred" : "")+(task.completed ? " completed" : "")+(dueSoon && !overdue ? " due-soon" : "")+(overdue ? " overdue" : "")}>

From 1605e75e61217a0b09dcd7d2c01a0d4006808e46 Mon Sep 17 00:00:00 2001
From: Houjun Liu <houjun@jemoka.com>
Date: Tue, 10 Sep 2024 19:52:42 -0700
Subject: [PATCH 5/5] make clicking on the button actually do a thing

---
 src/components/task.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/task.jsx b/src/components/task.jsx
index 28b78c4..5ddbc90 100644
--- a/src/components/task.jsx
+++ b/src/components/task.jsx
@@ -108,7 +108,8 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 onClose={() => setDeferOpen(false)}
                 ref={deferRef} />
 
-            <div className={`task-action floating-task-action ${hasFocus ? "opacity-1" : "opacity-0" } group-hover:opacity-100 transition-opacity` }
+            <div className={`task-action cursor-pointer floating-task-action ${hasFocus ? "opacity-1" : "opacity-0" } group-hover:opacity-100 transition-opacity` }
+                 style={{cursor: "pointer !important", zIndex: 100000}}
                     onClick={() => {
                         // TODO completing tasks is a bit of a thing so
                         // TODO supporting repeating tasks, etc.