kalender und fixes

config.php

@@ -1,7 +1,7 @@
 <?php
 
 define('APP_NAME', 'hyprcrd');
-define('APP_VERSION', '0.1.2');
+define('APP_VERSION', '0.3.0');
 
 // Database path — writable directory, outside webroot
 define('DB_PATH', __DIR__ . '/data/hyprcrd.db');

dist.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-# Build hyprcrd distribution ZIP with version bump
+# Build hyprcrd distribution ZIP with version bump + minification
 set -e
 
 if [ "$1" = "-h" ] || [ "$1" = "--help" ]; then
@@ -9,8 +9,8 @@ if [ "$1" = "-h" ] || [ "$1" = "--help" ]; then
     echo "  --minor   bump minor version             0.1.2 → 0.2.0"
     echo "  --major   bump major version              0.2.0 → 1.0.0"
     echo ""
-    echo "Builds Tailwind CSS, bumps version in config.php,"
+    echo "Builds Tailwind CSS, minifies JS/CSS, bumps version in config.php,"
-    echo "and creates hyprcrd-{version}.zip with all source files."
+    echo "and creates hyprcrd-{version}.zip ready for deployment."
     exit 0
 fi
 
@@ -32,6 +32,8 @@ sed -i "s/APP_VERSION', '${CURRENT}'/APP_VERSION', '${VERSION}'/" config.php
 echo "Version: ${CURRENT} → ${VERSION}"
 
 DIST="hyprcrd-${VERSION}.zip"
+STAGE="/tmp/hyprcrd-stage-$$"
+rm -rf "$STAGE"
 
 # Rebuild Tailwind if CLI exists
 if [ -x ./tailwindcss ]; then
@@ -39,29 +41,48 @@ if [ -x ./tailwindcss ]; then
     ./tailwindcss --input public/css/tailwind.css --output public/css/tailwind.out.css --content "public/index.php,public/js/**/*.js" --minify
 fi
 
+# Copy source to staging
+echo "Staging files..."
+mkdir -p "$STAGE"
+cp -r config.php Dockerfile docker-entrypoint.sh README.md dist.sh .gitignore src public "$STAGE/"
+mkdir -p "$STAGE/data"
+touch "$STAGE/data/.gitkeep"
+rm -rf "$STAGE/public/uploads"
+mkdir -p "$STAGE/public/uploads"
+touch "$STAGE/public/uploads/.gitkeep"
+rm -f "$STAGE/public/css/tailwind.css"
+
+# Minify JS
+if command -v npx &>/dev/null; then
+    echo "Minifying JS..."
+    for f in "$STAGE"/public/js/app.js "$STAGE"/public/js/modules/*.js; do
+        [ -f "$f" ] || continue
+        npx --yes terser "$f" --compress --mangle --module -o "$f" 2>/dev/null && \
+            echo "  $(basename "$f")" || echo "  SKIP $(basename "$f")"
+    done
+
+    echo "Minifying CSS..."
+    for f in "$STAGE"/public/css/style.css "$STAGE"/public/css/fonts.css; do
+        [ -f "$f" ] || continue
+        npx --yes csso-cli "$f" -o "$f" 2>/dev/null && \
+            echo "  $(basename "$f")" || echo "  SKIP $(basename "$f")"
+    done
+else
+    echo "npx not found, skipping minification"
+fi
+
+# Create ZIP
 echo "Creating ${DIST}..."
-
+cd "$STAGE"
-zip -r "$DIST" \
+zip -r "$OLDPWD/$DIST" . -x "*.gitkeep" 2>/dev/null
-    config.php \
+# Re-add gitkeep files
-    Dockerfile \
+zip "$OLDPWD/$DIST" data/.gitkeep public/uploads/.gitkeep
-    docker-entrypoint.sh \
-    README.md \
-    dist.sh \
-    .gitignore \
-    src/ \
-    public/ \
-    -x "public/uploads/*" \
-    -x "public/uploads/.gitkeep" \
-    -x "public/css/tailwind.css"
-
-# Add empty dirs with gitkeep
-mkdir -p /tmp/hyprcrd-dist/data
-mkdir -p /tmp/hyprcrd-dist/public/uploads
-touch /tmp/hyprcrd-dist/data/.gitkeep
-touch /tmp/hyprcrd-dist/public/uploads/.gitkeep
-cd /tmp/hyprcrd-dist
-zip -r "$OLDPWD/$DIST" data/.gitkeep public/uploads/.gitkeep
 cd "$OLDPWD"
-rm -rf /tmp/hyprcrd-dist
 
+# Cleanup
+rm -rf "$STAGE"
+
+# Size comparison
+ORIG=$(du -sb public/js/ public/css/style.css | awk '{s+=$1}END{print s}')
+FINAL=$(stat -c%s "$DIST")
 echo "Done: ${DIST} ($(du -h "$DIST" | cut -f1))"

public/css/style.css

@@ -18,6 +18,19 @@ body { font-family: 'JetBrains Mono', monospace; }
 .cal-item-journal { opacity: 0.8; }
 .cal-todo { font-family: var(--t-font-pixel, 'Silkscreen', cursive); font-size: 8px; color: var(--t-accent); flex-shrink: 0; }
 
+/* Datepicker */
+.dp-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
+.dp-header button { background: none; border: 1px solid var(--t-border); color: var(--t-muted); cursor: pointer; padding: 2px 8px; border-radius: 3px; transition: color 0.1s, border-color 0.1s; }
+.dp-header button:hover { color: var(--t-accent); border-color: var(--t-accent); }
+.dp-title { flex: 1; text-align: center; font-family: var(--t-font-pixel); font-size: 10px; color: var(--t-bright); }
+.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.dp-day-label { text-align: center; font-family: var(--t-font-pixel); font-size: 8px; color: var(--t-dim); padding: 2px 0; text-transform: uppercase; }
+.dp-day { text-align: center; font-size: 11px; color: var(--t-text); padding: 5px 0; cursor: pointer; border-radius: 3px; transition: background 0.1s, color 0.1s; }
+.dp-day:hover { background: var(--t-raised); color: var(--t-bright); }
+.dp-day.dp-out { color: var(--t-dim); opacity: 0.4; }
+.dp-day.dp-today { color: var(--t-accent); font-weight: bold; }
+.dp-day.dp-selected { background: var(--t-accent); color: var(--t-bg); }
+
 /* Scrollbars */
 * {
     scrollbar-width: thin;
@@ -561,20 +574,24 @@ body.detail-image-fs-open { overflow: hidden; }
 .prose blockquote { border-left: 3px solid var(--t-accent); padding-left: 1em; margin: 0.8em 0; color: var(--t-muted); }
 .prose hr { border: none; border-top: 1px solid var(--t-border); margin: 1.2em 0; }
 /* Todo component */
+.prose ul:has(.todo-item), .prose ol:has(.todo-item) { padding-left: 1.5em; }
 .todo-item {
     list-style: none !important;
     margin: 0 !important;
     margin-left: -1.5em !important;
     display: flex !important;
+    align-items: flex-start;
     gap: 10px;
-    padding: 4px 0;
+    min-height: 28px;
-    border-bottom: 1px solid color-mix(in srgb, var(--t-border) 40%, transparent);
+    padding: 5px 0;
 }
-.todo-item:last-child { border-bottom: none; }
+.todo-item { cursor: pointer; }
+.todo-item:hover { background: color-mix(in srgb, var(--t-raised) 50%, transparent); }
 .todo-item.todo-done .todo-text { color: var(--t-dim); text-decoration: line-through; }
-.todo-text { flex: 1; min-width: 0; line-height: 20px; }
+.todo-text { flex: 1; min-width: 0; line-height: 1.5; user-select: none; }
 .todo-cb {
-    width: 20px; height: 20px; min-width: 20px;
+    width: 18px; height: 18px; min-width: 18px;
+    transform: translateY(-9px);
     border: 2px solid var(--t-border); border-radius: 3px;
     background: transparent; cursor: pointer;
     display: flex; align-items: center; justify-content: center;
@@ -583,12 +600,16 @@ body.detail-image-fs-open { overflow: hidden; }
 }
 .todo-cb:hover { border-color: var(--t-accent); }
 .todo-cb.checked { background: var(--t-accent); border-color: var(--t-accent); }
-.todo-cb i { font-size: 14px; transition: opacity 0.12s; }
+.todo-cb i { font-size: 12px; transition: opacity 0.12s; }
 .todo-cb:not(.checked) i { opacity: 0; color: var(--t-accent); }
 .todo-cb:not(.checked):hover i { opacity: 0.5; }
 .todo-cb.checked i { opacity: 1; color: var(--t-bg); }
 .prose input[type="checkbox"] { display: none; }
 
+/* Todo progress bar */
+.todo-progress { display: flex; flex: 1; gap: 3px; }
+.todo-seg { flex: 1; height: 5px; border-radius: 3px; transition: background 0.2s; }
+
 .prose audio {
     width: 100%;
     max-width: 400px;

public/index.php

@@ -882,6 +882,7 @@ if (str_starts_with($route, '/api/')) {
             <div class="p-4 space-y-3">
                 <p id="dialog-msg" class="text-xs text-t-text"></p>
                 <input type="text" id="dialog-input" class="hidden w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-sm focus:border-t-accent focus:outline-none placeholder:text-t-dim font-mono">
+                <div id="dialog-datepicker" class="hidden"></div>
             </div>
             <div class="flex justify-end gap-2 px-4 py-3 border-t border-t-border">
                 <button id="dialog-cancel" class="font-pixel text-[10px] px-3 py-1.5 text-xs border border-t-border text-t-muted hover:text-t-bright transition-colors">cancel</button>

public/js/modules/board.js

@@ -10,6 +10,12 @@ import { bindCheckboxes } from './detail.js';
 
 const board = $('board');
 const boardPreview = $('board-preview');
+
+board?.addEventListener('contextmenu', e => {
+    if (e.target.closest('[data-id]') || e.target.closest('.superview-item')) return;
+    e.preventDefault();
+    window._openModal(null);
+});
 const boardPreviewBody = $('board-preview-body');
 const boardPreviewTitle = $('board-preview-title');
 const boardPreviewColor = $('board-preview-color');
@@ -217,7 +223,7 @@ $('sort-toggle')?.addEventListener('click', () => {
     renderBoard();
 });
 
-function renderCardHtml(c, inGroup = false, recent = []) {
+export function renderCardHtml(c, inGroup = false, recent = []) {
     const coverImg = leadingImage(c.body);
     const thumbImg = coverImg ? null : firstImage(c.body);
     const children = getChildren(c.id);
@@ -246,10 +252,9 @@ function renderCardHtml(c, inGroup = false, recent = []) {
                 ${todos ? `<i class="ph ${todos.done === todos.total ? 'ph-check-square text-t-accent' : 'ph-squares-four text-t-muted'} text-sm mt-0.5 shrink-0"></i>` : ''}
                 <h3 class="font-pixel text-xs text-t-bright leading-relaxed line-clamp-2">${esc(c.title)}</h3>
             </div>
-            ${todos ? `<div class="mb-2"><div class="flex items-center gap-2 mb-1">
+            ${todos ? `<div class="mb-2">
-                <div class="flex-1 h-1.5 bg-t-border rounded-full overflow-hidden"><div class="h-full rounded-full transition-all" style="width:${todoPct}%;background:${cardColor}"></div></div>
+                <div class="todo-progress">${Array.from({length: todos.total}, (_, i) => `<div class="todo-seg" style="background:${i < todos.done ? cardColor : 'var(--t-border)'}"></div>`).join('')}</div>
-                <span class="font-pixel text-[9px] ${todos.done === todos.total ? 'text-t-accent' : 'text-t-dim'}">${todos.done}/${todos.total}</span>
+            </div>` : ''}
-            </div></div>` : ''}
             <p class="text-xs ${hasCover ? 'text-t-text' : 'text-t-muted'} leading-relaxed line-clamp-5 flex-1">${esc(stripMd(c.body))}</p>
             ${tags.length ? `<div class="flex flex-wrap gap-1 mt-1.5 card-layer">${tags.slice(0, 5).map(t => tagChipHtml(t)).join('')}${tags.length > 5 ? `<span class="tag-chip tag-chip-more">+${tags.length - 5}</span>` : ''}</div>` : ''}
             <div class="mt-auto pt-2 flex items-center gap-2 text-[10px] ${hasCover ? 'text-t-text' : 'text-t-dim'} font-pixel">
@@ -446,6 +451,9 @@ export function renderBoard() {
     // Footer count
     const fc = $('footer-count');
     if (fc) fc.textContent = `${cards.length} card${cards.length !== 1 ? 's' : ''} · ${state.cards.length} total`;
+
+    // Refresh split preview if open
+    if (boardSplitOpen && boardPreviewCardId) showBoardPreview(boardPreviewCardId);
 }
 
 // ── Group bar ──

public/js/modules/calendar.js

@@ -4,6 +4,7 @@ import { $, esc } from './util.js';
 import { state } from './state.js';
 import { stripMd, getTodos } from './markdown.js';
 import { autoSync, getCalConfig, getAllCalConfigs } from './caldav.js';
+import { renderCardHtml } from './board.js';
 
 const overlay = $('calendar');
 const grid = $('cal-grid');
@@ -138,6 +139,12 @@ function isAppointment(card) {
     return tags.includes('termin') || card.caldav_uid || /^\d{4}-\d{2}-\d{2}\s*[—-]\s*.+/.test(card.title);
 }
 
+let calHover = null, calHoverTimer = null;
+function clearCalHover() {
+    if (calHoverTimer) { clearTimeout(calHoverTimer); calHoverTimer = null; }
+    if (calHover) { calHover.remove(); calHover = null; }
+}
+
 function render() {
     title.textContent = `${MONTHS[viewMonth]} ${viewYear}`;
 
@@ -234,11 +241,44 @@ function render() {
 
     grid.innerHTML = html;
 
+    // Hover card preview — clear any stale popups from previous render
+    clearCalHover();
+
     // Click on card item → open card (hide calendar, restore on return)
     grid.querySelectorAll('[data-card-id]').forEach(el => {
         let clickTimer = null;
+
+        el.addEventListener('mouseenter', () => {
+            clearCalHover();
+            calHoverTimer = setTimeout(() => {
+                const card = state.cards.find(c => c.id == el.dataset.cardId);
+                if (!card) return;
+                const rect = el.getBoundingClientRect();
+                const textEl = el.querySelector('.truncate') || el;
+                const textRect = textEl.getBoundingClientRect();
+                calHover = document.createElement('div');
+                Object.assign(calHover.style, {
+                    position: 'fixed', zIndex: '210', width: '280px',
+                    filter: 'drop-shadow(0 8px 24px rgba(0,0,0,0.4))',
+                });
+                const left = textRect.right + 4;
+                const useLeft = left + 290 < window.innerWidth;
+                calHover.style.left = (useLeft ? left : textRect.left - 284) + 'px';
+                calHover.style.top = Math.min(rect.top - 10, window.innerHeight - 320) + 'px';
+                calHover.innerHTML = renderCardHtml(card);
+                calHover.addEventListener('mouseenter', () => { if (calHoverTimer) { clearTimeout(calHoverTimer); calHoverTimer = null; } });
+                calHover.addEventListener('mouseleave', () => clearCalHover());
+                calHover.addEventListener('mouseover', e => e.stopPropagation());
+                document.body.appendChild(calHover);
+            }, 400);
+        });
+        el.addEventListener('mouseleave', () => {
+            if (calHoverTimer) { clearTimeout(calHoverTimer); calHoverTimer = null; }
+            setTimeout(() => { if (calHover && !calHover.matches(':hover')) clearCalHover(); }, 150);
+        });
         el.addEventListener('click', e => {
             e.stopPropagation();
+            clearCalHover();
             if (clickTimer) return;
             clickTimer = setTimeout(() => {
                 clickTimer = null;
@@ -250,6 +290,7 @@ function render() {
         });
         el.addEventListener('dblclick', e => {
             e.stopPropagation();
+            clearCalHover();
             if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
             closeDayPopup();
             state._returnToCalendar = true;
@@ -425,15 +466,26 @@ function openDayPopup(ds, cellEl) {
         });
     });
 
-    // Close on click outside
+    // Close on click outside or ESC
     setTimeout(() => {
-        const closeHandler = e => {
+        const clickHandler = e => {
             if (dayPopup && !dayPopup.contains(e.target)) {
                 closeDayPopup();
-                document.removeEventListener('click', closeHandler);
+                cleanup();
             }
         };
-        document.addEventListener('click', closeHandler);
+        const keyHandler = e => {
+            if (e.key === 'Escape') {
+                closeDayPopup();
+                cleanup();
+            }
+        };
+        const cleanup = () => {
+            document.removeEventListener('click', clickHandler);
+            document.removeEventListener('keydown', keyHandler);
+        };
+        document.addEventListener('click', clickHandler);
+        document.addEventListener('keydown', keyHandler);
     }, 0);
 }
 

public/js/modules/context-menu.js

@@ -14,6 +14,14 @@ const tags = $('ctx-tags');
 
 export function hideContextMenu() { menu.classList.add('hidden'); }
 
+let ctxCloseTimer = null;
+menu.addEventListener('mouseleave', () => {
+    ctxCloseTimer = setTimeout(hideContextMenu, 400);
+});
+menu.addEventListener('mouseenter', () => {
+    if (ctxCloseTimer) { clearTimeout(ctxCloseTimer); ctxCloseTimer = null; }
+});
+
 document.addEventListener('click', hideContextMenu);
 document.addEventListener('contextmenu', e => { if (!menu.contains(e.target)) hideContextMenu(); });
 
@@ -26,6 +34,7 @@ export function showContextMenu(x, y, card) {
         <button class="ctx-item" data-action="open"><i class="ph ph-eye text-sm"></i><span class="font-pixel text-[10px]">open</span></button>
         <button class="ctx-item" data-action="edit"><i class="ph ph-pencil-simple text-sm"></i><span class="font-pixel text-[10px]">edit</span></button>
         <button class="ctx-item" data-action="duplicate"><i class="ph ph-copy text-sm"></i><span class="font-pixel text-[10px]">duplicate</span></button>
+        ${/^\d{4}-\d{2}-\d{2}/.test(card.title) ? `<button class="ctx-item" data-action="move-date"><i class="ph ph-calendar-dots text-sm"></i><span class="font-pixel text-[10px]">move to date</span></button>` : ''}
         <button class="ctx-item" data-action="save-md"><i class="ph ph-file-md text-sm"></i><span class="font-pixel text-[10px]">save .md</span></button>
         <button class="ctx-item" data-action="favorite"><i class="ph${isFavorite(card.id) ? '-fill' : ''} ph-star text-sm ${isFavorite(card.id) ? 'text-amber-400' : ''}"></i><span class="font-pixel text-[10px]">${isFavorite(card.id) ? 'unfavorite' : 'favorite'}</span></button>
         <div class="ctx-sep"></div>
@@ -155,7 +164,30 @@ export function showContextMenu(x, y, card) {
         const a = btn.dataset.action;
         if (a === 'open') { hideContextMenu(); window._openDetail(card.id); }
         else if (a === 'edit') { hideContextMenu(); window._openModal(card); }
-        else if (a === 'duplicate') { hideContextMenu(); await api('api/cards', { method: 'POST', body: { title: card.title + ' (copy)', body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } }); await window._reloadAll(); }
+        else if (a === 'duplicate') {
+            hideContextMenu();
+            const hasDate = /^\d{4}-\d{2}-\d{2}/.test(card.title);
+            if (hasDate) {
+                const curDate = card.title.substring(0, 10);
+                const newDate = await showDialog({ title: 'duplicate_to_date', input: 'date', defaultValue: curDate, okLabel: 'duplicate' });
+                if (!newDate) return;
+                const newTitle = card.title.replace(/^\d{4}-\d{2}-\d{2}/, newDate.trim());
+                await api('api/cards', { method: 'POST', body: { title: newTitle, body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } });
+            } else {
+                await api('api/cards', { method: 'POST', body: { title: card.title + ' (copy)', body: card.body, color: card.color, bucket_id: card.bucket_id, position: -1 } });
+            }
+            await window._reloadAll();
+        }
+        else if (a === 'move-date') {
+            hideContextMenu();
+            const curDate = card.title.substring(0, 10);
+            const newDate = await showDialog({ title: 'move_to_date', input: 'date', defaultValue: curDate, okLabel: 'move' });
+            if (!newDate || newDate === curDate) return;
+            const newTitle = card.title.replace(/^\d{4}-\d{2}-\d{2}/, newDate.trim());
+            await api(`api/cards/${card.id}`, { method: 'PATCH', body: { title: newTitle } });
+            await window._reloadAll();
+            if (card.caldav_uid) window._triggerSync?.();
+        }
         else if (a === 'save-md') { hideContextMenu(); window.location.href = `api/export-md?ids=${card.id}`; }
         else if (a === 'favorite') { hideContextMenu(); toggleFavorite(card.id); window._renderBoard(); }
         else if (a === 'color') toggle(colors);

public/js/modules/detail.js

@@ -458,17 +458,21 @@ function showContent(card) {
 }
 
 export function bindCheckboxes(container, card) {
-    container.querySelectorAll('input[type="checkbox"]').forEach((cb, idx) => {
+    container.querySelectorAll('.todo-item').forEach((item, idx) => {
-        cb.disabled = false;
+        const btn = item.querySelector('.todo-cb');
-        cb.addEventListener('change', async () => {
+        if (!btn) return;
+        const toggle = async () => {
             let n = 0;
             const body = card.body.replace(/- \[([ x])\]/g, (m, s) => n++ === idx ? `- [${s === 'x' ? ' ' : 'x'}]` : m);
             card.body = body;
             await api(`api/cards/${card.id}`, { method: 'PATCH', body: { body } });
             const c = state.cards.find(x => x.id == card.id);
             if (c) c.body = body;
+            btn.classList.toggle('checked');
+            item.classList.toggle('todo-done');
             window._renderBoard();
-        });
+        };
+        item.addEventListener('click', toggle);
     });
 
     metaEl.textContent = '> created: ' + card.created_at + '  |  modified: ' + card.updated_at +

public/js/modules/dialog.js

@@ -6,32 +6,135 @@ const overlay = $('dialog');
 const titleEl = $('dialog-title');
 const msgEl = $('dialog-msg');
 const inputEl = $('dialog-input');
+const datepickerEl = $('dialog-datepicker');
 const cancelBtn = $('dialog-cancel');
 const okBtn = $('dialog-ok');
 const closeBtn = $('dialog-close');
 let resolve = null;
+let dpMode = false;
+let dpYear, dpMonth, dpSelected;
+
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 function canCancel() { return !cancelBtn.classList.contains('hidden'); }
 
 function close(result) {
     overlay.classList.remove('open');
+    datepickerEl.classList.add('hidden');
+    datepickerEl.innerHTML = '';
+    dpMode = false;
     if (resolve) { resolve(result); resolve = null; }
 }
 
 function submit() {
-    close(inputEl.classList.contains('hidden') ? true : inputEl.value);
+    if (dpMode) {
+        close(dpSelected || null);
+    } else {
+        close(inputEl.classList.contains('hidden') ? true : inputEl.value);
+    }
 }
 
-export function showDialog({ title, message = '', input = false, placeholder = '', danger = false, okLabel = 'ok', cancelLabel = 'cancel' }) {
+function pad(n) { return String(n).padStart(2, '0'); }
+
+function renderDatepicker() {
+    const today = new Date();
+    const todayStr = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;
+    const firstDay = new Date(dpYear, dpMonth, 1).getDay();
+    const startOffset = (firstDay + 6) % 7;
+    const daysInMonth = new Date(dpYear, dpMonth + 1, 0).getDate();
+    const prevDays = new Date(dpYear, dpMonth, 0).getDate();
+
+    let html = `<div class="dp-header">
+        <button data-dp-nav="-1"><i class="ph ph-caret-left text-xs"></i></button>
+        <span class="dp-title">${MONTHS[dpMonth]} ${dpYear}</span>
+        <button data-dp-nav="1"><i class="ph ph-caret-right text-xs"></i></button>
+    </div><div class="dp-grid">`;
+
+    for (const d of DAYS) html += `<div class="dp-day-label">${d}</div>`;
+
+    for (let i = 0; i < 42; i++) {
+        const dayNum = i - startOffset + 1;
+        let ds, display, outClass = '';
+        if (dayNum < 1) {
+            display = prevDays + dayNum;
+            const pm = dpMonth === 0 ? 11 : dpMonth - 1;
+            const py = dpMonth === 0 ? dpYear - 1 : dpYear;
+            ds = `${py}-${pad(pm + 1)}-${pad(display)}`;
+            outClass = 'dp-out';
+        } else if (dayNum > daysInMonth) {
+            display = dayNum - daysInMonth;
+            const nm = dpMonth === 11 ? 0 : dpMonth + 1;
+            const ny = dpMonth === 11 ? dpYear + 1 : dpYear;
+            ds = `${ny}-${pad(nm + 1)}-${pad(display)}`;
+            outClass = 'dp-out';
+        } else {
+            display = dayNum;
+            ds = `${dpYear}-${pad(dpMonth + 1)}-${pad(dayNum)}`;
+        }
+        const isToday = ds === todayStr ? 'dp-today' : '';
+        const isSel = ds === dpSelected ? 'dp-selected' : '';
+        html += `<div class="dp-day ${outClass} ${isToday} ${isSel}" data-dp-date="${ds}">${display}</div>`;
+    }
+
+    html += '</div>';
+    datepickerEl.innerHTML = html;
+
+    // Nav buttons
+    datepickerEl.querySelectorAll('[data-dp-nav]').forEach(btn => {
+        btn.addEventListener('click', e => {
+            e.preventDefault();
+            dpMonth += parseInt(btn.dataset.dpNav);
+            if (dpMonth > 11) { dpMonth = 0; dpYear++; }
+            if (dpMonth < 0) { dpMonth = 11; dpYear--; }
+            renderDatepicker();
+        });
+    });
+
+    // Day click
+    datepickerEl.querySelectorAll('[data-dp-date]').forEach(day => {
+        day.addEventListener('click', () => {
+            dpSelected = day.dataset.dpDate;
+            // Parse selected date to navigate to its month
+            const [y, m] = dpSelected.split('-').map(Number);
+            if (y !== dpYear || m - 1 !== dpMonth) {
+                dpYear = y;
+                dpMonth = m - 1;
+            }
+            renderDatepicker();
+        });
+        day.addEventListener('dblclick', () => {
+            dpSelected = day.dataset.dpDate;
+            submit();
+        });
+    });
+}
+
+export function showDialog({ title, message = '', input = false, placeholder = '', defaultValue = '', danger = false, okLabel = 'ok', cancelLabel = 'cancel' }) {
     return new Promise(res => {
         resolve = res;
         titleEl.textContent = title;
         msgEl.textContent = message;
         msgEl.classList.toggle('hidden', !message);
-        inputEl.classList.toggle('hidden', input === false);
+        dpMode = input === 'date';
-        inputEl.value = '';
+
-        inputEl.placeholder = placeholder;
+        if (dpMode) {
-        inputEl.type = input === 'password' ? 'password' : 'text';
+            inputEl.classList.add('hidden');
+            datepickerEl.classList.remove('hidden');
+            const d = defaultValue ? new Date(defaultValue + 'T00:00:00') : new Date();
+            dpYear = d.getFullYear();
+            dpMonth = d.getMonth();
+            dpSelected = defaultValue || `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+            renderDatepicker();
+        } else {
+            datepickerEl.classList.add('hidden');
+            datepickerEl.innerHTML = '';
+            inputEl.classList.toggle('hidden', input === false);
+            inputEl.value = defaultValue;
+            inputEl.placeholder = placeholder;
+            inputEl.type = input === 'password' ? 'password' : 'text';
+        }
+
         okBtn.textContent = okLabel;
         okBtn.classList.toggle('border-t-danger', danger);
         okBtn.classList.toggle('text-t-danger', danger);
@@ -41,7 +144,7 @@ export function showDialog({ title, message = '', input = false, placeholder = '
         cancelBtn.classList.toggle('hidden', !cancelLabel);
         if (closeBtn) closeBtn.classList.toggle('hidden', !cancelLabel);
         overlay.classList.add('open');
-        if (input) inputEl.focus(); else okBtn.focus();
+        if (input && !dpMode) inputEl.focus(); else okBtn.focus();
     });
 }
 

public/js/modules/editor.js

@@ -151,6 +151,9 @@ export function openModal(card = null) {
 }
 
 inpTitle.addEventListener('input', updatePreview);
+inpTitle.addEventListener('keydown', e => {
+    if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); body.focus(); }
+});
 
 // ── Line numbers ──
 
@@ -315,9 +318,8 @@ function updatePreview() {
     addCodeCopyButtons(previewContent);
     formatTodoItems(previewContent);
     // Interactive checkboxes in editor preview — toggle in textarea
-    previewContent.querySelectorAll('input[type="checkbox"]').forEach((cb, idx) => {
+    previewContent.querySelectorAll('.todo-item').forEach((item, idx) => {
-        cb.disabled = false;
+        item.addEventListener('click', () => {
-        cb.addEventListener('change', () => {
             let n = 0;
             body.value = body.value.replace(/- \[([ x])\]/g, (m, s) => n++ === idx ? `- [${s === 'x' ? ' ' : 'x'}]` : m);
             updatePreview();
@@ -754,10 +756,17 @@ document.addEventListener('click', e => {
     if (tagAcVisible && !tagAc.contains(e.target) && e.target !== body) hideTagAc();
     if (snippetAcVisible && !snippetAc.contains(e.target) && e.target !== body) hideSnippetAc();
 });
+// Capture phase: intercept ESC before dialog overlay can close the modal
 document.addEventListener('keydown', e => {
-    if (tagAcVisible && e.key === 'Escape') hideTagAc();
+    if (e.key === 'Escape' && (tagAcVisible || snippetAcVisible || linkAcVisible)) {
-    if (snippetAcVisible && e.key === 'Escape') hideSnippetAc();
+        e.stopImmediatePropagation();
-});
+        e.stopPropagation();
+        e.preventDefault();
+        if (linkAcVisible) hideLinkAc();
+        if (tagAcVisible) hideTagAc();
+        if (snippetAcVisible) hideSnippetAc();
+    }
+}, true);
 
 function completeTagAc(idx) {
     const tag = tagAcItems[idx];

public/js/modules/markdown.js

@@ -104,13 +104,25 @@ export function formatTodoItems(container) {
         const cb = li.querySelector('input[type="checkbox"]');
         if (!cb) return;
         if (li.classList.contains('todo-item')) return;
+
+        const checked = cb.checked;
         li.classList.add('todo-item');
-        if (cb.checked) li.classList.add('todo-done');
+        if (checked) li.classList.add('todo-done');
-        // Wrap remaining text nodes in a span
+
+        // Replace <input> with a styled button
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'todo-cb' + (checked ? ' checked' : '');
+        btn.innerHTML = '<i class="ph ph-check"></i>';
+        btn.dataset.idx = cb.dataset.idx || '';
+        cb.replaceWith(btn);
+
+        // Wrap remaining content in a span
         const span = document.createElement('span');
         span.className = 'todo-text';
-        while (cb.nextSibling) span.appendChild(cb.nextSibling);
+        while (btn.nextSibling) span.appendChild(btn.nextSibling);
         li.appendChild(span);
+
     });
 }
 

public/js/modules/search.js

@@ -1,7 +1,7 @@
 // ── Search ──
 
-import { $, esc, escRe, fuzzyMatch, countSubstring, highlight } from './util.js';
+import { $, esc, escRe, api, fuzzyMatch, countSubstring, highlight } from './util.js';
-import { state, parseTags, tagChipHtml } from './state.js';
+import { state, parseTags, tagChipHtml, getChildren } from './state.js';
 import { renderMd, stripMd } from './markdown.js';
 
 const overlay = $('search');
@@ -170,9 +170,12 @@ function hitHtml(card, idx, words) {
     } else { snippet = esc(plain.substring(0, 120)) + (plain.length > 120 ? '...' : ''); }
 
     const htags = parseTags(card);
-    return `<div class="search-hit flex items-start gap-3 px-4 py-2.5 cursor-pointer transition-colors hover:bg-t-raised" data-idx="${idx}">
+    const children = getChildren(card.id);
+    const isGroup = children.length > 0;
+    const canDrag = !isGroup && !card.parent_id;
+    return `<div class="search-hit flex items-start gap-3 px-4 py-2.5 cursor-pointer transition-colors hover:bg-t-raised" data-idx="${idx}" data-card-id="${card.id}" ${canDrag ? 'draggable="true"' : ''}>
         <span class="w-2 h-2 rounded-full shrink-0 mt-1.5" style="background:${card.color}"></span>
-        <div class="min-w-0 flex-1"><div class="text-xs text-t-bright font-pixel leading-relaxed truncate">${title}</div>
+        <div class="min-w-0 flex-1"><div class="text-xs text-t-bright font-pixel leading-relaxed truncate flex items-center gap-2">${title}${isGroup ? `<span style="font-size:9px;padding:1px 5px;border-radius:3px;background:${card.color};color:#000;" class="font-pixel">${children.length + 1}</span>` : ''}</div>
         <div class="text-[11px] text-t-muted leading-relaxed mt-0.5 line-clamp-2">${snippet}</div>
         ${htags.length ? `<div class="flex flex-wrap gap-1 mt-1">${htags.slice(0, 3).map(t => `<span class="tag-chip" style="font-size:8px;padding:0 4px;">#${esc(t)}</span>`).join('')}</div>` : ''}</div></div>`;
 }
@@ -185,6 +188,42 @@ function bindHits() {
             else { active = i; updateActive(); }
         });
         el.addEventListener('dblclick', () => { const i = parseInt(el.dataset.idx); if (hits[i]) window._openDetail(hits[i].id); });
+
+        // Drag: only non-group, non-child cards
+        if (el.draggable) {
+            el.addEventListener('dragstart', e => {
+                e.dataTransfer.setData('text/plain', el.dataset.cardId);
+                e.dataTransfer.effectAllowed = 'move';
+                el.style.opacity = '0.4';
+            });
+            el.addEventListener('dragend', () => { el.style.opacity = ''; });
+        }
+
+        // Drop target: any card can receive (to form group)
+        el.addEventListener('dragover', e => {
+            const dragId = e.dataTransfer.types.includes('text/plain') ? true : false;
+            if (!dragId) return;
+            if (el.dataset.cardId === e.dataTransfer.getData('text/plain')) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            el.style.background = 'var(--t-raised)';
+            el.style.borderLeft = `3px solid var(--t-accent)`;
+        });
+        el.addEventListener('dragleave', () => {
+            el.style.background = '';
+            el.style.borderLeft = '';
+        });
+        el.addEventListener('drop', async e => {
+            el.style.background = '';
+            el.style.borderLeft = '';
+            const dragId = e.dataTransfer.getData('text/plain');
+            const targetId = el.dataset.cardId;
+            if (!dragId || !targetId || dragId === targetId) return;
+            e.preventDefault();
+            await api(`api/cards/${dragId}`, { method: 'PATCH', body: { parent_id: targetId } });
+            await window._reloadAll();
+            search(input.value);
+        });
     });
 }
 

src/CalDavClient.php

@@ -190,7 +190,8 @@ class CalDavClient
         $block = $m[1];
 
         $get = function ($prop) use ($block) {
-            if (preg_match('/^' . preg_quote($prop, '/') . '[^:]*:(.+)$/m', $block, $m)) return trim($m[1]);
+            // Match property value: everything after "PROP...:" until the next property or end
+            if (preg_match('/^' . preg_quote($prop, '/') . '[^:]*:([\s\S]*?)(?=\n[A-Z][-A-Z]*[;:]|\z)/m', $block, $m)) return trim($m[1]);
             return null;
         };
 

src/CalDavSync.php

@@ -171,7 +171,7 @@ class CalDavSync
         $location = '';
         if (preg_match('/\*\*Ort:\*\*\s*(.+)/i', $body, $lm)) $location = trim($lm[1]);
         $description = '';
-        if (preg_match('/\*\*Notizen:\*\*\s*\n([\s\S]*?)(?:\n\n#|\z)/i', $body, $nm)) $description = trim($nm[1]);
+        if (preg_match('/\*\*Notizen:\*\*\s*\n([\s\S]*?)(?=\n#[a-z]|\z)/i', $body, $nm)) $description = trim($nm[1]);
 
         // Build DTSTART/DTEND
         $dateCompact = str_replace('-', '', $date);
@@ -428,8 +428,11 @@ class CalDavSync
             if (isset($remoteMap[$uid])) {
                 $remote = $remoteMap[$uid];
                 $remoteClient = $this->makeClient($remote['cal_url']);
-                $localChanged = !$card['caldav_synced_at'] || $card['updated_at'] > $card['caldav_synced_at'];
+                // Compare timestamps with 2s tolerance to avoid false positives from sync-triggered updates
-                $remoteChanged = $card['caldav_etag'] !== $remote['etag'];
+                $localTime = strtotime($card['updated_at'] ?? '2000-01-01');
+                $syncTime = strtotime($card['caldav_synced_at'] ?? '2000-01-01');
+                $localChanged = !$card['caldav_synced_at'] || ($localTime - $syncTime) > 2;
+                $remoteChanged = !$card['caldav_etag'] || $card['caldav_etag'] !== $remote['etag'];
 
                 // Always backfill rrule if missing locally but present remotely
                 $remoteRRule = $remote['rrule'] ?? null;
@@ -440,7 +443,6 @@ class CalDavSync
                 }
 
                 if ($localChanged && $remoteChanged) {
-                    $localTime = strtotime($card['updated_at']);
                     $remoteTime = $remote['last_modified'] ? strtotime($remote['last_modified']) : 0;
                     if ($localTime >= $remoteTime) {
                         $this->pushCard($remoteClient, $card, $remote['href'], $remote['etag']);