From 641f6bd2b1f9fde153901d402f2a128dd18f6b28 Mon Sep 17 00:00:00 2001 From: Conan Scott Date: Thu, 26 Feb 2026 03:55:19 +0000 Subject: [PATCH] feat: add checkbox/done UI with manly dark styling --- public/index.html | 171 ++++++++++++++++++++++++++++++---------------- 1 file changed, 114 insertions(+), 57 deletions(-) diff --git a/public/index.html b/public/index.html index 9d47748..c188d18 100644 --- a/public/index.html +++ b/public/index.html @@ -3,41 +3,46 @@ -Priority Horizon +CLAWRIZON
-

Priority Horizon

-

drag to reorder · click to edit

+

Clawrizon

+

drag to reorder · click to edit · check when done

@@ -171,10 +222,20 @@ async function api(path, opts = {}) { function createNoteEl(note, colKey) { const el = document.createElement('div'); - el.className = 'note'; + el.className = 'note' + (note.done ? ' done' : ''); el.draggable = true; el.dataset.id = note.id; + const check = document.createElement('input'); + check.type = 'checkbox'; + check.className = 'note-check'; + check.checked = !!note.done; + check.addEventListener('change', async () => { + const done = check.checked; + el.classList.toggle('done', done); + await api('/notes/' + note.id, { method: 'PATCH', body: { done } }); + }); + const text = document.createElement('div'); text.className = 'note-text'; text.contentEditable = true; @@ -203,6 +264,7 @@ function createNoteEl(note, colKey) { await api('/notes/' + note.id, { method: 'DELETE' }); }; + el.appendChild(check); el.appendChild(text); el.appendChild(del); @@ -254,7 +316,6 @@ async function render() { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; list.classList.add('drag-over'); - // Position indicator const afterEl = getDragAfterElement(list, e.clientY); const dragging = document.querySelector('.dragging'); if (dragging) { @@ -267,7 +328,6 @@ async function render() { e.preventDefault(); list.classList.remove('drag-over'); if (!dragItem) return; - // Save new order const items = []; document.querySelectorAll('.notes-list').forEach(nl => { const colKey = nl.dataset.column; @@ -302,7 +362,7 @@ function getDragAfterElement(container, y) { let touchDragEl = null, touchClone = null, touchStartY = 0, touchStartX = 0; document.addEventListener('touchstart', e => { const note = e.target.closest('.note'); - if (!note || e.target.closest('.note-text:focus') || e.target.closest('.note-delete')) return; + if (!note || e.target.closest('.note-text:focus') || e.target.closest('.note-delete') || e.target.closest('.note-check')) return; touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; touchDragEl = note; @@ -314,7 +374,7 @@ document.addEventListener('touchmove', e => { const dy = e.touches[0].clientY - touchStartY; if (!touchClone && (Math.abs(dx) > 10 || Math.abs(dy) > 10)) { touchClone = touchDragEl.cloneNode(true); - touchClone.style.cssText = 'position:fixed;pointer-events:none;z-index:1000;opacity:0.8;width:' + touchDragEl.offsetWidth + 'px;transform:rotate(2deg);'; + touchClone.style.cssText = 'position:fixed;pointer-events:none;z-index:1000;opacity:0.8;width:' + touchDragEl.offsetWidth + 'px;transform:rotate(1deg);'; document.body.appendChild(touchClone); touchDragEl.style.opacity = '0.3'; } @@ -330,8 +390,6 @@ document.addEventListener('touchend', async e => { const x = e.changedTouches[0].clientX, y = e.changedTouches[0].clientY; touchClone.remove(); touchClone = null; touchDragEl.style.opacity = '1'; - - // Find target column const lists = document.querySelectorAll('.notes-list'); let targetList = null; lists.forEach(l => { @@ -342,7 +400,6 @@ document.addEventListener('touchend', async e => { const afterEl = getDragAfterElement(targetList, y); if (afterEl) targetList.insertBefore(touchDragEl, afterEl); else targetList.appendChild(touchDragEl); - // Save const items = []; document.querySelectorAll('.notes-list').forEach(nl => { nl.querySelectorAll('.note').forEach((n, i) => {