From c1bb17b299efefb69a5f652ba66283f5bcf1572f Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Fri, 6 Dec 2024 14:10:28 +0100
Subject: [PATCH] Fix drag handle and focus issues

---
 priv/static/index.html       |  2 +-
 priv/static/js/components.js | 16 +++++++++++++++-
 priv/static/style.css        | 21 +++++++++++++++++----
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/priv/static/index.html b/priv/static/index.html
index f108ebb..063342f 100644
--- a/priv/static/index.html
+++ b/priv/static/index.html
@@ -90,7 +90,7 @@
     </div>
 
     <template id="task-list-item">
-      <div class="handle"><button>||</button></div>
+      <div class="handle">||</div>
       <div class="checkbox"><input type="checkbox" /></div>
       <editable-area></editable-area>
       <div class="remove"><button>X</button></div>
diff --git a/priv/static/js/components.js b/priv/static/js/components.js
index cdd0b0d..d3102bf 100644
--- a/priv/static/js/components.js
+++ b/priv/static/js/components.js
@@ -161,7 +161,15 @@ class TaskListItem extends HTMLElement {
     // drag and drop events
 
     this.parentNode.addEventListener("dragstart", (e) => {
-      this.parentNode.classList.add("dragging");
+      const isHandle = e.explicitOriginalTarget.closest
+        ? e.explicitOriginalTarget.closest(".handle")
+        : e.explicitOriginalTarget.parentNode.closest(".handle");
+
+      if (isHandle) {
+        this.parentNode.classList.add("dragging");
+      } else {
+        e.preventDefault();
+      }
     });
 
     this.parentNode.addEventListener("dragend", () => {
@@ -457,6 +465,12 @@ class NoteForm extends HTMLElement {
     this.saveButton = this.querySelector(".save");
 
     this.addEventListener("click", (e) => {
+      const textareaInside = e.target.querySelector("textarea");
+      if (textareaInside) {
+        textareaInside.focus();
+        return true;
+      }
+
       if (
         !(
           e.target instanceof HTMLInputElement ||
diff --git a/priv/static/style.css b/priv/static/style.css
index 655804d..3fe6875 100644
--- a/priv/static/style.css
+++ b/priv/static/style.css
@@ -5,9 +5,10 @@
   --font-color: #222;
   --button-text-color: #222;
   --background: #eee;
-  --note-background: beige;
+  --note-background: bisque;
+  --highlight-color: beige;
   --shadow-color: rgb(0 0 0 / 0.8);
-  --button-background: lightray;
+  --button-background: lightgray;
   --inactive-color: gray;
 }
 
@@ -17,6 +18,7 @@
     --button-text-color: black;
     --background: #222;
     --note-background: dimgray;
+    --highlight-color: gray;
     --shadow-color: rgb(211 211 211 / 0.8);
     --button-background: silver;
     --inactive-color: lightgray;
@@ -137,13 +139,16 @@ editable-area textarea:focus {
 task-list ul {
   display: flex;
   flex-direction: column;
-  gap: 5px;
   wdith: 100%;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
+task-list ul {
+  padding: 4px 0;
+}
+
 task-list li:has(.checkbox input:checked) {
   order: 1;
 }
@@ -153,6 +158,10 @@ task-list-item .remove {
 }
 
 @media (hover: hover) and (pointer: fine) {
+  task-list li:hover {
+    background: var(--highlight-color);
+  }
+
   task-list li:hover .remove {
     visibility: visible;
   }
@@ -181,7 +190,11 @@ task-list-item {
   align-items: baseline;
 }
 
-task-list-item .handle button {
+task-list-item .handle {
+  margin: 2px 0;
+  padding: 4px 8px;
+  color: var(--button-text-color);
+  background: var(--button-background);
   cursor: grab;
 }