haufen sachen

2026-04-08 22:46:48 +02:00
1 parent 416ca9e854
commit e6243701a3
@@ -1,7 +1,7 @@
 <?php

 define('APP_NAME', 'hyprcrd');
-define('APP_VERSION', '0.3.0');
+define('APP_VERSION', '0.5.1');

 // Database path — writable directory, outside webroot
 define('DB_PATH', __DIR__ . '/data/hyprcrd.db');
@@ -47,7 +47,7 @@ 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"
+rm -rf "$STAGE/public/uploads" "$STAGE/data"
 mkdir -p "$STAGE/public/uploads"
 touch "$STAGE/public/uploads/.gitkeep"
 rm -f "$STAGE/public/css/tailwind.css"
@@ -75,8 +75,8 @@ fi
 echo "Creating ${DIST}..."
 cd "$STAGE"
 zip -r "$OLDPWD/$DIST" . -x "*.gitkeep" 2>/dev/null
-# Re-add gitkeep files
-zip "$OLDPWD/$DIST" data/.gitkeep public/uploads/.gitkeep
+# Re-add gitkeep for uploads only
+zip "$OLDPWD/$DIST" public/uploads/.gitkeep
 cd "$OLDPWD"

 # Cleanup
@@ -76,6 +76,27 @@ body::after {

 .board-card.preview-active { border-color: var(--t-accent) !important; box-shadow: 0 0 0 1px var(--t-accent), 0 0 12px -2px color-mix(in srgb, var(--t-accent) 30%, transparent); }

+/* Upcoming banner */
+.upcoming-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 11px; border-radius: 3px; border: 1px solid var(--t-border); cursor: pointer; transition: border-color 0.12s; }
+.upcoming-item:hover { border-color: var(--t-accent); }
+.upcoming-dismiss { background: none; border: none; color: var(--t-dim); cursor: pointer; padding: 2px; transition: color 0.12s; }
+.upcoming-dismiss:hover { color: var(--t-danger); }
+
+/* Settings */
+.settings-tab { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 11px; color: var(--t-muted); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: color 0.1s, background 0.1s; border-left: 2px solid transparent; }
+.settings-tab:hover { color: var(--t-bright); background: var(--t-raised); }
+.settings-tab.active { color: var(--t-accent); border-left-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 8%, transparent); }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+.card-bar-pulse { animation: pulse-glow 2s ease-in-out infinite; }
+.board-card:has(.card-bar-pulse) { border-color: var(--t-danger); }
+.due-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 8px; font-size: 9px; line-height: 16px; color: var(--t-bg); font-family: var(--t-font-pixel); }
+.card-done-badge { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 24px 24px; border-color: transparent transparent #4ade80 transparent; z-index: 1; }
+.card-done-badge i { position: absolute; bottom: -22px; right: 1px; font-size: 10px; color: #000; }
+.board-card:has(.card-bar-pulse) .card-bar-pulse ~ * .text-t-danger { animation: pulse-glow 2s ease-in-out infinite; }
+.card-spinner { animation: spin 0.8s linear infinite; }
+
 /* Cards */
 .card-bar { image-rendering: pixelated; height: 3px; }
 .board-card { min-height: 180px; }
@@ -631,7 +652,7 @@ body.detail-image-fs-open { overflow: hidden; }
 /* Markdown gallery */
 .md-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 0.8em 0; }
 .md-gallery-item { aspect-ratio: 1; overflow: hidden; border-radius: 4px; border: 1px solid var(--t-border); cursor: pointer; }
-.md-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s; }
+.md-gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; max-width: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; }
 .md-gallery-item:hover img { transform: scale(1.05); }

 /* Image fullscreen prev/next */
@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:"JetBrains Mono", monospace;--color-amber-400:oklch(82.8% .189 84.429);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-sm:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-pixel:"Silkscreen", cursive;--color-t-bg:var(--t-bg);--color-t-surface:var(--t-surface);--color-t-raised:var(--t-raised);--color-t-border:var(--t-border);--color-t-dim:var(--t-dim);--color-t-muted:var(--t-muted);--color-t-text:var(--t-text);--color-t-bright:var(--t-bright);--color-t-accent:var(--t-accent);--color-t-accent2:var(--t-accent2);--color-t-danger:var(--t-danger)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkLine truncated
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:"JetBrains Mono", monospace;--color-amber-400:oklch(82.8% .189 84.429);--color-green-400:oklch(79.2% .209 151.711);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-2xl:42rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-sm:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-pixel:"Silkscreen", cursive;--color-t-bg:var(--t-bg);--color-t-surface:var(--t-surface);--color-t-raised:var(--t-raised);--color-t-border:var(--t-border);--color-t-dim:var(--t-dim);--color-t-muted:var(--t-muted);--color-t-text:var(--t-text);--color-t-bright:var(--t-bright);--color-t-accent:var(--t-accent);--color-t-accent2:var(--t-accent2);--color-t-danger:var(--t-danger)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::fiLine truncated
@@ -3,10 +3,12 @@
 require_once __DIR__ . '/../src/bootstrap.php';
 require_once __DIR__ . '/../src/CalDavClient.php';
 require_once __DIR__ . '/../src/CalDavSync.php';
+require_once __DIR__ . '/../src/WebDavNotes.php';

 $db = Database::connect();

-// ── Security headers ──
+// ── Cache & Security headers ──
+header('Cache-Control: no-cache, must-revalidate');
 header('X-Content-Type-Options: nosniff');
 header('X-Frame-Options: DENY');
 header('X-XSS-Protection: 1; mode=block');
@@ -46,7 +48,7 @@ if (str_starts_with($route, '/api/auth')) {

    // GET /api/auth/status
    if ($route === '/api/auth/status' && $method === 'GET') {
-        echo json_encode(['setup' => $isSetup, 'logged_in' => $isLoggedIn, 'csrf' => $_SESSION['csrf_token']]);
+        echo json_encode(['setup' => $isSetup, 'logged_in' => $isLoggedIn, 'csrf' => $_SESSION['csrf_token'], 'version' => APP_VERSION]);
        exit;
    }

@@ -103,6 +105,68 @@ if (str_starts_with($route, '/api/auth')) {
        exit;
    }

+    // POST /api/auth/password — change password (requires current password)
+    if ($route === '/api/auth/password' && $method === 'POST') {
+        $input = json_decode(file_get_contents('php://input'), true);
+        $current = $input['current'] ?? '';
+        $newPass = $input['new'] ?? '';
+        $hash = $db->query("SELECT value FROM settings WHERE key = 'password_hash'")->fetchColumn();
+        if (!password_verify($current, $hash)) {
+            http_response_code(403);
+            echo json_encode(['error' => 'wrong password']);
+            exit;
+        }
+        if (strlen($newPass) < 4) {
+            http_response_code(400);
+            echo json_encode(['error' => 'min 4 characters']);
+            exit;
+        }
+        // Re-encrypt CalDAV credentials with new key (atomic — rollback on failure)
+        $oldKey = substr(hash('sha256', $hash), 0, 32);
+        $newHash = password_hash($newPass, PASSWORD_BCRYPT);
+        $newKey = substr(hash('sha256', $newHash), 0, 32);
+
+        $credKeys = ['caldav_url', 'caldav_username', 'caldav_password'];
+        $reEncrypted = [];
+        $rekeyOk = true;
+
+        foreach ($credKeys as $ck) {
+            $enc = $db->query("SELECT value FROM settings WHERE key = '{$ck}'")->fetchColumn();
+            if (!$enc) continue;
+            $raw = base64_decode($enc);
+            if (strlen($raw) < 17) continue;
+            $iv = substr($raw, 0, 16);
+            $cipher = base64_encode(substr($raw, 16));
+            $plain = openssl_decrypt($cipher, 'aes-256-cbc', $oldKey, 0, $iv);
+            if ($plain === false) { $rekeyOk = false; break; }
+            $newIv = random_bytes(16);
+            $newCipher = openssl_encrypt($plain, 'aes-256-cbc', $newKey, 0, $newIv);
+            $reEncrypted[$ck] = base64_encode($newIv . base64_decode($newCipher));
+        }
+
+        if (!$rekeyOk) {
+            http_response_code(500);
+            echo json_encode(['error' => 'could not re-encrypt credentials — password NOT changed. Please re-enter CalDAV credentials first.']);
+            exit;
+        }
+
+        // All re-encryption succeeded — commit everything
+        $db->beginTransaction();
+        // Save old hash for re-key recovery
+        $db->prepare("INSERT OR REPLACE INTO settings (key, value) VALUES ('prev_password_hash', :h)")->execute(['h' => $hash]);
+        foreach ($reEncrypted as $ck => $val) {
+            $db->prepare("UPDATE settings SET value = :v WHERE key = :k")->execute(['v' => $val, 'k' => $ck]);
+        }
+        $db->prepare("UPDATE settings SET value = :h WHERE key = 'password_hash'")->execute(['h' => $newHash]);
+        $db->commit();
+
+        // Mark all notes for re-push (re-encrypt with new key)
+        $db->exec("UPDATE cards SET caldav_etag = NULL, caldav_synced_at = NULL WHERE caldav_uid LIKE 'note:%'");
+
+        echo json_encode(['ok' => true, 'rekey' => true]);
+        exit;
+    }
+
    http_response_code(404);
    echo json_encode(['error' => 'not found']);
    exit;
@@ -160,10 +224,25 @@ if (str_starts_with($route, '/api/')) {
    }

    if ($route === '/api/cards' && $method === 'GET') {
+        if (!empty($_GET['ids'])) {
+            $ids = array_filter(array_map('intval', explode(',', $_GET['ids'])));
+            if ($ids) {
+                $ph = implode(',', array_fill(0, count($ids), '?'));
+                $stmt = $db->prepare("SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id IN ($ph)");
+                $stmt->execute($ids);
+                echo json_encode($stmt->fetchAll());
+                exit;
+            }
+        }
        echo json_encode($db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id ORDER BY c.position ASC, c.created_at DESC')->fetchAll());
        exit;
    }

+    if ($route === '/api/cards/meta' && $method === 'GET') {
+        echo json_encode($db->query('SELECT c.id, c.title, c.color, c.tags, c.bucket_id, c.parent_id, c.position, c.created_at, c.updated_at, c.due_date, c.caldav_uid, c.caldav_rrule, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id ORDER BY c.position ASC, c.created_at DESC')->fetchAll());
+        exit;
+    }
+
    if (preg_match('#^/api/cards/(\d+)$#', $route, $m) && $method === 'DELETE') {
        // CalDAV tombstone for synced cards
        $card = $db->prepare('SELECT caldav_uid FROM cards WHERE id = :id');
@@ -179,7 +258,7 @@ if (str_starts_with($route, '/api/')) {
    if (preg_match('#^/api/cards/(\d+)$#', $route, $m) && $method === 'PATCH') {
        $input = json_decode(file_get_contents('php://input'), true);
        $fields = []; $params = ['id' => $m[1]];
-        foreach (['title', 'body', 'color', 'position', 'bucket_id', 'parent_id'] as $f) {
+        foreach (['title', 'body', 'color', 'position', 'bucket_id', 'parent_id', 'due_date'] as $f) {
            if (array_key_exists($f, $input)) { $fields[] = "$f = :$f"; $params[$f] = $input[$f]; }
        }
        if (array_key_exists('body', $input)) { $fields[] = 'tags = :tags'; $params['tags'] = extractTags($input['body']); }
@@ -537,6 +616,133 @@ if (str_starts_with($route, '/api/')) {
        echo json_encode($db->query('SELECT * FROM caldav_sync_log ORDER BY id DESC LIMIT 50')->fetchAll()); exit;
    }

+    // WebDAV Notes sync
+    if ($route === '/api/notes/sync' && $method === 'POST') {
+        $notes = new WebDavNotes($db);
+        echo json_encode($notes->sync()); exit;
+    }
+
+    // Re-key notes: decrypt with old key, re-encrypt with current key
+    if ($route === '/api/notes/rekey' && $method === 'POST') {
+        $input = json_decode(file_get_contents('php://input'), true);
+        $oldPass = $input['old_password'] ?? '';
+        if (!$oldPass) { http_response_code(400); echo json_encode(['error' => 'old password required']); exit; }
+
+        $currentHash = $db->query("SELECT value FROM settings WHERE key = 'password_hash'")->fetchColumn();
+        $currentKey = substr(hash('sha256', $currentHash), 0, 32);
+        $prevHash = $db->query("SELECT value FROM settings WHERE key = 'prev_password_hash'")->fetchColumn();
+
+        // Build candidate old keys: try prev hash first, then verify password against it
+        $candidateKeys = [];
+        if ($prevHash) {
+            $candidateKeys[] = substr(hash('sha256', $prevHash), 0, 32);
+            // Maybe password was changed multiple times — prev_hash might not match oldPass
+            if (password_verify($oldPass, $prevHash)) {
+                // Confirmed: prev hash matches old password
+                array_unshift($candidateKeys, substr(hash('sha256', $prevHash), 0, 32));
+            }
+        }
+        // Also try current key (notes might already be on current key)
+        $candidateKeys[] = $currentKey;
+
+        // Get WebDAV client
+        $caldavSync = new CalDavSync($db);
+        $settings = $caldavSync->getSettings();
+        if (empty($settings['url'])) { echo json_encode(['ok' => false, 'error' => 'no CalDAV credentials']); exit; }
+
+        $url = $settings['url'];
+        $user = $settings['username'];
+        $passEnc = $db->query("SELECT value FROM settings WHERE key = 'caldav_password'")->fetchColumn();
+        $passRaw = base64_decode($passEnc);
+        $passIv = substr($passRaw, 0, 16);
+        $passCipher = base64_encode(substr($passRaw, 16));
+        $pass = openssl_decrypt($passCipher, 'aes-256-cbc', $currentKey, 0, $passIv) ?: '';
+
+        if (!$pass) { echo json_encode(['ok' => false, 'error' => 'cannot decrypt CalDAV password']); exit; }
+
+        if (preg_match('#(https?://[^/]+)/remote\.php/dav/calendars/([^/]+)#', $url, $m)) {
+            $notesUrl = $m[1] . '/remote.php/dav/files/' . $m[2] . '/Notes/';
+        } else { echo json_encode(['ok' => false, 'error' => 'cannot derive notes URL']); exit; }
+
+        $client = new CalDavClient($notesUrl, $user, $pass);
+        $notes = new WebDavNotes($db);
+        $remoteNotes = $notes->listRemoteNotes();
+        if (empty($remoteNotes)) { echo json_encode(['ok' => false, 'error' => 'no remote notes']); exit; }
+
+        // Find working key by testing first encrypted note
+        $parsed = parse_url($notesUrl);
+        $base = $parsed['scheme'] . '://' . $parsed['host'] . (isset($parsed['port']) ? ':' . $parsed['port'] : '');
+        $workingKey = null;
+
+        foreach ($remoteNotes as $testNote) {
+            $testRes = $client->request('GET', $base . $testNote['href']);
+            $testBody = $testRes['body'] ?? '';
+            if (!str_starts_with($testBody, 'HYPRCRD-ENCRYPTED-V1')) continue;
+
+            $encData = trim(explode("\n", $testBody, 2)[1] ?? '');
+            $raw = base64_decode($encData);
+            if (strlen($raw) < 17) continue;
+            $iv = substr($raw, 0, 16);
+            $cipher = substr($raw, 16);
+
+            foreach ($candidateKeys as $tryKey) {
+                $plain = openssl_decrypt($cipher, 'aes-256-cbc', $tryKey, OPENSSL_RAW_DATA, $iv);
+                if ($plain !== false && (str_contains($plain, '#') || str_contains($plain, "\n"))) {
+                    $workingKey = $tryKey;
+                    break 2;
+                }
+            }
+        }
+
+        if (!$workingKey) {
+            echo json_encode(['ok' => false, 'error' => 'could not decrypt — old key not found']);
+            exit;
+        }
+
+        if ($workingKey === $currentKey) {
+            echo json_encode(['ok' => true, 'rekeyed' => 0, 'message' => 'notes already on current key']);
+            exit;
+        }
+
+        // Re-encrypt all notes
+        $count = 0;
+        foreach ($remoteNotes as $note) {
+            $res = $client->request('GET', $base . $note['href']);
+            if ($res['status'] !== 200) continue;
+            $body = $res['body'];
+            if (!str_starts_with($body, 'HYPRCRD-ENCRYPTED-V1')) continue;
+
+            $encData = trim(explode("\n", $body, 2)[1] ?? '');
+            $raw = base64_decode($encData);
+            if (strlen($raw) < 17) continue;
+            $plain = openssl_decrypt(substr($raw, 16), 'aes-256-cbc', $workingKey, OPENSSL_RAW_DATA, substr($raw, 0, 16));
+            if ($plain === false) continue;
+
+            $newIv = random_bytes(16);
+            $newCipher = openssl_encrypt($plain, 'aes-256-cbc', $currentKey, OPENSSL_RAW_DATA, $newIv);
+            $client->request('PUT', $base . $note['href'], "HYPRCRD-ENCRYPTED-V1\n" . base64_encode($newIv . $newCipher), ['Content-Type: text/markdown; charset=utf-8']);
+            $count++;
+        }
+
+        // Clear and re-pull
+        $db->exec("DELETE FROM cards WHERE caldav_uid LIKE 'note:%'");
+        $db->exec("DELETE FROM caldav_tombstones WHERE caldav_uid LIKE 'note:%'");
+        $db->exec("DELETE FROM settings WHERE key = 'prev_password_hash'");
+
+        echo json_encode(['ok' => true, 'rekeyed' => $count]);
+        exit;
+    }
+
+    // Force re-sync: clear all notes state and re-pull
+    if ($route === '/api/notes/reset' && $method === 'POST') {
+        $deleted = $db->exec("DELETE FROM cards WHERE caldav_uid LIKE 'note:%'");
+        $db->exec("DELETE FROM caldav_tombstones WHERE caldav_uid LIKE 'note:%'");
+        $notes = new WebDavNotes($db);
+        $result = $notes->sync();
+        $result['reset'] = $deleted;
+        echo json_encode($result); exit;
+    }
+
    http_response_code(404); echo json_encode(['error' => 'not found']); exit;
 }

@@ -551,7 +757,7 @@ if (str_starts_with($route, '/api/')) {
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/vendor/phosphor-regular.css">
    <link rel="stylesheet" href="css/vendor/phosphor-fill.css">
-    <link rel="stylesheet" href="css/tailwind.out.css">
+    <link rel="stylesheet" href="css/tailwind.out.css?v=<?= APP_VERSION ?>">
    <script src="js/vendor/marked.min.js"></script>
    <script src="js/vendor/purify.min.js"></script>
    <link rel="stylesheet" href="css/style.css?v=<?= time() ?>">
@@ -584,7 +790,7 @@ if (str_starts_with($route, '/api/')) {
            <div class="flex items-center gap-3">
                <i class="ph ph-terminal-window text-t-accent text-xl"></i>
                <h1 class="font-pixel text-t-accent text-lg tracking-wider">hyprcrd</h1>
-                <span class="text-[10px] text-t-dim font-pixel ml-1">v0.1</span>
+                <span class="text-[10px] text-t-dim font-pixel ml-1">v<?= APP_VERSION ?></span>
                <button id="search-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors ml-3">
                    <i class="ph ph-magnifying-glass text-sm"></i><span class="font-pixel text-[10px]">search</span>
                    <kbd class="text-[9px] text-t-dim border border-t-border rounded px-1 py-0.5 ml-1 font-pixel">ctrl+k</kbd>
@@ -614,6 +820,9 @@ if (str_starts_with($route, '/api/')) {
            <button id="superview-toggle" class="flex items-center gap-1.5 px-2 py-1 text-[10px] font-pixel text-t-dim hover:text-t-accent transition-colors shrink-0 ml-2" title="compact list view">
                <i class="ph ph-list text-xs"></i>
            </button>
+            <button id="hide-done" class="flex items-center gap-1.5 px-2 py-1 text-[10px] font-pixel text-t-dim hover:text-t-accent transition-colors shrink-0 ml-2" title="toggle done">
+                <i class="ph ph-check-circle text-xs"></i>
+            </button>
            <button id="hide-termine" class="flex items-center gap-1.5 px-2 py-1 text-[10px] font-pixel text-t-dim hover:text-t-accent transition-colors shrink-0 ml-2" title="toggle appointments">
                <i class="ph ph-calendar-x text-xs"></i>
            </button>
@@ -624,12 +833,14 @@ if (str_starts_with($route, '/api/')) {
        </div>
        <div id="group-bar" class="hidden flex items-center gap-2 px-6 pb-2 relative z-[1]"></div>
    </header>
+    <div id="upcoming-banner" class="hidden shrink-0"></div>
    <div id="board-wrapper" class="flex flex-1 min-h-0 overflow-hidden">
        <div id="board" class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 px-6 pt-5 pb-6 flex-1 overflow-y-auto content-start"></div>
        <div id="board-preview" class="hidden border-l border-t-border bg-t-surface flex flex-col" style="width:40%;min-width:300px;max-width:500px;">
-            <div id="board-preview-header" class="flex items-center gap-2 px-4 py-2.5 border-b border-t-border shrink-0">
+            <div id="board-preview-header" class="flex items-center gap-2 px-4 py-2.5 border-b border-t-border shrink-0 relative">
                <div class="card-bar w-8 rounded-sm" id="board-preview-color"></div>
                <h3 id="board-preview-title" class="font-pixel text-xs text-t-bright flex-1 truncate"></h3>
+                <span id="board-preview-done-badge" class="hidden"><i class="ph ph-check-circle text-sm text-green-400"></i></span>
                <button id="board-preview-edit" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-pencil-simple text-sm"></i></button>
                <button id="board-preview-close" class="text-t-muted hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i></button>
            </div>
@@ -660,15 +871,9 @@ if (str_starts_with($route, '/api/')) {
            <button id="logout-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                <i class="ph ph-sign-out text-sm"></i><span class="font-pixel text-[10px]">logout</span>
            </button>
-            <div id="theme-picker" class="theme-picker">
-                <button id="theme-toggle" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent2 hover:text-t-accent2 transition-colors">
-                    <i class="ph ph-sliders-horizontal text-sm"></i><span class="font-pixel text-[10px]">settings</span><i class="ph ph-caret-down text-[10px]"></i>
-                </button>
-                <div class="theme-menu bg-t-surface border border-t-border shadow-2xl p-2 min-w-[170px]">
-                    <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim px-2 pb-1">theme</div>
-                    <div id="theme-list" class="space-y-1"></div>
-                </div>
-            </div>
+            <button id="settings-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent2 hover:text-t-accent2 transition-colors">
+                <i class="ph ph-gear text-sm"></i><span class="font-pixel text-[10px]">settings</span>
+            </button>
        </div>
        <div id="footer-count" class="font-pixel text-[10px] text-t-dim whitespace-nowrap absolute left-1/2 -translate-x-1/2"></div>
        <div class="flex items-center gap-2">
@@ -868,6 +1073,150 @@ if (str_starts_with($route, '/api/')) {
        </div>
    </div>

+    <!-- Settings -->
+    <div class="overlay fixed inset-0 z-[88] flex justify-center items-center px-6" style="background:var(--t-overlay)" id="settings-overlay">
+        <div class="bg-t-surface border border-t-border shadow-2xl w-full max-w-2xl flex" style="border-radius:4px;height:90vh;">
+            <div class="w-44 shrink-0 border-r border-t-border py-4 flex flex-col gap-1" id="settings-nav">
+                <button class="settings-tab active" data-tab="branding"><i class="ph ph-terminal-window text-sm"></i><span class="font-pixel text-[10px]">hyprcrd</span></button>
+                <button class="settings-tab" data-tab="account"><i class="ph ph-user text-sm"></i><span class="font-pixel text-[10px]">account</span></button>
+                <button class="settings-tab" data-tab="theme"><i class="ph ph-palette text-sm"></i><span class="font-pixel text-[10px]">themes</span></button>
+                <button class="settings-tab" data-tab="sync"><i class="ph ph-cloud-arrow-up text-sm"></i><span class="font-pixel text-[10px]">sync</span></button>
+                <button class="settings-tab" data-tab="behavior"><i class="ph ph-sliders text-sm"></i><span class="font-pixel text-[10px]">behavior</span></button>
+                <button class="settings-tab" data-tab="notifications"><i class="ph ph-bell text-sm"></i><span class="font-pixel text-[10px]">notifications</span></button>
+            </div>
+            <div class="flex-1 flex flex-col min-h-0">
+                <div class="flex items-center gap-3 px-5 py-3 border-b border-t-border shrink-0">
+                    <i class="ph ph-gear text-t-accent text-base"></i>
+                    <h2 id="settings-title" class="font-pixel text-xs text-t-accent">settings</h2>
+                    <div class="flex-1"></div>
+                    <button id="settings-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span></button>
+                </div>
+                <div class="flex-1 overflow-y-auto p-5">
+                    <div id="settings-panel-branding">
+                        <div class="flex flex-col items-center justify-center py-12 text-center">
+                            <i class="ph ph-terminal-window text-t-accent text-5xl mb-4"></i>
+                            <h1 class="font-pixel text-2xl text-t-accent tracking-wider mb-2">hyprcrd</h1>
+                            <p class="font-pixel text-[10px] text-t-dim mb-6">v<?= APP_VERSION ?></p>
+                            <p class="text-xs text-t-muted leading-relaxed max-w-sm">Self-hosted card manager with markdown, tags, calendar, CalDAV sync, encrypted WebDAV notes, and Obsidian-compatible export.</p>
+                            <div class="flex items-center gap-4 mt-8 text-t-dim">
+                                <div class="text-center"><div id="stats-cards" class="font-pixel text-lg text-t-bright">—</div><div class="font-pixel text-[8px] uppercase">cards</div></div>
+                                <div class="w-px h-8 bg-t-border"></div>
+                                <div class="text-center"><div id="stats-buckets" class="font-pixel text-lg text-t-bright">—</div><div class="font-pixel text-[8px] uppercase">buckets</div></div>
+                                <div class="w-px h-8 bg-t-border"></div>
+                                <div class="text-center"><div id="stats-tags" class="font-pixel text-lg text-t-bright">—</div><div class="font-pixel text-[8px] uppercase">tags</div></div>
+                            </div>
+                            <p class="text-[10px] text-t-dim mt-8">Press <kbd class="px-1 py-0.5 border border-t-border rounded text-[9px] font-pixel">F1</kbd> for help</p>
+                        </div>
+                    </div>
+                    <div id="settings-panel-theme" class="hidden">
+                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-3">color theme</div>
+                        <div id="settings-theme-list" class="grid grid-cols-2 gap-2"></div>
+                    </div>
+                    <div id="settings-panel-sync" class="hidden space-y-3">
+                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-2">CalDAV / WebDAV</div>
+                        <div><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">server url</label><input id="caldav-url" type="text" name="caldav_url_x" placeholder="https://cloud.example.com/remote.php/dav/calendars/user/" autocomplete="off" data-1p-ignore data-lpignore="true" data-form-type="other" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none placeholder:text-t-dim font-mono"></div>
+                        <div class="flex gap-3">
+                            <div class="flex-1"><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">username</label><input id="caldav-user" type="text" name="caldav_user_x" autocomplete="off" data-1p-ignore data-lpignore="true" data-form-type="other" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono"></div>
+                            <div class="flex-1"><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">password</label><input id="caldav-pass" type="text" name="caldav_pass_x" placeholder="app password" autocomplete="off" data-1p-ignore data-lpignore="true" data-form-type="other" style="-webkit-text-security:disc;" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono"></div>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <button id="caldav-test" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-plugs-connected text-sm"></i><span class="font-pixel text-[10px]">test</span></button>
+                            <span id="caldav-test-status" class="font-pixel text-[9px] text-t-dim"></span>
+                        </div>
+                        <div id="caldav-calendars" class="hidden border-t border-t-border pt-2">
+                            <label class="font-pixel text-[9px] text-t-dim uppercase block mb-2">calendars</label>
+                            <div id="caldav-cal-list" class="space-y-2"></div>
+                        </div>
+                        <div class="flex flex-wrap gap-2 pt-2 border-t border-t-border">
+                            <button id="caldav-save" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">save</span></button>
+                            <button id="caldav-sync-now" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-arrows-clockwise text-sm"></i><span class="font-pixel text-[10px]">sync now</span></button>
+                            <button id="notes-reset" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-arrow-counter-clockwise text-sm"></i><span class="font-pixel text-[10px]">reset notes</span></button>
+                            <button id="notes-rekey" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-key text-sm"></i><span class="font-pixel text-[10px]">re-key notes</span></button>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <span id="caldav-sync-status" class="font-pixel text-[9px] text-t-dim"></span>
+                        </div>
+                        <div id="caldav-log" class="text-[10px] text-t-dim font-mono max-h-32 overflow-y-auto hidden border-t border-t-border pt-2"></div>
+                    </div>
+                    <div id="settings-panel-behavior" class="hidden space-y-4">
+                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-2">current view</div>
+                        <div class="flex items-center gap-3">
+                            <label class="text-xs text-t-muted">Show cards touched within</label>
+                            <select id="setting-current-days" class="bg-t-bg border border-t-border text-t-bright text-xs font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer">
+                                <option value="1">1 day</option>
+                                <option value="2">2 days</option>
+                                <option value="3">3 days</option>
+                                <option value="7">1 week</option>
+                                <option value="14">2 weeks</option>
+                            </select>
+                        </div>
+                        <p class="text-[10px] text-t-dim leading-relaxed"><i class="ph ph-info text-xs"></i> "Current" shows cards you recently opened or edited. Sync-only updates (CalDAV/WebDAV) are excluded.</p>
+                    </div>
+                    <div id="settings-panel-notifications" class="hidden space-y-4">
+                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-2">lookahead</div>
+                        <div class="flex items-center gap-3">
+                            <label class="text-xs text-t-muted">Show upcoming events</label>
+                            <select id="notif-lookahead" class="bg-t-bg border border-t-border text-t-bright text-xs font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer">
+                                <option value="1">1 day</option>
+                                <option value="3">3 days</option>
+                                <option value="7">1 week</option>
+                                <option value="14">2 weeks</option>
+                                <option value="30">1 month</option>
+                            </select>
+                            <span class="text-xs text-t-dim">ahead</span>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <label class="text-xs text-t-muted">Show at</label>
+                            <select id="notif-time" class="bg-t-bg border border-t-border text-t-bright text-xs font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer">
+                                <option value="0">midnight</option>
+                                <option value="6">06:00</option>
+                                <option value="8">08:00</option>
+                                <option value="9">09:00</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <label class="text-xs text-t-muted flex items-center gap-2">
+                                <input type="checkbox" id="notif-birthdays" checked class="accent-t-accent"> Birthdays
+                            </label>
+                            <label class="text-xs text-t-muted flex items-center gap-2">
+                                <input type="checkbox" id="notif-termine" checked class="accent-t-accent"> Appointments
+                            </label>
+                            <label class="text-xs text-t-muted flex items-center gap-2">
+                                <input type="checkbox" id="notif-overdue" checked class="accent-t-accent"> Overdue tasks
+                            </label>
+                        </div>
+                        <div class="border-t border-t-border pt-3 mt-2">
+                            <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-2">notification stream</div>
+                            <div class="flex items-center gap-2 mb-2">
+                                <button id="notif-clear-dismissed" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-arrow-counter-clockwise text-sm"></i><span class="font-pixel text-[10px]">restore dismissed</span></button>
+                            </div>
+                            <div id="notif-stream" class="max-h-64 overflow-y-auto space-y-1"></div>
+                        </div>
+                    </div>
+                    <div id="settings-panel-account" class="hidden space-y-4">
+                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-3">change password</div>
+                        <div>
+                            <label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">current password</label>
+                            <input id="settings-pw-current" type="password" autocomplete="off" data-1p-ignore data-lpignore="true" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono">
+                        </div>
+                        <div>
+                            <label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">new password</label>
+                            <input id="settings-pw-new" type="password" autocomplete="new-password" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono">
+                        </div>
+                        <div>
+                            <label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">confirm new password</label>
+                            <input id="settings-pw-confirm" type="password" autocomplete="new-password" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono">
+                        </div>
+                        <div class="flex items-center gap-3">
+                            <button id="settings-pw-save" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">change password</span></button>
+                            <span id="settings-pw-status" class="font-pixel text-[9px] text-t-dim"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
    <!-- Dialog -->
    <div class="overlay fixed inset-0 z-[90] flex justify-center items-center px-4" style="background:var(--t-overlay)" id="dialog">
        <div class="bg-t-surface border border-t-border w-full max-w-sm">
@@ -960,7 +1309,7 @@ if (str_starts_with($route, '/api/')) {
                <div id="detail-sidebar-list" class="flex-1 overflow-y-auto"></div>
            </div>
            <!-- Main content -->
-            <div class="flex-1 flex flex-col min-w-0">
+            <div class="flex-1 flex flex-col min-w-0 relative">
                <div class="card-bar w-full shrink-0" id="detail-color"></div>
                <div id="detail-controls" class="flex items-center gap-2 px-4 py-2 border-b border-t-border shrink-0">
                    <button id="detail-edit" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent2 hover:text-t-accent2 transition-colors">
@@ -969,6 +1318,9 @@ if (str_starts_with($route, '/api/')) {
                    <button id="detail-delete" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                        <i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">del</span>
                    </button>
+                    <button id="detail-done" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" title="mark done">
+                        <i class="ph ph-check-circle text-sm"></i><span class="font-pixel text-[10px]" id="detail-done-label">done</span>
+                    </button>
                    <button id="detail-zen" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" title="zen mode">
                        <i class="ph ph-corners-out text-sm"></i>
                    </button>
@@ -990,6 +1342,7 @@ if (str_starts_with($route, '/api/')) {
                    </div>
                    <div id="detail-meta" class="mt-8 pt-4 border-t border-t-border text-[11px] text-t-dim font-pixel"></div>
                </div>
+                <div id="detail-done-corner" class="card-done-badge hidden"><i class="ph ph-check"></i></div>
            </div>
            <!-- Split right pane -->
            <div id="split-right" class="hidden w-2/5 shrink-0 border-l border-t-border flex flex-col min-w-0">
@@ -1028,38 +1381,6 @@ if (str_starts_with($route, '/api/')) {
        </div>
    </div>

-    <!-- CalDAV Settings -->
-    <div class="overlay fixed inset-0 z-[74] flex justify-center items-start pt-16 px-4" style="background:var(--t-overlay)" id="caldav-settings">
-        <div class="bg-t-surface border border-t-border shadow-2xl w-full max-w-lg" style="border-radius:4px;">
-            <div class="flex items-center gap-3 px-5 py-3 border-b border-t-border">
-                <i class="ph ph-cloud-arrow-up text-t-accent text-base"></i>
-                <h2 class="font-pixel text-xs text-t-accent">CalDAV Sync</h2>
-                <div class="flex-1"></div>
-                <button id="caldav-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span></button>
-            </div>
-            <div class="p-5 space-y-3">
-                <div><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">server url</label><input id="caldav-url" type="text" placeholder="https://cloud.example.com/remote.php/dav/calendars/user/personal/" autocomplete="off" data-1p-ignore data-lpignore="true" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none placeholder:text-t-dim font-mono"></div>
-                <div class="flex gap-3">
-                    <div class="flex-1"><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">username</label><input id="caldav-user" type="text" autocomplete="off" data-1p-ignore data-lpignore="true" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono"></div>
-                    <div class="flex-1"><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">password</label><input id="caldav-pass" type="password" placeholder="app password" autocomplete="new-password" data-1p-ignore data-lpignore="true" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono"></div>
-                </div>
-                <div class="flex items-center gap-3">
-                    <button id="caldav-test" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-plugs-connected text-sm"></i><span class="font-pixel text-[10px]">test</span></button>
-                    <span id="caldav-test-status" class="font-pixel text-[9px] text-t-dim"></span>
-                </div>
-                <div id="caldav-calendars" class="hidden border-t border-t-border pt-2">
-                    <label class="font-pixel text-[9px] text-t-dim uppercase block mb-2">calendars</label>
-                    <div id="caldav-cal-list" class="space-y-2"></div>
-                </div>
-                <div class="flex gap-3 pt-2 border-t border-t-border">
-                    <button id="caldav-save" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">save</span></button>
-                    <button id="caldav-sync-now" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-arrows-clockwise text-sm"></i><span class="font-pixel text-[10px]">sync now</span></button>
-                    <span id="caldav-sync-status" class="font-pixel text-[9px] text-t-dim ml-auto self-center"></span>
-                </div>
-                <div id="caldav-log" class="text-[10px] text-t-dim font-mono max-h-32 overflow-y-auto hidden border-t border-t-border pt-2 mt-2"></div>
-            </div>
-        </div>
-    </div>

    <!-- Gallery -->
    <div class="overlay fixed inset-0 z-[72]" style="background:var(--t-overlay)" id="gallery">
@@ -1080,9 +1401,24 @@ if (str_starts_with($route, '/api/')) {
    <!-- Selection action bar -->
    <div id="select-bar" class="fixed bottom-16 left-1/2 -translate-x-1/2 z-[45] bg-t-surface border border-t-border shadow-2xl px-4 py-2 flex items-center gap-3 hidden" style="border-radius:6px;">
        <span id="select-count" class="font-pixel text-[10px] text-t-accent"></span>
+        <button id="select-group" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
+            <i class="ph ph-stack text-sm"></i><span class="font-pixel text-[10px]">group</span>
+        </button>
+        <button id="select-bucket" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
+            <i class="ph ph-folder text-sm"></i><span class="font-pixel text-[10px]">bucket</span>
+        </button>
+        <button id="select-color" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
+            <i class="ph ph-palette text-sm"></i><span class="font-pixel text-[10px]">color</span>
+        </button>
+        <button id="select-tag" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
+            <i class="ph ph-hash text-sm"></i><span class="font-pixel text-[10px]">tag</span>
+        </button>
        <button id="select-export" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
            <i class="ph ph-download-simple text-sm"></i><span class="font-pixel text-[10px]">export</span>
        </button>
+        <button id="select-delete" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
+            <i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">delete</span>
+        </button>
        <button id="select-clear" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
            <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">clear</span>
        </button>
@@ -1117,6 +1453,13 @@ if (str_starts_with($route, '/api/')) {
            </div>
            <div class="flex items-center gap-3 px-4 py-2.5 border-b border-t-border shrink-0">
                <input type="text" id="inp-title" placeholder="> title..." class="flex-1 bg-transparent border-none text-t-bright text-base font-bold focus:outline-none placeholder:text-t-dim font-pixel">
+                <button id="inp-due-date" class="flex items-center gap-1 px-2 py-1 text-[10px] font-pixel border border-t-border text-t-dim hover:border-t-accent hover:text-t-accent transition-colors rounded-sm shrink-0" title="set due date">
+                    <i class="ph ph-clock-countdown text-xs"></i><span id="inp-due-label">no due</span>
+                </button>
+                <button id="inp-done-toggle" class="flex items-center gap-1 px-2 py-1 text-[10px] font-pixel border border-t-border text-t-dim hover:border-t-accent hover:text-t-accent transition-colors rounded-sm shrink-0" title="mark done">
+                    <i class="ph ph-check-circle text-xs"></i><span id="inp-done-label">done</span>
+                </button>
+                <input type="hidden" id="inp-due-value" value="">
                <select id="inp-bucket" class="bg-t-bg border border-t-border text-t-muted text-[10px] font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer"><option value="">no bucket</option></select>
                <div id="color-presets" class="flex gap-1.5 shrink-0"></div>
                <input type="hidden" id="inp-color" value="#38bdf8">
@@ -16,7 +16,7 @@ import { undo, canUndo } from './modules/undo.js';
 import { openGallery, closeGallery } from './modules/gallery.js';
 import { refreshTasksView, openTasks, closeTasks } from './modules/tasks.js';
 import { openCalendar, closeCalendar, refreshCalendar } from './modules/calendar.js';
-import { startBackgroundSync, triggerSync } from './modules/caldav.js';
+import { startBackgroundSync, triggerSync, loadSettings as loadCaldavSettings } from './modules/caldav.js';

 // ── Global API (for inline onclick handlers and cross-module calls) ──

@@ -28,13 +28,14 @@ window._closeTasks = closeTasks;
 window._renderBoard = renderBoard;
 window._openCalendar = openCalendar;
 window._triggerSync = triggerSync;
+window._loadCaldavSettings = loadCaldavSettings;
 window._renderTagBar = renderTagBar;
 window._showContextMenu = showContextMenu;
 window._ungroupCard = ungroupCard;
 window._getSelectedIds = getSelectedIds;
 window._clearSelection = clearSelection;
 window._refreshTasks = refreshTasksView;
-window._reloadAll = async () => { state.cards = await api('api/cards'); renderBoard(); refreshCalendar(); };
+window._reloadAll = async () => { state.cards = await api('api/cards') || []; renderBoard(); refreshCalendar(); };
 window._extractToCard = async (text) => {
    if (!text?.trim()) return;
    const lines = text.trim().split('\n');
@@ -52,10 +53,49 @@ window._extractToCard = async (text) => {

 // ── Data loading ──

+const CARDS_CACHE_KEY = 'hyprcrd-cards-cache';
+
+function getCachedCards() {
+    try { return JSON.parse(localStorage.getItem(CARDS_CACHE_KEY) || '[]'); } catch { return []; }
+}
+
+function setCachedCards(cards) {
+    try {
+        const slim = cards.map(c => ({ id: c.id, title: c.title, color: c.color, tags: c.tags, bucket_id: c.bucket_id, bucket_name: c.bucket_name, parent_id: c.parent_id, position: c.position, created_at: c.created_at, updated_at: c.updated_at, due_date: c.due_date, caldav_uid: c.caldav_uid, caldav_rrule: c.caldav_rrule }));
+        localStorage.setItem(CARDS_CACHE_KEY, JSON.stringify(slim));
+    } catch {}
+}
+
 async function loadCards() {
-    state.cards = await api('api/cards');
+    // Phase 0: Show cached cards instantly (from previous session)
+    const cached = getCachedCards();
+    if (cached.length) {
+        state.cards = cached.map(c => ({ ...c, body: null }));
+        updateSortUI();
+        renderBoard();
+    }
+
+    // Phase 1: Load metadata → update board with fresh titles/tags/dates
+    const meta = await api('api/cards/meta');
+    if (!meta) return;
+    state.cards = meta.map(c => ({ ...c, body: null }));
+    setCachedCards(meta);
    updateSortUI();
    renderBoard();
+
+    // Phase 2: Load full cards in batches → replace spinners with content
+    const batchSize = 25;
+    for (let i = 0; i < meta.length; i += batchSize) {
+        const batch = meta.slice(i, i + batchSize);
+        const ids = batch.map(c => c.id).join(',');
+        const full = await api('api/cards?ids=' + ids);
+        if (!full) continue;
+        for (const card of full) {
+            const idx = state.cards.findIndex(c => c.id === card.id);
+            if (idx >= 0) state.cards[idx] = card;
+        }
+        renderBoard();
+    }
 }

 // ── Help ──
@@ -6,7 +6,8 @@ import { stripMd, getTodos, firstImage, leadingImage } from './markdown.js';
 import { pushReorder, pushCardEdit, pushBatch, snapshotCard } from './undo.js';
 import { getCalConfig } from './caldav.js';
 import { renderMd, addCodeCopyButtons, formatTodoItems } from './markdown.js';
-import { bindCheckboxes } from './detail.js';
+import { addProvider as addNotifProvider, render as renderNotifs } from './notifications.js';
+import { bindCheckboxes, bindDetailImageFullscreen } from './detail.js';

 const board = $('board');
 const boardPreview = $('board-preview');
@@ -76,6 +77,78 @@ $('select-export')?.addEventListener('click', () => {
    if (!selectedIds.size) return;
    window.location.href = 'api/export?ids=' + [...selectedIds].join(',');
 });
+
+$('select-group')?.addEventListener('click', async () => {
+    if (selectedIds.size < 2) return;
+    const ids = [...selectedIds];
+    const parentId = ids[0]; // First selected becomes parent
+    for (let i = 1; i < ids.length; i++) {
+        await api(`api/cards/${ids[i]}`, { method: 'PATCH', body: { parent_id: parentId } });
+    }
+    clearSelection();
+    await window._reloadAll();
+});
+
+$('select-bucket')?.addEventListener('click', async () => {
+    if (!selectedIds.size) return;
+    const { showDialog } = await import('./dialog.js');
+    const bucketOpts = state.buckets.map(b => b.name);
+    const name = await showDialog({ title: 'move to bucket', input: true, placeholder: 'bucket name', okLabel: 'move' });
+    if (!name) return;
+    let bucket = state.buckets.find(b => b.name.toLowerCase() === name.trim().toLowerCase());
+    if (!bucket) {
+        const created = await api('api/buckets', { method: 'POST', body: { name: name.trim() } });
+        if (created?.id) bucket = created;
+    }
+    if (!bucket) return;
+    for (const id of selectedIds) {
+        await api(`api/cards/${id}`, { method: 'PATCH', body: { bucket_id: bucket.id } });
+    }
+    clearSelection();
+    await window._reloadAll();
+});
+
+$('select-color')?.addEventListener('click', async () => {
+    if (!selectedIds.size) return;
+    const { showDialog } = await import('./dialog.js');
+    const color = await showDialog({ title: 'set color', input: true, placeholder: '#38bdf8', okLabel: 'apply' });
+    if (!color || !/^#[0-9a-fA-F]{6}$/.test(color.trim())) return;
+    for (const id of selectedIds) {
+        await api(`api/cards/${id}`, { method: 'PATCH', body: { color: color.trim() } });
+    }
+    clearSelection();
+    await window._reloadAll();
+});
+
+$('select-tag')?.addEventListener('click', async () => {
+    if (!selectedIds.size) return;
+    const { showDialog } = await import('./dialog.js');
+    const tag = await showDialog({ title: 'add tag', input: true, placeholder: '#tagname', okLabel: 'add' });
+    if (!tag) return;
+    const cleanTag = tag.trim().replace(/^#/, '');
+    if (!cleanTag) return;
+    for (const id of selectedIds) {
+        const card = state.cards.find(c => c.id == id);
+        if (!card) continue;
+        const body = (card.body || '').trimEnd() + ' #' + cleanTag;
+        await api(`api/cards/${id}`, { method: 'PATCH', body: { body } });
+    }
+    clearSelection();
+    await window._reloadAll();
+});
+
+$('select-delete')?.addEventListener('click', async () => {
+    if (!selectedIds.size) return;
+    const { showDialog } = await import('./dialog.js');
+    const ok = await showDialog({ title: 'delete cards', message: `${selectedIds.size} card${selectedIds.size > 1 ? 's' : ''} loeschen?`, danger: true, okLabel: 'delete' });
+    if (!ok) return;
+    for (const id of selectedIds) {
+        await api(`api/cards/${id}`, { method: 'DELETE' });
+    }
+    clearSelection();
+    await window._reloadAll();
+});
+
 $('select-clear')?.addEventListener('click', clearSelection);

 // Custom drag ghost that fades near header
@@ -117,10 +190,13 @@ function showBoardPreview(cardId) {
    $('board-preview-content')?.classList.remove('hidden');
    if (boardPreviewColor) boardPreviewColor.style.background = card.color;
    if (boardPreviewTitle) boardPreviewTitle.textContent = card.title;
+    const doneBadge = $('board-preview-done-badge');
+    if (doneBadge) doneBadge.classList.toggle('hidden', !parseTags(card).includes('done'));
    if (boardPreviewBody) {
        boardPreviewBody.innerHTML = renderMd(card.body);
        addCodeCopyButtons(boardPreviewBody);
        formatTodoItems(boardPreviewBody);
+        bindDetailImageFullscreen(boardPreviewBody);
        bindCheckboxes(boardPreviewBody, card);
    }
    const tags = parseTags(card);
@@ -199,6 +275,22 @@ if (state.superView) {
    if (btn) btn.classList.add('text-t-accent');
 }

+$('hide-done')?.addEventListener('click', () => {
+    state.hideDone = !state.hideDone;
+    localStorage.setItem('hyprcrd-hide-done', state.hideDone ? '1' : '0');
+    const btn = $('hide-done');
+    const icon = btn?.querySelector('i');
+    if (icon) icon.className = `ph ${state.hideDone ? 'ph-check-square' : 'ph-check-circle'} text-xs`;
+    if (btn) btn.classList.toggle('text-t-accent', state.hideDone);
+    renderBoard();
+});
+if (state.hideDone) {
+    const btn = $('hide-done');
+    const icon = btn?.querySelector('i');
+    if (icon) icon.className = 'ph ph-check-square text-xs';
+    if (btn) btn.classList.add('text-t-accent');
+}
+
 $('hide-termine')?.addEventListener('click', () => {
    state.hideTermine = !state.hideTermine;
    localStorage.setItem('hyprcrd-hide-termine', state.hideTermine ? '1' : '0');
@@ -224,11 +316,12 @@ $('sort-toggle')?.addEventListener('click', () => {
 });

 export function renderCardHtml(c, inGroup = false, recent = []) {
-    const coverImg = leadingImage(c.body);
-    const thumbImg = coverImg ? null : firstImage(c.body);
+    const loaded = c.body != null;
+    const coverImg = loaded ? leadingImage(c.body) : null;
+    const thumbImg = coverImg ? null : (loaded ? firstImage(c.body) : null);
    const children = getChildren(c.id);
    const isGroup = !inGroup && children.length > 0;
-    const todos = getTodos(c.body);
+    const todos = loaded ? getTodos(c.body) : null;
    const todoPct = todos ? Math.round(todos.done / todos.total * 100) : 0;
    const hasCover = !!coverImg;
    const tags = parseTags(c);
@@ -237,12 +330,15 @@ export function renderCardHtml(c, inGroup = false, recent = []) {
    if (isTermin) { for (const t of tags) { if (t && t !== 'termin' && t !== 'geburtstag') { const cfg = getCalConfig(t); if (cfg) { calCfg = cfg; break; } } } }
    const cardColor = calCfg?.color || c.color;
    const calIcon = isTermin ? (calCfg?.icon || 'calendar-dots') : null;
+    const overdue = c.due_date && c.due_date < new Date().toISOString().substring(0, 10);
+    const barColor = overdue ? 'var(--t-danger)' : cardColor;

    return `
    <div class="board-card ${isGroup ? 'card-group ' : ''}card-glow ${hasCover ? 'card-has-cover' : 'bg-t-surface'} border border-t-border cursor-pointer hover:border-t-muted transition-colors relative group"
-         style="--glow-color:${cardColor}22;${hasCover ? `background-image:url('${coverImg}')` : ''};${recent.includes(String(c.id)) ? 'border-bottom:3px solid ' + cardColor : ''}" draggable="true" data-id="${c.id}">
+         style="--glow-color:${cardColor}22;${hasCover ? `background-image:url('${coverImg}')` : ''};${overdue ? 'border-bottom:3px solid var(--t-danger)' : recent.includes(String(c.id)) ? 'border-bottom:3px solid ' + cardColor : ''}" draggable="true" data-id="${c.id}">
        ${hasCover ? '<div class="card-cover-overlay"></div>' : ''}
-        <div class="card-bar w-full card-layer" style="background:${cardColor}"></div>
+        ${tags.includes('done') ? '<div class="card-done-badge"><i class="ph ph-check"></i></div>' : ''}
+        <div class="card-bar w-full card-layer ${overdue ? 'card-bar-pulse' : ''}" style="background:${barColor}"></div>
        ${isGroup ? `<div class="card-group-badge cursor-pointer hover:scale-110 transition-transform" style="background:${cardColor};color:#000" data-group="${c.id}">${children.length + 1}</div>` : ''}
        ${thumbImg ? `<div class="card-thumb" style="background-image:url('${thumbImg}')"></div>` : ''}
        <div class="p-4 card-layer flex flex-col h-full ${thumbImg ? 'pr-16' : ''}">
@@ -255,10 +351,12 @@ export function renderCardHtml(c, inGroup = false, recent = []) {
            ${todos ? `<div class="mb-2">
                <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>
            </div>` : ''}
-            <p class="text-xs ${hasCover ? 'text-t-text' : 'text-t-muted'} leading-relaxed line-clamp-5 flex-1">${esc(stripMd(c.body))}</p>
+            ${loaded
+                ? `<p class="text-xs ${hasCover ? 'text-t-text' : 'text-t-muted'} leading-relaxed line-clamp-5 flex-1">${esc(stripMd(c.body))}</p>`
+                : `<div class="flex-1 flex items-center justify-center py-2"><i class="ph ph-spinner card-spinner text-t-dim text-lg"></i></div>`}
            ${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">
-                <span class="flex items-center gap-1"><i class="ph ph-clock text-xs"></i>${(c.updated_at || c.created_at || '').substring(0, 10)}</span>
+                ${c.due_date ? `<span class="due-pill" style="background:${overdue ? 'var(--t-danger)' : cardColor};"><i class="ph ph-clock-countdown" style="font-size:9px;"></i>${c.due_date}</span>` : `<span class="flex items-center gap-1"><i class="ph ph-clock text-xs"></i>${(c.updated_at || c.created_at || '').substring(0, 10)}</span>`}
                ${c.bucket_name ? `<span class="flex items-center gap-1"><i class="ph ph-folder text-xs"></i>${esc(c.bucket_name)}</span>` : ''}
            </div>
        </div>
@@ -274,13 +372,20 @@ export function renderBoard() {
        cards = parent ? [parent, ...getChildren(parent.id)] : [];
    } else {
        if (state.activeBucket === 'current') {
-            // Current shows ALL recently touched cards, including group children
+            // Current: recently opened/edited cards (not just synced)
            const recent = getRecent();
            const now = Date.now();
-            const freshMs = 48 * 60 * 60 * 1000;
+            const currentDays = parseInt(localStorage.getItem('hyprcrd-current-days') || '2');
+            const freshMs = currentDays * 24 * 60 * 60 * 1000;
            cards = state.cards.filter(c => {
+                const tags = (c.tags || '').split(',');
+                if (tags.includes('geburtstag')) return false;
+                // Recently opened (tracked by markRecent)
                if (recent.includes(String(c.id))) return true;
+                // Recently edited locally (not just synced — check synced_at vs updated_at)
                const updated = new Date(c.updated_at || c.created_at || 0).getTime();
+                const synced = c.caldav_synced_at ? new Date(c.caldav_synced_at).getTime() : 0;
+                if (synced && Math.abs(updated - synced) < 3000) return false; // sync-only update
                return (now - updated) < freshMs;
            });
            cards.sort((a, b) => (b.updated_at || b.created_at || '').localeCompare(a.updated_at || a.created_at || ''));
@@ -300,9 +405,13 @@ export function renderBoard() {
            }
        }
    }
-    // Hide appointments
+    // Hide appointments + birthdays
    if (state.hideTermine) {
-        cards = cards.filter(c => !parseTags(c).includes('termin'));
+        cards = cards.filter(c => { const t = parseTags(c); return !t.includes('termin') && !t.includes('geburtstag'); });
+    }
+    // Hide done
+    if (state.hideDone) {
+        cards = cards.filter(c => !parseTags(c).includes('done'));
    }
    // Tag filter (intersects with bucket filter) — hierarchical: #nase matches #nase/popel
    if (state.activeTags.length) {
@@ -454,8 +563,131 @@ export function renderBoard() {

    // Refresh split preview if open
    if (boardSplitOpen && boardPreviewCardId) showBoardPreview(boardPreviewCardId);
+
+    // Notification banner
+    renderNotifs();
 }

+// ── Notification providers ──
+
+// Upcoming events (birthdays + appointments)
+addNotifProvider((settings) => {
+    const today = new Date();
+    const todayStr = today.toISOString().substring(0, 10);
+    const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    const lookahead = settings.lookahead || 3;
+    const aheadStr = new Date(todayLocal.getTime() + lookahead * 86400000).toISOString().substring(0, 10);
+    const items = [];
+
+    for (const c of state.cards) {
+        const tags = (c.tags || '').split(',');
+        const isGeb = tags.includes('geburtstag');
+        const isTermin = tags.includes('termin');
+        if (isGeb && !settings.birthdays) continue;
+        if (isTermin && !isGeb && !settings.termine) continue;
+        if (!isGeb && !isTermin) continue;
+
+        const m = (c.title || '').match(/^(\d{4}-\d{2}-\d{2})/);
+        if (!m) continue;
+
+        let eventDate = m[1];
+        if (isGeb) eventDate = todayStr.substring(0, 4) + eventDate.substring(4);
+        if (eventDate < todayStr || eventDate > aheadStr) continue;
+
+        const name = c.title.replace(/^\d{4}-\d{2}-\d{2}\s*(?:—|-)\s*/, '') || c.title;
+        const evParts = eventDate.split('-').map(Number);
+        const evLocal = new Date(evParts[0], evParts[1] - 1, evParts[2]);
+        const daysAway = Math.round((evLocal - todayLocal) / 86400000);
+        const when = daysAway === 0 ? 'today' : daysAway === 1 ? 'tomorrow' : `in ${daysAway}d`;
+
+        items.push({
+            id: String(c.id),
+            icon: isGeb ? 'cake' : 'calendar-dots',
+            iconColor: isGeb ? '#fb7185' : 'var(--t-text)',
+            label: name,
+            when,
+            sort: eventDate,
+            type: isGeb ? 'birthday' : 'appointment',
+            onClick: () => window._openDetail(c.id),
+        });
+    }
+    return items;
+});
+
+// Due dates approaching or overdue
+addNotifProvider((settings) => {
+    const today = new Date();
+    const todayStr = today.toISOString().substring(0, 10);
+    const todayLocal = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    const lookahead = settings.lookahead || 3;
+    const aheadStr = new Date(todayLocal.getTime() + lookahead * 86400000).toISOString().substring(0, 10);
+    const items = [];
+
+    for (const c of state.cards) {
+        if (!c.due_date) continue;
+
+        // Overdue
+        if (c.due_date < todayStr) {
+            if (!settings.overdue) continue;
+            items.push({
+                id: 'due-' + c.id,
+                icon: 'warning',
+                iconColor: 'var(--t-danger)',
+                label: c.title,
+                when: 'overdue',
+                sort: '0' + c.due_date,
+                type: 'overdue',
+                onClick: () => window._openDetail(c.id),
+            });
+        }
+        // Upcoming
+        else if (c.due_date <= aheadStr) {
+            const evParts = c.due_date.split('-').map(Number);
+            const evLocal = new Date(evParts[0], evParts[1] - 1, evParts[2]);
+            const daysAway = Math.round((evLocal - todayLocal) / 86400000);
+            const when = daysAway === 0 ? 'today' : daysAway === 1 ? 'tomorrow' : `in ${daysAway}d`;
+            items.push({
+                id: 'due-' + c.id,
+                icon: 'clock-countdown',
+                iconColor: daysAway === 0 ? 'var(--t-danger)' : 'var(--t-accent)',
+                label: c.title,
+                when,
+                sort: c.due_date,
+                type: 'due',
+                onClick: () => window._openDetail(c.id),
+            });
+        }
+    }
+    return items;
+});
+
+// Overdue tasks (cards with unchecked todos past their date, no due_date set)
+addNotifProvider((settings) => {
+    if (!settings.overdue) return [];
+    const todayStr = new Date().toISOString().substring(0, 10);
+    const items = [];
+
+    for (const c of state.cards) {
+        if (c.due_date) continue; // handled by due-date provider above
+        const m = (c.title || '').match(/^(\d{4}-\d{2}-\d{2})/);
+        if (!m || m[1] >= todayStr) continue;
+        if (!c.body || !/- \[ \]/.test(c.body)) continue;
+
+        const name = c.title.replace(/^\d{4}-\d{2}-\d{2}\s*(?:—|-)\s*/, '') || c.title;
+        items.push({
+            id: 'overdue-' + c.id,
+            icon: 'warning',
+            iconColor: 'var(--t-danger)',
+            label: name,
+            when: 'overdue',
+            sort: '0' + m[1],
+            type: 'overdue',
+            onClick: () => window._openDetail(c.id),
+        });
+    }
+    return items;
+});
+
 // ── Group bar ──

 function renderGroupBar(cards) {
@@ -21,7 +21,7 @@ const CAL_COLORS = ['#38bdf8', '#8b5cf6', '#fb7185', '#fbbf24', '#4ade80', '#fb9
 let calendarConfigs = {}; // slug → { color, icon }
 const CAL_CONFIG_KEY = 'hyprcrd-cal-configs';

-const overlay = $('caldav-settings');
+const settingsOverlay = $('settings-overlay');
 const urlInput = $('caldav-url');
 const userInput = $('caldav-user');
 const passInput = $('caldav-pass');
@@ -30,12 +30,15 @@ const syncStatus = $('caldav-sync-status');
 const logEl = $('caldav-log');

 export function openCaldavSettings() {
-    overlay?.classList.add('open');
+    // Open settings overlay on sync tab
+    settingsOverlay?.classList.add('open');
+    settingsOverlay?.querySelectorAll('.settings-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === 'sync'));
+    settingsOverlay?.querySelectorAll('[id^="settings-panel-"]').forEach(p => p.classList.toggle('hidden', p.id !== 'settings-panel-sync'));
    loadSettings();
 }

 export function closeCaldavSettings() {
-    overlay?.classList.remove('open');
+    settingsOverlay?.classList.remove('open');
 }

 function loadCalConfigs() {
@@ -97,7 +100,7 @@ function renderCalList(calendars) {
    });
 }

-async function loadSettings() {
+export async function loadSettings() {
    const s = await api('api/caldav/settings');
    if (!s) return;
    if (urlInput) urlInput.value = s.url || '';
@@ -115,8 +118,6 @@ async function loadSettings() {
    }
 }

-$('caldav-close')?.addEventListener('click', closeCaldavSettings);
-overlay?.addEventListener('click', e => { if (e.target === overlay) closeCaldavSettings(); });

 $('caldav-test')?.addEventListener('click', async () => {
    testStatus.textContent = 'testing...';
@@ -149,6 +150,19 @@ $('caldav-save')?.addEventListener('click', async () => {
 });

 $('caldav-sync-now')?.addEventListener('click', () => triggerSync());
+$('notes-reset')?.addEventListener('click', async () => {
+    if (syncStatus) { syncStatus.textContent = 'resetting notes...'; syncStatus.style.color = 'var(--t-dim)'; }
+    const res = await fetch('api/notes/reset', {
+        method: 'POST', headers: { 'X-CSRF-Token': getCsrf() },
+    }).then(r => r.json()).catch(() => null);
+    if (res?.ok) {
+        const s = res.stats || {};
+        if (syncStatus) { syncStatus.textContent = `reset: ${res.reset || 0} cleared, ${s.pulled || 0} re-pulled`; syncStatus.style.color = 'var(--t-accent)'; }
+        await window._reloadAll?.();
+    } else {
+        if (syncStatus) { syncStatus.textContent = res?.error || 'reset failed'; syncStatus.style.color = 'var(--t-danger)'; }
+    }
+});

 export async function triggerSync() {
    const btn = $('cal-sync');
@@ -161,14 +175,22 @@ export async function triggerSync() {

    if (btn) btn.style.opacity = '';

+    // Also sync WebDAV Notes
+    const notesRes = await fetch('api/notes/sync', {
+        method: 'POST', headers: { 'X-CSRF-Token': getCsrf() },
+    }).then(r => r.json()).catch(() => null);
+
    if (res.ok) {
        const s = res.stats || {};
-        const hasErrors = (res.log || []).some(l => l.status === 'error');
-        const msg = `pushed:${s.pushed || 0} pulled:${s.pulled || 0} del:${s.deleted || 0}${s.conflicts ? ' conflicts:' + s.conflicts : ''}`;
+        const ns = notesRes?.stats || {};
+        const total = { pushed: (s.pushed || 0) + (ns.pushed || 0), pulled: (s.pulled || 0) + (ns.pulled || 0), deleted: (s.deleted || 0) + (ns.deleted || 0) };
+        const allLog = [...(res.log || []), ...(notesRes?.log || [])];
+        const hasErrors = allLog.some(l => l.status === 'error');
+        const msg = `pushed:${total.pushed} pulled:${total.pulled} del:${total.deleted}${ns.pulled ? ' notes:' + ns.pulled : ''}`;
        if (syncStatus) { syncStatus.textContent = msg; syncStatus.style.color = hasErrors ? 'var(--t-danger)' : 'var(--t-accent)'; }
        await window._reloadAll?.();
-        showLog(res.log);
-        showSyncNotification(s);
+        showLog(allLog);
+        showSyncNotification(total);
    } else {
        if (syncStatus) { syncStatus.textContent = res.error || 'sync failed'; syncStatus.style.color = 'var(--t-danger)'; }
    }
@@ -190,6 +212,25 @@ function showConnectionLog(lines) {
    ).join('');
 }

+$('notes-rekey')?.addEventListener('click', async () => {
+    const { showDialog } = await import('./dialog.js');
+    const oldPass = await showDialog({ title: 're-key notes', input: 'password', placeholder: 'old password', okLabel: 're-key' });
+    if (!oldPass) return;
+    if (syncStatus) { syncStatus.textContent = 're-keying notes...'; syncStatus.style.color = 'var(--t-dim)'; }
+    const res = await fetch('api/notes/rekey', {
+        method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getCsrf() },
+        body: JSON.stringify({ old_password: oldPass }),
+    }).then(r => r.json()).catch(() => null);
+    if (res?.ok) {
+        if (syncStatus) { syncStatus.textContent = `re-keyed ${res.rekeyed} notes — syncing...`; syncStatus.style.color = 'var(--t-accent)'; }
+        // Re-pull with correct key
+        const pullRes = await fetch('api/notes/reset', { method: 'POST', headers: { 'X-CSRF-Token': getCsrf() } }).then(r => r.json()).catch(() => null);
+        await window._reloadAll?.();
+        if (syncStatus) syncStatus.textContent = `re-keyed ${res.rekeyed} notes, ${pullRes?.stats?.pulled || 0} re-pulled`;
+    } else {
+        if (syncStatus) { syncStatus.textContent = res?.error || 're-key failed'; syncStatus.style.color = 'var(--t-danger)'; }
+    }
+});
 $('cal-caldav-settings')?.addEventListener('click', openCaldavSettings);
 $('cal-sync')?.addEventListener('click', () => triggerSync());

@@ -218,25 +259,32 @@ function showSyncNotification(stats) {
    setTimeout(() => { note.style.transition = 'opacity 0.3s'; note.style.opacity = '0'; setTimeout(() => note.remove(), 350); }, 4000);
 }

+let bgSyncRunning = false;
 async function backgroundSync() {
+    if (bgSyncRunning) return;
+    bgSyncRunning = true;
    try {
-        const res = await fetch('api/caldav/sync', {
-            method: 'POST', headers: { 'X-CSRF-Token': getCsrf() },
-        }).then(r => r.json()).catch(() => null);
-        if (res?.ok) {
-            const s = res.stats || {};
-            if (s.pulled > 0 || s.pushed > 0 || s.deleted > 0) {
-                await window._reloadAll?.();
-                showSyncNotification(s);
-            }
+        const headers = { 'X-CSRF-Token': getCsrf() };
+        const [res, notesRes] = await Promise.all([
+            fetch('api/caldav/sync', { method: 'POST', headers }).then(r => r.ok ? r.json() : null).catch(() => null),
+            fetch('api/notes/sync', { method: 'POST', headers }).then(r => r.ok ? r.json() : null).catch(() => null),
+        ]);
+        const s = res?.stats || {};
+        const ns = notesRes?.stats || {};
+        const total = { pushed: (s.pushed || 0) + (ns.pushed || 0), pulled: (s.pulled || 0) + (ns.pulled || 0), deleted: (s.deleted || 0) + (ns.deleted || 0) };
+        if (total.pulled > 0 || total.pushed > 0 || total.deleted > 0) {
+            await window._reloadAll?.();
+            showSyncNotification(total);
        }
-    } catch {}
+    } catch {} finally {
+        bgSyncRunning = false;
+    }
 }

 // Start background sync after app is ready
 let bgSyncInterval = null;
 export function startBackgroundSync() {
    if (bgSyncInterval) return;
-    backgroundSync(); // first sync immediately
-    bgSyncInterval = setInterval(backgroundSync, 120000); // then every 2 minutes
+    backgroundSync();
+    bgSyncInterval = setInterval(backgroundSync, 45000); // every 45 seconds
 }
@@ -35,6 +35,8 @@ export function showContextMenu(x, y, card) {
        <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="due-date"><i class="ph ph-clock-countdown text-sm ${card.due_date ? 'text-t-accent' : ''}"></i><span class="font-pixel text-[10px]">${card.due_date ? 'due: ' + card.due_date : 'set due date'}</span></button>
+        ${card.due_date ? `<button class="ctx-item" data-action="due-done"><i class="ph ph-check-circle text-sm text-t-accent"></i><span class="font-pixel text-[10px]">mark done</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>
@@ -188,6 +190,20 @@ export function showContextMenu(x, y, card) {
            await window._reloadAll();
            if (card.caldav_uid) window._triggerSync?.();
        }
+        else if (a === 'due-done') {
+            hideContextMenu();
+            // Clear due date and mark as done
+            const bodyWithDone = (card.body || '').includes('#done') ? card.body : (card.body || '').trimEnd() + ' #done';
+            await api(`api/cards/${card.id}`, { method: 'PATCH', body: { due_date: null, body: bodyWithDone } });
+            await window._reloadAll();
+        }
+        else if (a === 'due-date') {
+            hideContextMenu();
+            const newDate = await showDialog({ title: card.due_date ? 'change due date' : 'set due date', input: 'date', defaultValue: card.due_date || new Date().toISOString().substring(0, 10), okLabel: card.due_date ? 'update' : 'set' });
+            if (newDate === null) return;
+            await api(`api/cards/${card.id}`, { method: 'PATCH', body: { due_date: newDate || null } });
+            await window._reloadAll();
+        }
        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);
@@ -444,9 +444,23 @@ function renderSidebar(card) {

 // ── Content ──

+function updateDoneButton(card) {
+    const isDone = (card.tags || '').split(',').includes('done');
+    const btn = $('detail-done');
+    const label = $('detail-done-label');
+    if (btn) {
+        btn.classList.toggle('text-t-accent', isDone);
+        btn.classList.toggle('border-t-accent', isDone);
+    }
+    if (label) label.textContent = isDone ? 'undone' : 'done';
+}
+
 function showContent(card) {
    $('detail-color').style.background = card.color;
    titleEl.textContent = card.title;
+    updateDoneButton(card);
+    const doneCorner = $('detail-done-corner');
+    if (doneCorner) doneCorner.classList.toggle('hidden', !(card.tags || '').split(',').includes('done'));
    bodyEl.innerHTML = renderMd(card.body);
    addCodeCopyButtons(bodyEl);
    formatTodoItems(bodyEl);
@@ -575,7 +589,7 @@ function applyReadingResizeHandles(root) {
    });
 }

-function bindDetailImageFullscreen(root) {
+export function bindDetailImageFullscreen(root) {
    if (!root) return;

    // Gallery grids: single click, with prev/next
@@ -978,6 +992,27 @@ $('detail-edit')?.addEventListener('click', () => {
    window._openModal(card);
 });

+$('detail-done')?.addEventListener('click', async () => {
+    const card = state.viewingCard;
+    if (!card) return;
+    const isDone = (card.tags || '').split(',').includes('done');
+    let newBody;
+    if (isDone) {
+        newBody = card.body.replace(/\s*#done\b/g, '');
+    } else {
+        newBody = (card.body || '').trimEnd() + ' #done';
+    }
+    await api(`api/cards/${card.id}`, { method: 'PATCH', body: { body: newBody, due_date: isDone ? card.due_date : null } });
+    card.body = newBody;
+    if (!isDone) card.due_date = null;
+    const c = state.cards.find(x => x.id == card.id);
+    if (c) { c.body = newBody; c.tags = newBody.match(/#[a-z0-9_/-]+/gi)?.map(t => t.substring(1).toLowerCase()).join(',') || ''; if (!isDone) c.due_date = null; }
+    showContent(card);
+    window._renderBoard();
+    const doneCorner = $('detail-done-corner');
+    if (doneCorner) doneCorner.classList.toggle('hidden', !newBody.includes('#done'));
+});
+
 $('detail-delete')?.addEventListener('click', async () => {
    if (!state.viewingCard) return;
    const ok = await showDialog({ title: 'delete_card', message: `"${state.viewingCard.title}" wirklich loeschen?`, danger: true, okLabel: 'delete' });
@@ -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;
@@ -13,7 +13,7 @@ function mediaTile(url, extraClass = '') {
        </div>`;
    }
    return `<div class="aspect-square bg-t-bg border ${extraClass} rounded overflow-hidden">
-        <img src="${url}" class="w-full h-full object-cover${extraClass.includes('danger') ? ' opacity-60' : ''}" loading="lazy">
+        <img src="${url}" class="w-full h-full object-cover ${extraClass.includes('danger') ? 'opacity-60' : ''}" loading="lazy">
    </div>`;
 }
 import { state } from './state.js';
@@ -13,7 +13,7 @@ marked.use({ breaks: true, gfm: true, renderer: {

 const purifyConfig = {
    ALLOWED_TAGS: ['h1','h2','h3','h4','h5','h6','p','br','hr','ul','ol','li','a','strong','em','del','code','pre','blockquote','table','thead','tbody','tr','th','td','img','input','span','div','audio','source'],
-    ALLOWED_ATTR: ['href','src','alt','width','height','type','checked','disabled','class','style','data-card-id','title','controls','preload','target','rel'],
+    ALLOWED_ATTR: ['href','src','alt','width','height','type','checked','disabled','class','style','data-card-id','title','controls','preload','target','rel','align'],
    ALLOW_DATA_ATTR: true,
 };

@@ -38,7 +38,48 @@ function normalizeListBlock(block) {
 }

 export function renderMd(src) {
-    let processed = String(src || '').replace(/\r\n?/g, '\n')
+    let processed = String(src || '').replace(/\r\n?/g, '\n');
+
+    // Convert Unicode box-drawing tables to HTML
+    processed = processed.replace(/([ \t]*[┌╔][\s\S]*?[┘╝][ \t]*)/g, (block) => {
+        const lines = block.split('\n').filter(l => l.trim());
+        const rows = [];
+        let currentRow = null;
+
+        for (const line of lines) {
+            const trimmed = line.trim();
+            // Skip border lines (┌─┬─┐, ├─┼─┤, └─┴─┘, ╔═╦═╗, etc.)
+            if (/^[┌┐└┘├┤┬┴┼─│╔╗╚╝╠╣╦╩╬═║\s]+$/.test(trimmed)) {
+                if (currentRow) { rows.push(currentRow); currentRow = null; }
+                continue;
+            }
+            // Data row: │ cell │ cell │ or ║ cell ║
+            if (/^[│║]/.test(trimmed)) {
+                const cells = trimmed.split(/[│║]/).slice(1, -1).map(c => c.trim());
+                if (currentRow && currentRow.length === cells.length) {
+                    // Continuation line — append to previous cells
+                    for (let i = 0; i < cells.length; i++) {
+                        if (cells[i]) currentRow[i] = ((currentRow[i] || '') + ' ' + cells[i]).trim();
+                    }
+                } else {
+                    if (currentRow) rows.push(currentRow);
+                    currentRow = cells;
+                }
+            }
+        }
+        if (currentRow) rows.push(currentRow);
+        if (rows.length < 2) return block;
+
+        const header = rows[0];
+        const body = rows.slice(1);
+        return '\n<table><thead><tr>' +
+            header.map(c => `<th>${esc(c)}</th>`).join('') +
+            '</tr></thead><tbody>' +
+            body.map(r => '<tr>' + r.map(c => `<td>${esc(c)}</td>`).join('') + '</tr>').join('') +
+            '</tbody></table>\n';
+    });
+
+    processed = processed
        // Gallery fenced block: ```gallery
        .replace(/```gallery\s*\n([\s\S]*?)(?:```|$)/g, (_, content) => {
            const imgs = [];
@@ -0,0 +1,159 @@
+// ── Notification banner system ──
+// Providers register via addProvider(fn). Each fn(settings) returns an array of items.
+
+import { $, esc } from './util.js';
+
+const banner = $('upcoming-banner');
+const providers = [];
+const DISMISS_KEY = 'hyprcrd-dismissed-notifs';
+const DISMISS_DATE_KEY = 'hyprcrd-dismissed-date';
+const SETTINGS_KEY = 'hyprcrd-notif-settings';
+
+// Clear dismissed list daily
+if (localStorage.getItem(DISMISS_DATE_KEY) !== new Date().toISOString().substring(0, 10)) {
+    localStorage.removeItem(DISMISS_KEY);
+    localStorage.setItem(DISMISS_DATE_KEY, new Date().toISOString().substring(0, 10));
+}
+
+function getDismissed() {
+    try { return JSON.parse(localStorage.getItem(DISMISS_KEY) || '[]'); } catch { return []; }
+}
+
+function dismiss(id) {
+    const d = getDismissed();
+    if (!d.includes(id)) d.push(id);
+    localStorage.setItem(DISMISS_KEY, JSON.stringify(d));
+    render();
+}
+
+export function getSettings() {
+    const defaults = { lookahead: 3, time: 0, birthdays: true, termine: true, overdue: true };
+    try { return { ...defaults, ...JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}') }; } catch { return defaults; }
+}
+
+export function saveSettings(s) {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(s));
+    render();
+}
+
+/**
+ * Register a notification provider.
+ * @param {function} fn - Receives settings, returns array of { id, icon, iconColor, label, when, sort, onClick?, dismissable?, type? }
+ */
+export function addProvider(fn) {
+    providers.push(fn);
+}
+
+function getAllItems() {
+    const settings = getSettings();
+    const items = [];
+    for (const fn of providers) {
+        try {
+            const result = fn(settings);
+            if (Array.isArray(result)) items.push(...result);
+        } catch {}
+    }
+    items.sort((a, b) => (a.sort || '').localeCompare(b.sort || ''));
+    return items;
+}
+
+export function render() {
+    if (!banner) return;
+    const dismissed = getDismissed();
+    const visible = getAllItems().filter(i => !dismissed.includes(String(i.id)));
+
+    if (!visible.length) { banner.classList.add('hidden'); banner.innerHTML = ''; return; }
+
+    banner.classList.remove('hidden');
+    banner.innerHTML = `<div class="flex items-center gap-2 px-6 py-2 bg-t-raised border-b border-t-border overflow-x-auto">
+        <i class="ph ph-bell-ringing text-t-accent text-sm shrink-0"></i>
+        ${visible.map(i => `<div class="upcoming-item" data-notif-id="${i.id}" style="color:${i.iconColor || 'var(--t-text)'}">
+            <i class="ph ph-${i.icon || 'info'}" style="font-size:11px;"></i>
+            ${i.when ? `<span class="font-pixel text-[10px]">${esc(i.when)}</span>` : ''}
+            <span>${esc(i.label)}</span>
+            ${i.dismissable !== false ? `<button class="upcoming-dismiss" data-dismiss="${i.id}"><i class="ph ph-x text-xs"></i></button>` : ''}
+        </div>`).join('')}
+    </div>`;
+
+    banner.querySelectorAll('[data-notif-id]').forEach(el => {
+        el.addEventListener('click', e => {
+            if (e.target.closest('.upcoming-dismiss')) return;
+            const item = visible.find(i => String(i.id) === el.dataset.notifId);
+            if (item?.onClick) item.onClick();
+        });
+    });
+    banner.querySelectorAll('.upcoming-dismiss').forEach(btn => {
+        btn.addEventListener('click', e => {
+            e.stopPropagation();
+            dismiss(btn.dataset.dismiss);
+        });
+    });
+}
+
+// ── Settings panel integration ──
+
+export function renderSettingsPanel() {
+    const s = getSettings();
+
+    // Populate controls
+    const lookahead = $('notif-lookahead');
+    if (lookahead) lookahead.value = String(s.lookahead);
+    const time = $('notif-time');
+    if (time) time.value = String(s.time);
+    const cbBday = $('notif-birthdays');
+    if (cbBday) cbBday.checked = s.birthdays;
+    const cbTermin = $('notif-termine');
+    if (cbTermin) cbTermin.checked = s.termine;
+    const cbOverdue = $('notif-overdue');
+    if (cbOverdue) cbOverdue.checked = s.overdue;
+
+    // Auto-save on change (use onchange to avoid stacking listeners)
+    const save = () => saveSettings({
+        lookahead: parseInt(lookahead?.value || '3'),
+        time: parseInt(time?.value || '0'),
+        birthdays: cbBday?.checked ?? true,
+        termine: cbTermin?.checked ?? true,
+        overdue: cbOverdue?.checked ?? true,
+    });
+    if (lookahead) lookahead.onchange = save;
+    if (time) time.onchange = save;
+    if (cbBday) cbBday.onchange = save;
+    if (cbTermin) cbTermin.onchange = save;
+    if (cbOverdue) cbOverdue.onchange = save;
+
+    // Restore dismissed — replace element to avoid duplicate listeners
+    const restoreBtn = $('notif-clear-dismissed');
+    if (restoreBtn) {
+        const fresh = restoreBtn.cloneNode(true);
+        restoreBtn.parentNode.replaceChild(fresh, restoreBtn);
+        fresh.addEventListener('click', () => {
+            localStorage.removeItem(DISMISS_KEY);
+            render();
+            renderStream();
+        });
+    }
+
+    renderStream();
+}
+
+function renderStream() {
+    const stream = $('notif-stream');
+    if (!stream) return;
+    const dismissed = getDismissed();
+    const all = getAllItems();
+
+    if (!all.length) {
+        stream.innerHTML = '<div class="text-xs text-t-dim font-pixel text-center py-4">no notifications</div>';
+        return;
+    }
+
+    stream.innerHTML = all.map(i => {
+        const isDismissed = dismissed.includes(String(i.id));
+        return `<div class="flex items-center gap-2 px-2 py-1.5 rounded text-xs ${isDismissed ? 'opacity-40' : ''}" style="color:${i.iconColor || 'var(--t-text)'}">
+            <i class="ph ph-${i.icon || 'info'}" style="font-size:11px;flex-shrink:0;"></i>
+            ${i.when ? `<span class="font-pixel text-[9px] text-t-dim" style="min-width:55px;">${esc(i.when)}</span>` : ''}
+            <span class="flex-1 truncate">${esc(i.label)}</span>
+            ${isDismissed ? '<span class="font-pixel text-[8px] text-t-dim">dismissed</span>' : ''}
+        </div>`;
+    }).join('');
+}
@@ -8,6 +8,7 @@ export const state = {
    activeBucket: 'all',
    activeTags: [],
    hideTermine: localStorage.getItem('hyprcrd-hide-termine') === '1',
+    hideDone: localStorage.getItem('hyprcrd-hide-done') === '1',
    superView: localStorage.getItem('hyprcrd-superview') === '1',
    activeGroup: null,
    sortMode: localStorage.getItem('hyprcrd-sort') || 'manual',
@@ -45,6 +46,7 @@ export function tagChipHtml(tag) {
 }

 function effectiveDate(c) {
+    if (c.due_date) return c.due_date;
    const m = (c.title || '').match(/^(\d{4}-\d{2}-\d{2})/);
    if (m) return m[1];
    return (c.created_at || '').substring(0, 10);
@@ -1,25 +1,101 @@
-// ── Theme picker ──
+// ── Theme + Settings ──

-import { $ } from './util.js';
+import { $, api, getCsrf } from './util.js';
+import { state } from './state.js';
+import { renderSettingsPanel as renderNotifSettings } from './notifications.js';

-const picker = $('theme-picker');
-const list = $('theme-list');
+const overlay = $('settings-overlay');
+const themeList = $('settings-theme-list');

-if (list) {
+// Render theme list in settings
+function renderThemes() {
+    if (!themeList) return;
+    const current = localStorage.getItem('hyprcrd-theme') || 'slate';
+    themeList.innerHTML = '';
    for (const [key, t] of Object.entries(window.themes)) {
        const btn = document.createElement('button');
-        btn.className = 'flex items-center gap-2.5 w-full px-2 py-1.5 text-left text-xs text-t-muted hover:text-t-bright transition-colors rounded';
-        btn.dataset.themeDot = key;
-        btn.innerHTML = `<span class="w-3 h-3 rounded-full shrink-0 border border-t-border" style="background:${t.vars['--t-accent']}"></span>
-            <span class="font-pixel text-[10px]">${t.label}</span>`;
-        btn.onclick = () => { window.applyTheme(key); window._renderBoard?.(); };
-        list.appendChild(btn);
+        const active = key === current;
+        btn.className = `flex items-center gap-3 px-3 py-2.5 text-left text-xs border transition-colors rounded ${active ? 'border-t-accent text-t-bright' : 'border-t-border text-t-muted hover:border-t-accent hover:text-t-bright'}`;
+        btn.innerHTML = `<span class="w-4 h-4 rounded-full shrink-0" style="background:${t.vars['--t-accent']}"></span>
+            <span class="font-pixel text-[10px] flex-1">${t.label}</span>
+            ${active ? '<i class="ph ph-check text-t-accent text-sm"></i>' : ''}`;
+        btn.onclick = () => { window.applyTheme(key); renderThemes(); window._renderBoard?.(); };
+        themeList.appendChild(btn);
    }
 }

-window.applyTheme(localStorage.getItem('hyprcrd-theme') || 'slate');
+// Tab switching
+overlay?.querySelectorAll('.settings-tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+        overlay.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        const panel = tab.dataset.tab;
+        overlay.querySelectorAll('[id^="settings-panel-"]').forEach(p => p.classList.add('hidden'));
+        $(`settings-panel-${panel}`)?.classList.remove('hidden');
+        if (panel === 'sync') window._loadCaldavSettings?.();
+        if (panel === 'notifications') renderNotifSettings();
+        if (panel === 'behavior') initBehaviorSettings();
+    });
+});

-if (picker) {
-    $('theme-toggle')?.addEventListener('click', () => picker.classList.toggle('open'));
-    document.addEventListener('click', e => { if (!picker.contains(e.target)) picker.classList.remove('open'); });
+// Open/Close
+function updateStats() {
+    const sc = $('stats-cards'); if (sc) sc.textContent = state.cards?.length || 0;
+    const sb = $('stats-buckets'); if (sb) sb.textContent = state.buckets?.length || 0;
+    const tags = new Set(); (state.cards || []).forEach(c => (c.tags || '').split(',').forEach(t => { if (t) tags.add(t); }));
+    const st = $('stats-tags'); if (st) st.textContent = tags.size;
 }
+
+$('settings-btn')?.addEventListener('click', () => {
+    renderThemes();
+    updateStats();
+    overlay?.classList.add('open');
+});
+$('settings-close')?.addEventListener('click', () => overlay?.classList.remove('open'));
+overlay?.addEventListener('click', e => { if (e.target === overlay) overlay?.classList.remove('open'); });
+
+// Password change
+$('settings-pw-save')?.addEventListener('click', async () => {
+    const current = $('settings-pw-current')?.value;
+    const newPw = $('settings-pw-new')?.value;
+    const confirm = $('settings-pw-confirm')?.value;
+    const status = $('settings-pw-status');
+
+    if (!current || !newPw) { if (status) { status.textContent = 'fill all fields'; status.style.color = 'var(--t-danger)'; } return; }
+    if (newPw !== confirm) { if (status) { status.textContent = 'passwords do not match'; status.style.color = 'var(--t-danger)'; } return; }
+    if (newPw.length < 4) { if (status) { status.textContent = 'min 4 characters'; status.style.color = 'var(--t-danger)'; } return; }
+
+    const res = await fetch('api/auth/password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getCsrf() },
+        body: JSON.stringify({ current, new: newPw }),
+    }).then(r => r.json()).catch(() => ({ error: 'network error' }));
+
+    if (res.ok) {
+        if (status) { status.textContent = res.rekey ? 'password changed — re-encrypting notes...' : 'password changed'; status.style.color = 'var(--t-accent)'; }
+        $('settings-pw-current').value = '';
+        $('settings-pw-new').value = '';
+        $('settings-pw-confirm').value = '';
+        // Trigger sync to re-push notes with new encryption key
+        if (res.rekey) {
+            window._triggerSync?.();
+            setTimeout(() => { if (status) status.textContent = 'password changed, notes re-encrypted'; }, 3000);
+        }
+    } else {
+        if (status) { status.textContent = res.error || 'failed'; status.style.color = 'var(--t-danger)'; }
+    }
+});
+
+function initBehaviorSettings() {
+    const sel = $('setting-current-days');
+    if (sel) {
+        sel.value = localStorage.getItem('hyprcrd-current-days') || '2';
+        sel.onchange = () => {
+            localStorage.setItem('hyprcrd-current-days', sel.value);
+            window._renderBoard?.();
+        };
+    }
+}
+
+// Apply saved theme on load
+window.applyTheme(localStorage.getItem('hyprcrd-theme') || 'slate');
@@ -403,7 +403,7 @@ class CalDavSync
        $this->addLog('sync', null, null, 'fetch', 'ok', "total remote: " . count($remoteMap) . " events");

        // 3. Fetch local appointment cards — only #termin tagged or already synced
-        $stmt = $this->db->query("SELECT * FROM cards WHERE tags = 'termin' OR tags LIKE 'termin,%' OR tags LIKE '%,termin,%' OR tags LIKE '%,termin' OR tags = 'geburtstag' OR tags LIKE 'geburtstag,%' OR tags LIKE '%,geburtstag,%' OR tags LIKE '%,geburtstag' OR caldav_uid IS NOT NULL");
+        $stmt = $this->db->query("SELECT * FROM cards WHERE tags = 'termin' OR tags LIKE 'termin,%' OR tags LIKE '%,termin,%' OR tags LIKE '%,termin' OR tags = 'geburtstag' OR tags LIKE 'geburtstag,%' OR tags LIKE '%,geburtstag,%' OR tags LIKE '%,geburtstag' OR (caldav_uid IS NOT NULL AND caldav_uid NOT LIKE 'note:%')");
        $localCards = $stmt->fetchAll();
        $localMap = []; // caldav_uid -> card
        $localNew = []; // cards without caldav_uid
@@ -415,9 +415,9 @@ class CalDavSync
            }
        }

-        // 4. Tombstones
+        // 4. Tombstones (only CalDAV, not notes)
        $tombstones = [];
-        foreach ($this->db->query('SELECT * FROM caldav_tombstones')->fetchAll() as $t) {
+        foreach ($this->db->query("SELECT * FROM caldav_tombstones WHERE caldav_uid NOT LIKE 'note:%'")->fetchAll() as $t) {
            $tombstones[$t['caldav_uid']] = $t;
        }

@@ -83,6 +83,10 @@ class Database
            }
        }

+        if (!in_array('due_date', $colNames)) {
+            self::$pdo->exec('ALTER TABLE cards ADD COLUMN due_date TEXT DEFAULT NULL');
+        }
+
        // CalDAV columns
        if (!in_array('caldav_uid', $colNames)) {
            self::$pdo->exec('ALTER TABLE cards ADD COLUMN caldav_uid TEXT DEFAULT NULL');
@@ -0,0 +1,369 @@
+<?php
+
+require_once __DIR__ . '/CalDavClient.php';
+
+class WebDavNotes
+{
+    private PDO $db;
+    private ?CalDavClient $client = null;
+    private array $log = [];
+    private array $stats = ['pushed' => 0, 'pulled' => 0, 'deleted' => 0];
+
+    public function __construct(PDO $db)
+    {
+        $this->db = $db;
+    }
+
+    private function getEncKey(): string
+    {
+        $hash = $this->db->query("SELECT value FROM settings WHERE key = 'password_hash'")->fetchColumn();
+        return substr(hash('sha256', $hash ?: 'hyprcrd-default-key'), 0, 32);
+    }
+
+    private function decrypt(string $encrypted): string
+    {
+        $key = $this->getEncKey();
+        $raw = base64_decode($encrypted);
+        $iv = substr($raw, 0, 16);
+        $cipher = base64_encode(substr($raw, 16));
+        return openssl_decrypt($cipher, 'aes-256-cbc', $key, 0, $iv) ?: '';
+    }
+
+    private function encryptContent(string $plain): string
+    {
+        $key = $this->getEncKey();
+        $iv = random_bytes(16);
+        $cipher = openssl_encrypt($plain, 'aes-256-cbc', $key, OPENSSL_RAW_DATA, $iv);
+        return "HYPRCRD-ENCRYPTED-V1\n" . base64_encode($iv . $cipher);
+    }
+
+    private function decryptContent(string $data): ?string
+    {
+        $lines = explode("\n", $data, 2);
+        if ($lines[0] !== 'HYPRCRD-ENCRYPTED-V1' || empty($lines[1])) return null;
+        $key = $this->getEncKey();
+        $raw = base64_decode(trim($lines[1]));
+        if (strlen($raw) < 17) return null;
+        $iv = substr($raw, 0, 16);
+        $cipher = substr($raw, 16);
+        $plain = openssl_decrypt($cipher, 'aes-256-cbc', $key, OPENSSL_RAW_DATA, $iv);
+        return $plain !== false ? $plain : null;
+    }
+
+    private function isEncrypted(string $data): bool
+    {
+        return str_starts_with($data, 'HYPRCRD-ENCRYPTED-V1');
+    }
+
+    private function getClient(): CalDavClient
+    {
+        if (!$this->client) {
+            // Derive WebDAV files URL from CalDAV URL
+            $caldavUrl = $this->db->query("SELECT value FROM settings WHERE key = 'caldav_url'")->fetchColumn();
+            $user = $this->db->query("SELECT value FROM settings WHERE key = 'caldav_username'")->fetchColumn();
+            $pass = $this->db->query("SELECT value FROM settings WHERE key = 'caldav_password'")->fetchColumn();
+            if (!$caldavUrl || !$pass) throw new \Exception('No CalDAV credentials configured');
+
+            $url = $this->decrypt($caldavUrl);
+            // Convert /calendars/user/... to /files/user/Notes/
+            if (preg_match('#(https?://[^/]+)/remote\.php/dav/calendars/([^/]+)#', $url, $m)) {
+                $notesUrl = $m[1] . '/remote.php/dav/files/' . $m[2] . '/Notes/';
+            } else {
+                // Fallback: replace calendars path
+                $notesUrl = preg_replace('#/calendars/[^/]+/.*$#', '/files/' . urlencode($this->decrypt($user)) . '/Notes/', $url);
+            }
+
+            $this->client = new CalDavClient($notesUrl, $this->decrypt($user), $this->decrypt($pass));
+        }
+        return $this->client;
+    }
+
+    private function addLog(string $dir, ?int $cardId, string $action, string $status, string $detail = ''): void
+    {
+        $this->log[] = compact('dir', 'cardId', 'action', 'status', 'detail');
+    }
+
+    private function safeFilename(string $title): string
+    {
+        $name = preg_replace('/[<>:"\/\\\\|?*]/', '_', $title);
+        return trim($name) ?: 'untitled';
+    }
+
+    public function listRemoteNotes(): array
+    {
+        $client = $this->getClient();
+        $body = '<?xml version="1.0"?><d:propfind xmlns:d="DAV:"><d:prop><d:getlastmodified/><d:getetag/><d:getcontentlength/></d:prop></d:propfind>';
+        $res = $client->request('PROPFIND', $client->getBaseUrl(), $body, ['Depth: 1']);
+
+        if ($res['status'] === 404) {
+            // Notes folder doesn't exist, create it
+            $client->request('MKCOL', $client->getBaseUrl());
+            return [];
+        }
+        if ($res['status'] !== 207) return [];
+
+        $notes = [];
+        try {
+            $xml = new SimpleXMLElement($res['body']);
+            $xml->registerXPathNamespace('d', 'DAV:');
+            $baseHref = rtrim(parse_url($client->getBaseUrl(), PHP_URL_PATH), '/');
+            foreach ($xml->xpath('//d:response') as $resp) {
+                $resp->registerXPathNamespace('d', 'DAV:');
+                $href = (string)($resp->xpath('.//d:href')[0] ?? '');
+                if (rtrim($href, '/') === $baseHref) continue;
+                if (!preg_match('/\.md$/i', $href)) continue;
+                $etag = (string)($resp->xpath('.//d:getetag')[0] ?? '');
+                $lastmod = (string)($resp->xpath('.//d:getlastmodified')[0] ?? '');
+                $filename = urldecode(basename($href));
+                $notes[] = ['href' => $href, 'filename' => $filename, 'etag' => $etag, 'lastmod' => $lastmod];
+            }
+        } catch (\Exception $e) {
+            $this->addLog('sync', null, 'list', 'error', $e->getMessage());
+        }
+        return $notes;
+    }
+
+    public function sync(): array
+    {
+        try {
+            $client = $this->getClient();
+        } catch (\Exception $e) {
+            return ['ok' => false, 'error' => $e->getMessage(), 'log' => $this->log, 'stats' => $this->stats];
+        }
+
+        $baseUrl = $client->getBaseUrl();
+        $this->addLog('sync', null, 'init', 'ok', "notes: {$baseUrl}");
+
+        // Fetch remote notes
+        $remoteNotes = $this->listRemoteNotes();
+        $this->addLog('sync', null, 'fetch', 'ok', count($remoteNotes) . ' remote notes');
+        $remoteMap = []; // filename -> note data
+        foreach ($remoteNotes as $n) {
+            $remoteMap[$n['filename']] = $n;
+        }
+
+        // Fetch local #notes cards (including previously synced)
+        $localCards = $this->db->query("SELECT * FROM cards WHERE tags = 'notes' OR tags LIKE 'notes,%' OR tags LIKE '%,notes,%' OR tags LIKE '%,notes' OR caldav_uid LIKE 'note:%'")->fetchAll();
+        $this->addLog('sync', null, 'fetch', 'ok', count($localCards) . ' local #notes cards');
+
+        // Tombstones for deleted notes
+        $tombstones = [];
+        foreach ($this->db->query("SELECT * FROM caldav_tombstones WHERE caldav_uid LIKE 'note:%'")->fetchAll() as $t) {
+            $tombstones[str_replace('note:', '', $t['caldav_uid'])] = $t;
+        }
+
+        $localByFile = []; // filename -> card
+        $localNew = [];
+        foreach ($localCards as $c) {
+            if ($c['caldav_href']) {
+                $localByFile[basename($c['caldav_href'])] = $c;
+            } elseif ($c['caldav_uid'] && str_starts_with($c['caldav_uid'], 'note:')) {
+                $storedFile = str_replace('note:', '', $c['caldav_uid']);
+                $localByFile[$storedFile] = $c;
+            } else {
+                $localNew[] = $c;
+            }
+        }
+
+        // A: Existing synced cards
+        foreach ($localByFile as $filename => $card) {
+            if (isset($remoteMap[$filename])) {
+                $remote = $remoteMap[$filename];
+                $lt = strtotime($card['updated_at'] ?? '2000-01-01');
+                $st = strtotime($card['caldav_synced_at'] ?? '2000-01-01');
+                $localChanged = !$card['caldav_synced_at'] || ($lt - $st) > 2;
+                $remoteChanged = !$card['caldav_etag'] || $card['caldav_etag'] !== $remote['etag'];
+
+                if ($remoteChanged && !$localChanged) {
+                    // Pull
+                    $this->pullNote($client, $remote, $card);
+                } elseif ($localChanged && !$remoteChanged) {
+                    // Push
+                    $this->pushNote($client, $card, $filename);
+                } elseif ($localChanged && $remoteChanged) {
+                    // Conflict: last modified wins
+                    $localTime = strtotime($card['updated_at']);
+                    $remoteTime = strtotime($remote['lastmod'] ?? '2000-01-01');
+                    if ($localTime >= $remoteTime) {
+                        $this->pushNote($client, $card, $filename);
+                    } else {
+                        $this->pullNote($client, $remote, $card);
+                    }
+                }
+                unset($remoteMap[$filename]);
+            } else {
+                // Remote deleted — always respect server deletion for notes
+                $this->db->prepare('DELETE FROM cards WHERE id = ?')->execute([$card['id']]);
+                $this->addLog('pull', $card['id'], 'delete', 'ok', "remote deleted: {$filename}");
+                $this->stats['deleted']++;
+            }
+        }
+
+        // B: New local cards → push (opaque encrypted filename)
+        foreach ($localNew as $card) {
+            $filename = $this->encFilename($card['id']);
+            $this->pushNote($client, $card, $filename);
+        }
+
+        // C: New remote notes → pull (skip tombstoned)
+        foreach ($remoteMap as $filename => $remote) {
+            if (isset($tombstones[$filename])) {
+                // Locally deleted → delete from server
+                $parsed = parse_url($client->getBaseUrl());
+                $base = $parsed['scheme'] . '://' . $parsed['host'] . (isset($parsed['port']) ? ':' . $parsed['port'] : '');
+                $client->request('DELETE', $base . $remote['href']);
+                $this->db->prepare("DELETE FROM caldav_tombstones WHERE caldav_uid = ?")->execute(['note:' . $filename]);
+                $this->addLog('push', null, 'delete', 'ok', "deleted remote: {$filename}");
+                $this->stats['deleted']++;
+                continue;
+            }
+            $this->pullNote($client, $remote, null);
+        }
+
+        // Clean up remaining tombstones (already gone from server)
+        foreach ($tombstones as $filename => $t) {
+            if (!isset($remoteMap[$filename])) {
+                $this->db->prepare("DELETE FROM caldav_tombstones WHERE caldav_uid = ?")->execute(['note:' . $filename]);
+            }
+        }
+
+        return ['ok' => true, 'log' => $this->log, 'stats' => $this->stats];
+    }
+
+    private function encFilename(int $cardId): string
+    {
+        // Deterministic opaque filename from card ID + encryption key
+        return 'enc-' . substr(hash('sha256', $this->getEncKey() . ':' . $cardId), 0, 12) . '.md';
+    }
+
+    private function pushNote(CalDavClient $client, array $card, string $filename): void
+    {
+        // Include metadata for cross-client sync
+        $meta = '';
+        if (!empty($card['bucket_name'])) {
+            $meta = "<!--bucket:{$card['bucket_name']}-->\n";
+        } elseif (!empty($card['bucket_id'])) {
+            $bname = $this->db->prepare('SELECT name FROM buckets WHERE id = ?');
+            $bname->execute([$card['bucket_id']]);
+            $bn = $bname->fetchColumn();
+            if ($bn) $meta = "<!--bucket:{$bn}-->\n";
+        }
+        if (!empty($card['color']) && $card['color'] !== '#38bdf8') {
+            $meta .= "<!--color:{$card['color']}-->\n";
+        }
+        $plain = "{$meta}# {$card['title']}\n\n{$card['body']}";
+        $content = $this->encryptContent($plain);
+
+        // Migrate old plaintext filename to encrypted opaque filename
+        $oldHref = $card['caldav_href'] ? basename($card['caldav_href']) : null;
+        if ($oldHref && !str_starts_with($oldHref, 'enc-')) {
+            // Delete old plaintext file
+            $oldUrl = $client->getBaseUrl() . rawurlencode($oldHref);
+            $client->request('DELETE', $oldUrl);
+            $filename = $this->encFilename($card['id']);
+        } else {
+            $filename = $oldHref ?: $this->encFilename($card['id']);
+        }
+        $url = $client->getBaseUrl() . rawurlencode($filename);
+        $res = $client->request('PUT', $url, $content, ['Content-Type: text/markdown; charset=utf-8']);
+        if ($res['status'] >= 200 && $res['status'] < 300) {
+            $etag = $res['etag'];
+            // If no ETag in PUT response, fetch it
+            if (!$etag) {
+                $prop = $client->request('PROPFIND', $url, '<?xml version="1.0"?><d:propfind xmlns:d="DAV:"><d:prop><d:getetag/></d:prop></d:propfind>', ['Depth: 0']);
+                if ($prop['status'] === 207) {
+                    try {
+                        $xml = new \SimpleXMLElement($prop['body']);
+                        $xml->registerXPathNamespace('d', 'DAV:');
+                        $found = $xml->xpath('//d:getetag');
+                        if ($found) $etag = (string)$found[0];
+                    } catch (\Exception $e) {}
+                }
+            }
+            $this->db->prepare('UPDATE cards SET caldav_uid=?, caldav_etag=?, caldav_href=?, caldav_synced_at=datetime("now") WHERE id=?')
+                ->execute(['note:' . $filename, $etag, $filename, $card['id']]);
+            $this->addLog('push', $card['id'], 'push', 'ok', $filename);
+            $this->stats['pushed']++;
+        } else {
+            $this->addLog('push', $card['id'], 'push', 'error', "HTTP {$res['status']} {$filename}");
+        }
+    }
+
+    private function pullNote(CalDavClient $client, array $remote, ?array $card): void
+    {
+        $parsed = parse_url($client->getBaseUrl());
+        $base = $parsed['scheme'] . '://' . $parsed['host'] . (isset($parsed['port']) ? ':' . $parsed['port'] : '');
+        $url = $base . $remote['href'];
+        $res = $client->request('GET', $url);
+        if ($res['status'] !== 200) {
+            $this->addLog('pull', $card['id'] ?? null, 'pull', 'error', "HTTP {$res['status']} {$remote['filename']}");
+            return;
+        }
+
+        $raw = $res['body'];
+        // Decrypt if encrypted, fall back to plain text
+        if ($this->isEncrypted($raw)) {
+            $content = $this->decryptContent($raw);
+            if ($content === null) {
+                // Decryption failed — might be from another instance with different password
+                // Try treating as plain text (skip the header line)
+                $this->addLog('pull', $card['id'] ?? null, 'pull', 'ok', "decrypt failed, importing as plain: {$remote['filename']}");
+                $content = $raw;
+            }
+        } else {
+            $content = $raw;
+        }
+        // Extract metadata comments
+        $bucketName = null;
+        $noteColor = null;
+        if (preg_match('/<!--bucket:(.+?)-->/', $content, $bm)) { $bucketName = $bm[1]; $content = str_replace($bm[0] . "\n", '', $content); }
+        if (preg_match('/<!--color:(.+?)-->/', $content, $cm)) { $noteColor = $cm[1]; $content = str_replace($cm[0] . "\n", '', $content); }
+
+        // Resolve or create bucket
+        $bucketId = $card['bucket_id'] ?? null;
+        if ($bucketName) {
+            $stmt = $this->db->prepare('SELECT id FROM buckets WHERE name = ?');
+            $stmt->execute([$bucketName]);
+            $existingBucket = $stmt->fetchColumn();
+            if ($existingBucket) {
+                $bucketId = $existingBucket;
+            } else {
+                $this->db->prepare('INSERT INTO buckets (name, position) VALUES (?, (SELECT COALESCE(MAX(position),0)+1 FROM buckets))')->execute([$bucketName]);
+                $bucketId = $this->db->lastInsertId();
+                $this->addLog('pull', null, 'bucket', 'ok', "created bucket: {$bucketName}");
+            }
+        }
+
+        // Parse title from first # heading or filename
+        $title = preg_replace('/\.md$/i', '', $remote['filename']);
+        $body = $content;
+        if (preg_match('/^#\s+(.+)\n\n?([\s\S]*)$/m', $content, $m)) {
+            $title = trim($m[1]);
+            $body = trim($m[2]);
+        }
+        // Ensure #notes tag
+        if (strpos($body, '#notes') === false) {
+            $body = rtrim($body) . "\n\n#notes";
+        }
+        $tags = $this->extractTags($body);
+
+        $color = $noteColor ?: ($card['color'] ?? '#38bdf8');
+
+        if ($card) {
+            $this->db->prepare('UPDATE cards SET title=?, body=?, tags=?, color=?, bucket_id=?, caldav_etag=?, caldav_synced_at=datetime("now"), updated_at=datetime("now") WHERE id=?')
+                ->execute([$title, $body, $tags, $color, $bucketId, $remote['etag'], $card['id']]);
+            $this->addLog('pull', $card['id'], 'update', 'ok', $remote['filename']);
+        } else {
+            $this->db->prepare('INSERT INTO cards (title, body, color, tags, bucket_id, position, caldav_uid, caldav_etag, caldav_href, caldav_synced_at) VALUES (?, ?, ?, ?, ?, -1, ?, ?, ?, datetime("now"))')
+                ->execute([$title, $body, $color, $tags, $bucketId, 'note:' . $remote['filename'], $remote['etag'], $remote['filename']]);
+            $this->addLog('pull', (int)$this->db->lastInsertId(), 'create', 'ok', $remote['filename'] . ($bucketName ? " → {$bucketName}" : ''));
+        }
+        $this->stats['pulled']++;
+    }
+
+    private function extractTags(string $body): string
+    {
+        preg_match_all('/(?<=\s|^)#([a-zA-Z0-9_\/-][a-zA-Z0-9_\/-]*[a-zA-Z0-9_-]|[a-zA-Z0-9_-]+)/m', $body, $matches);
+        return implode(',', array_unique(array_map('strtolower', $matches[1] ?? [])));
+    }
+}
@@ -1,6 +1,12 @@
 <?php

-require_once __DIR__ . '/../config.php';
+// Invalidate opcache for config on each request (tiny overhead, ensures version updates)
+$configPath = __DIR__ . '/../config.php';
+if (function_exists('opcache_invalidate')) {
+    opcache_invalidate($configPath, true);
+}
+
+require_once $configPath;
 require_once __DIR__ . '/Database.php';

 // Ensure data directory is writable