Fix drag handle and focus issues

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>

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 ||

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;
 }