haufen sachen

public/js/modules/editor.js

@@ -112,6 +112,58 @@ CARD_COLORS.forEach(c => {
     presets.appendChild(btn);
 });
 
+const inpDueValue = $('inp-due-value');
+const inpDueLabel = $('inp-due-label');
+const inpDueBtn = $('inp-due-date');
+
+function setDueDate(date) {
+    if (inpDueValue) inpDueValue.value = date || '';
+    if (inpDueLabel) inpDueLabel.textContent = date || 'no due';
+    if (inpDueBtn) {
+        inpDueBtn.classList.toggle('text-t-accent', !!date);
+        inpDueBtn.classList.toggle('border-t-accent', !!date);
+        inpDueBtn.classList.toggle('text-t-dim', !date);
+    }
+}
+
+inpDueBtn?.addEventListener('click', async () => {
+    const { showDialog } = await import('./dialog.js');
+    const current = inpDueValue?.value || '';
+    const result = await showDialog({
+        title: current ? 'change due date' : 'set due date',
+        input: 'date',
+        defaultValue: current || new Date().toISOString().substring(0, 10),
+        okLabel: current ? 'update' : 'set',
+    });
+    if (result === null) return;
+    setDueDate(result || '');
+});
+
+const inpDoneToggle = $('inp-done-toggle');
+const inpDoneLabel = $('inp-done-label');
+
+function updateDoneToggle() {
+    const isDone = body.value.includes('#done');
+    if (inpDoneToggle) {
+        inpDoneToggle.classList.toggle('text-t-accent', isDone);
+        inpDoneToggle.classList.toggle('border-t-accent', isDone);
+        inpDoneToggle.classList.toggle('text-t-dim', !isDone);
+    }
+    if (inpDoneLabel) inpDoneLabel.textContent = isDone ? 'undone' : 'done';
+}
+
+inpDoneToggle?.addEventListener('click', () => {
+    const isDone = body.value.includes('#done');
+    if (isDone) {
+        body.value = body.value.replace(/\s*#done\b/g, '');
+    } else {
+        body.value = body.value.trimEnd() + ' #done';
+        setDueDate('');
+    }
+    updateDoneToggle();
+    updatePreview();
+});
+
 function selectColor(hex) {
     inpColor.value = hex;
     const bar = $('editor-color');
@@ -137,6 +189,8 @@ export function openModal(card = null) {
     inpBucket.value = card?.bucket_id ? card.bucket_id
         : (!virtualBuckets.includes(state.activeBucket) ? state.activeBucket : '');
     selectColor(card ? card.color : '#38bdf8');
+    setDueDate(card?.due_date || '');
+    updateDoneToggle();
     state.previewVisible = true;
     preview.classList.remove('hidden');
     editorDivider?.classList.remove('hidden');
@@ -328,7 +382,7 @@ function updatePreview() {
 }
 
 async function doSave(close, { animate = true } = {}) {
-    const data = { title: inpTitle.value, body: body.value, color: inpColor.value, bucket_id: inpBucket.value || null };
+    const data = { title: inpTitle.value, body: body.value, color: inpColor.value, bucket_id: inpBucket.value || null, due_date: inpDueValue?.value || null };
     if (!data.title.trim()) return;
     const returnToGallery = state.returnToGalleryAfterEdit;
     if (state.editingId) {
@@ -975,7 +1029,7 @@ body.addEventListener('drop', e => {
 
 document.addEventListener('mousedown', e => {
     const img = e.target.closest('.prose img');
-    if (!img) return;
+    if (!img || img.closest('.md-gallery-item')) return;
     e.preventDefault();
     img.classList.add('resizing');
     const startX = e.clientX, startW = img.offsetWidth;