collab attachments, multi-day events, calendar improvements

- Collab buckets sync attachments alongside cards (images/PDFs/audio). New /api/collab-attachments endpoint on relay, encrypted at rest, bucket-scoped for members. - CalDAV multi-day events via **Bis:** body field. Calendar renders event on every day in range with day counter (1/6, 2/6, ...). - Calendar preserves month across close/reopen (only jumps to today on first open). - Calendar title: centered nav group with [MM-DD] Mon Y [KW-KW] — dimmed brackets, fixed width so nothing wiggles. - Editor: scratchpad uses custom confirm, autobackup-draft dialog replaced with custom styled dialog. - Scanlines theme feature removed (performance issue). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 18:22:02 +02:00
1 parent 002562b1d3
commit ca47052768
@@ -29,7 +29,6 @@ body { font-family: var(--t-font-content, 'JetBrains Mono', monospace); }
 }
 .font-pixel { font-family: var(--t-font-ui, var(--t-font-pixel, 'Silkscreen', cursive)) !important; }
 .brand { font-family: 'Silkscreen', cursive !important; }
-body.no-scanlines::after { display: none !important; }
 #dialog-msg { white-space: pre-line; word-break: break-word; }

 /* ── User-customizable design tokens ── */
@@ -172,7 +171,6 @@ body.anim-slow .card-spinner {
    position: relative; padding: 14px; overflow: hidden;
    background: var(--t-bg); border: 1px solid var(--t-border); border-radius: 3px;
 }
-.theme-preview .tp-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--t-scanline, rgba(0,0,0,0.04)) 2px, var(--t-scanline, rgba(0,0,0,0.04)) 4px); }
 .theme-preview .tp-row { display: flex; gap: 12px; align-items: stretch; position: relative; z-index: 1; }
 .theme-preview .tp-card {
    flex: 1; min-width: 0;
@@ -299,16 +297,6 @@ body.settings-peeking #settings-overlay > div { pointer-events: auto; }
 *::-webkit-scrollbar-thumb:hover { background: var(--t-dim); }
 *::-webkit-scrollbar-corner { background: transparent; }

-/* Scanlines */
-body::after {
-    content: '';
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: 9999;
-    background: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--t-scanline, rgba(0,0,0,0.04)) 2px, var(--t-scanline, rgba(0,0,0,0.04)) 4px);
-}
-
 /* Blinking cursor */
 .cursor-blink::after { content: '_'; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
@@ -1158,7 +1158,6 @@ if (str_starts_with($route, '/api/')) {
        // color theme
        theme: 'slate',
        // typography
-        scanlines: '1',
        fontHeadline: 'pixel', fontContent: 'mono', fontUi: 'pixel',
        // geometry
        radiusCard: 0, radiusButton: 0, radiusInput: 0, radiusModal: 0, radiusTag: 0, radiusImage: 0,
@@ -1172,7 +1171,6 @@ if (str_starts_with($route, '/api/')) {
    window.builtinPresets = {
        Terminal: { ...window.designDefaults },
        Modern:   { theme: 'paper',
-                    scanlines: '0',
                    fontHeadline: 'mono', fontContent: 'mono', fontUi: 'mono',
                    radiusCard: 10, radiusButton: 24, radiusInput: 5, radiusModal: 15, radiusTag: 3, radiusImage: 8,
                    borderCard: 1, borderStyle: 'solid', barHeight: 3,
@@ -1210,7 +1208,6 @@ if (str_starts_with($route, '/api/')) {
        root.setProperty('--ui-lift-card',     d.liftCard + 'px');
        root.setProperty('--ui-blur-overlay',  d.blurOverlay + 'px');
        // body classes
-        document.body.classList.toggle('no-scanlines', String(d.scanlines) !== '1');
        document.body.classList.remove('anim-off', 'anim-fast', 'anim-slow');
        if (d.animSpeed === 'off')  document.body.classList.add('anim-off');
        if (d.animSpeed === 'fast') document.body.classList.add('anim-fast');
@@ -1222,8 +1219,6 @@ if (str_starts_with($route, '/api/')) {
        // Migrate legacy individual keys (only if no JSON blob exists yet)
        if (!Object.keys(saved).length) {
            const legacy = {};
-            const sl = localStorage.getItem('hyprcrd-scanlines');
-            if (sl !== null) legacy.scanlines = sl;
            const fh = localStorage.getItem('hyprcrd-font-headline'); if (fh) legacy.fontHeadline = fh;
            const fc = localStorage.getItem('hyprcrd-font-content');  if (fc) legacy.fontContent  = fc;
            const fu = localStorage.getItem('hyprcrd-font-ui');       if (fu) legacy.fontUi       = fu;
@@ -1649,7 +1644,6 @@ if (str_starts_with($route, '/api/')) {
                                </div>
                            </div>
                            <div id="theme-preview" class="theme-preview">
-                                <div class="tp-scan" id="theme-preview-scan"></div>
                                <div class="tp-row">
                                    <div class="tp-card">
                                        <div class="tp-card-bar"></div>
@@ -1696,7 +1690,6 @@ if (str_starts_with($route, '/api/')) {
                            </summary>
                            <div class="mt-2">
                            <div class="design-section-label">typography</div>
-                            <div class="toggle-row"><span class="toggle-label">Scan lines</span><div class="toggle-switch" id="setting-scanlines"></div></div>
                            <div class="design-row"><label>Headline</label><select id="setting-font-headline" 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"></select></div>
                            <div class="design-row"><label>Content</label><select id="setting-font-content" 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"></select></div>
                            <div class="design-row"><label>UI</label><select id="setting-font-ui" 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"></select></div>
@@ -2093,14 +2086,16 @@ if (str_starts_with($route, '/api/')) {
    <!-- Calendar -->
    <div class="overlay fixed inset-0 z-[73]" style="background:var(--t-overlay)" id="calendar">
        <div class="bg-t-surface border border-t-border flex flex-col absolute" style="inset:40px;">
-            <div class="flex items-center gap-3 px-5 py-3 border-b border-t-border shrink-0">
+            <div class="flex items-center gap-2 px-5 py-3 border-b border-t-border shrink-0 relative">
                <i class="ph ph-calendar-dots text-t-accent text-base"></i>
-                <button id="cal-prev" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-sm"></i></button>
-                <h2 id="cal-title" class="font-pixel text-xs text-t-accent min-w-[120px] text-center"></h2>
-                <button id="cal-next" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-right text-sm"></i></button>
                <button id="cal-today" class="font-pixel text-[10px] px-2 py-0.5 border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">Today</button>
                <button id="cal-sync" class="font-pixel text-[10px] px-2 py-0.5 border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors flex items-center gap-1"><i class="ph ph-cloud-arrow-up text-xs"></i>Sync</button>
                <button id="cal-caldav-settings" class="text-t-dim hover:text-t-accent transition-colors"><i class="ph ph-gear text-sm"></i></button>
+                <div class="absolute left-1/2 -translate-x-1/2 flex items-center gap-3">
+                    <button id="cal-prev" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-sm"></i></button>
+                    <h2 id="cal-title" class="font-pixel text-sm text-t-accent text-center" style="width:220px;flex-shrink:0;"></h2>
+                    <button id="cal-next" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-right text-sm"></i></button>
+                </div>
                <div class="flex-1"></div>
                <button id="cal-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>
@@ -88,20 +88,35 @@ function matchesRRule(card, targetDateStr) {
    return false;
 }

+function getMultiDayEnd(card) {
+    const m = (card.body || '').match(/\*\*Bis:\*\*\s*(\d{4}-\d{2}-\d{2})/i);
+    return m ? m[1] : null;
+}
+
 function getCardsForDate(ds) {
    const results = [];
    const targetYear = parseInt(ds.substring(0, 4));
    for (const c of state.cards) {
-        if (cardBaseDate(c) === ds) {
+        const base = cardBaseDate(c);
+        if (base === ds) {
            results.push({ ...c, _recurring: false });
-        } else if (c.caldav_rrule && matchesRRule(c, ds)) {
-            const baseYear = parseInt(cardBaseDate(c).substring(0, 4));
+        } else if (base && base < ds) {
+            // Multi-day event: check if ds is within [base..end]
+            const end = getMultiDayEnd(c);
+            if (end && ds <= end) {
+                const startMs = Date.parse(base);
+                const curMs = Date.parse(ds);
+                const dayNum = Math.round((curMs - startMs) / 86400000) + 1;
+                const totalDays = Math.round((Date.parse(end) - startMs) / 86400000) + 1;
+                results.push({ ...c, _recurring: false, _multiDay: { day: dayNum, total: totalDays, isEnd: ds === end } });
+            }
+        }
+        if (c.caldav_rrule && matchesRRule(c, ds)) {
+            const baseYear = parseInt(base.substring(0, 4));
            const rrule = parseRRule(c.caldav_rrule);
            const age = rrule?.FREQ === 'YEARLY' ? targetYear - baseYear : null;
-            results.push({ ...c, _recurring: true, _age: age });
+            if (base !== ds) results.push({ ...c, _recurring: true, _age: age });
        } else if ((c.tags || '').split(',').includes('geburtstag')) {
-            // Local birthday cards repeat yearly without RRULE
-            const base = cardBaseDate(c);
            if (base.substring(5) === ds.substring(5) && ds !== base) {
                const age = targetYear - parseInt(base.substring(0, 4));
                results.push({ ...c, _recurring: true, _age: age > 0 ? age : null });
@@ -146,7 +161,25 @@ function clearCalHover() {
 }

 function render() {
-    title.textContent = `${MONTHS[state.calMonth]} ${state.calYear}`;
+    // Format: [MM-DD] Mon Y [KW-KW]
+    //   MM-DD  = today's month-day
+    //   Mon Y  = displayed month + year (abbreviated)
+    //   KW-KW  = ISO week range spanning the displayed month
+    const isoWeek = (y, m, d) => {
+        const dt = new Date(Date.UTC(y, m, d));
+        const dayNum = dt.getUTCDay() || 7;
+        dt.setUTCDate(dt.getUTCDate() + 4 - dayNum);
+        const yearStart = new Date(Date.UTC(dt.getUTCFullYear(), 0, 1));
+        return Math.ceil((((dt - yearStart) / 86400000) + 1) / 7);
+    };
+    const pad = n => String(n).padStart(2, '0');
+    const nowDate = new Date();
+    const todayMd = `${pad(nowDate.getMonth() + 1)}-${pad(nowDate.getDate())}`;
+    const monAbbr = MONTHS[state.calMonth].substring(0, 3);
+    const lastDay = new Date(state.calYear, state.calMonth + 1, 0).getDate();
+    const wStart = isoWeek(state.calYear, state.calMonth, 1);
+    const wEnd = isoWeek(state.calYear, state.calMonth, lastDay);
+    title.innerHTML = `<span style="color:var(--t-dim)">[${todayMd}]</span> ${monAbbr} ${state.calYear} <span style="color:var(--t-dim)">[${pad(wStart)}-${pad(wEnd)}]</span>`;

    const firstDay = new Date(state.calYear, state.calMonth, 1).getDay(); // 0=Sun
    const startOffset = (firstDay + 6) % 7; // Mon=0
@@ -210,9 +243,11 @@ function render() {
            const calCfg = getCardCalConfig(c);
            const itemColor = calCfg?.color || c.color;
            const itemIcon = calCfg?.icon || null;
+            const md = c._multiDay;
            html += `<div class="cal-item" data-card-id="${c.id}" style="border-left-color:${itemColor};">`;
            if (itemIcon) html += `<i class="ph ph-${itemIcon}" style="font-size:9px;color:${itemColor};flex-shrink:0;"></i>`;
-            if (timeStr) html += `<span style="font-family:var(--t-font-pixel);font-size:8px;color:var(--t-dim);flex-shrink:0;">${timeStr}</span>`;
+            if (md) html += `<span style="font-family:var(--t-font-pixel);font-size:8px;color:${itemColor};flex-shrink:0;">${md.day}/${md.total}</span>`;
+            else if (timeStr) html += `<span style="font-family:var(--t-font-pixel);font-size:8px;color:var(--t-dim);flex-shrink:0;">${timeStr}</span>`;
            if (c._recurring && !itemIcon) html += `<i class="ph ph-arrows-clockwise" style="font-size:8px;color:var(--t-dim);flex-shrink:0;"></i>`;
            html += `<span class="truncate">${esc(name)}</span>`;
            html += `</div>`;
@@ -494,9 +529,14 @@ export function refreshCalendar() {
 }

 export function openCalendar() {
-    const now = new Date();
-    state.calYear = now.getFullYear();
-    state.calMonth = now.getMonth();
+    // Only jump to today on first open — preserve the user's navigation
+    // when the calendar is re-opened (e.g. after saving a card in a
+    // different month).
+    if (state.calYear == null || state.calMonth == null) {
+        const now = new Date();
+        state.calYear = now.getFullYear();
+        state.calMonth = now.getMonth();
+    }
    render();
    overlay.classList.add('open');
    overlay.style.visibility = '';
@@ -4,6 +4,7 @@ import { $, esc, api, escRe, getCsrf, fuzzyMatch } from './util.js';
 import { state, getChildren, CARD_COLORS } from './state.js';
 import { renderMd, addCodeCopyButtons, formatTodoItems } from './markdown.js';
 import { pushCardEdit, snapshotCard } from './undo.js';
+import { showDialog } from './dialog.js';

 const modal = $('modal');
 const body = $('editor-body');
@@ -238,7 +239,7 @@ export function openModal(card = null) {
    updateActiveLine();

    // Check for unsaved draft (newer than what we just loaded).
-    // Skipped during test runs — tests would block on the confirm dialog.
+    // Skipped during test runs — tests would block on the dialog.
    const draft = loadDraft(card?.id);
    if (draft && !window._testRunning) {
        const cardModified = card ? Date.parse(card.updated_at + 'Z') || 0 : 0;
@@ -248,18 +249,27 @@ export function openModal(card = null) {
        if (draftIsNewer && draftHasContent && differsFromLoaded) {
            const age = Math.round((Date.now() - draft.savedAt) / 60000);
            const ageText = age < 1 ? 'just now' : age < 60 ? `${age} min ago` : `${Math.round(age / 60)} h ago`;
-            const restore = window.confirm(`Unsaved draft from ${ageText} found.\n\nRestore it?`);
-            if (restore) {
-                inpTitle.value = draft.title || '';
-                body.value = draft.body || '';
-                if (scratchpadBody) scratchpadBody.value = draft.scratchpad || '';
-                updatePreview();
-            } else {
-                clearDraft(card?.id);
-            }
+            const cardId = card?.id;
+            // Async confirm — fires after openModal returns
+            (async () => {
+                const restore = await showDialog({
+                    title: 'unsaved draft',
+                    message: `Unsaved draft from ${ageText} found.\n\nRestore it?`,
+                    okLabel: 'Restore',
+                    cancelLabel: 'Discard',
+                });
+                if (!modal.classList.contains('open') || state.editingId != cardId) return;
+                if (restore) {
+                    inpTitle.value = draft.title || '';
+                    body.value = draft.body || '';
+                    if (scratchpadBody) scratchpadBody.value = draft.scratchpad || '';
+                    updatePreview();
+                } else {
+                    clearDraft(cardId);
+                }
+            })();
        }
    } else if (draft && window._testRunning) {
-        // During tests, silently discard any draft so it doesn't accumulate
        clearDraft(card?.id);
    }

@@ -96,8 +96,6 @@ function updatePreview() {
    set('--tp-bar-height',    d.barHeight + 'px');
    set('--tp-pad-card',      d.padCard + 'px');
    set('--tp-shadow-card',   shadows[d.shadowCard] || 'none');
-    const scan = $('theme-preview-scan');
-    if (scan) scan.style.display = String(d.scanlines) === '1' ? '' : 'none';
 }

 function fillFontSelect(id, value) {
@@ -129,8 +127,6 @@ function syncControlsFromPending() {
        const valEl = $(valId);
        if (valEl) valEl.textContent = v;
    }
-    const scanEl = $('setting-scanlines');
-    if (scanEl) scanEl.classList.toggle('on', String(designPending.scanlines) === '1');
 }

 function commitDesign() {
@@ -167,16 +163,6 @@ function initDesignSettings() {
    if (designWired) return;
    designWired = true;

-    // Scanlines toggle
-    const scanEl = $('setting-scanlines');
-    const scanRow = scanEl?.closest('.toggle-row');
-    if (scanRow) scanRow.onclick = () => {
-        const nowOn = !scanEl.classList.contains('on');
-        scanEl.classList.toggle('on', nowOn);
-        designPending.scanlines = nowOn ? '1' : '0';
-        commitDesign();
-    };
-
    // Selects
    for (const [id, key] of SELECT_FIELDS) {
        const el = $(id);
@@ -493,6 +493,25 @@ function collabSyncCards(PDO $db): array {
            'push' => $res['updated_at'] ?? $card['updated_at'],
        ]);
        $stats['pushed']++;
+
+        // Push referenced local attachments to the bucket (encrypted,
+        // member-scoped). Extract `uploads/<hex>.<ext>` from the body.
+        $body = $card['body'] ?? '';
+        if ($body && preg_match_all('#uploads/([a-f0-9]+\.\w+)#', $body, $fm)) {
+            foreach (array_unique($fm[1]) as $fn) {
+                $localPath = UPLOAD_DIR . '/' . $fn;
+                if (!is_file($localPath)) continue;
+                $bytes = file_get_contents($localPath);
+                if ($bytes === false) continue;
+                $encoded = collabEncryptPayload(['raw' => base64_encode($bytes)]);
+                if ($encoded === null) continue;
+                collabRelayCall('/api/collab-attachments', 'POST', [
+                    'bucket_uid' => $card['bucket_uid'],
+                    'filename'   => $fn,
+                    'data'       => $encoded,
+                ]);
+            }
+        }
    }

    // ── 3. Pull deltas ─────────────────────────────────────
@@ -628,6 +647,28 @@ function collabSyncCards(PDO $db): array {
            ]);
            $stats['pulled']++;
            if ($foreignAuthor) $unreadBuckets[$c['bucket_uid']] = true;
+
+            // Fetch missing attachments referenced in the body.
+            $pulledBody = $fields['body'] ?? '';
+            if ($pulledBody && preg_match_all('#uploads/([a-f0-9]+\.\w+)#', $pulledBody, $fm)) {
+                $uploadDir = UPLOAD_DIR;
+                if (!is_dir($uploadDir)) @mkdir($uploadDir, 0755, true);
+                foreach (array_unique($fm[1]) as $fn) {
+                    $dest = $uploadDir . '/' . $fn;
+                    if (file_exists($dest)) continue; // already have it
+                    $attRes = collabRelayCall('/api/collab-attachments?bucket_uid=' . urlencode($c['bucket_uid']) . '&filename=' . urlencode($fn));
+                    if (!($attRes['ok'] ?? false)) continue;
+                    $atts = $attRes['attachments'] ?? [];
+                    foreach ($atts as $a) {
+                        if (($a['filename'] ?? '') !== $fn) continue;
+                        $decoded = collabDecryptPayload($a['data'] ?? '');
+                        if ($decoded && isset($decoded['raw'])) {
+                            $bytes = base64_decode($decoded['raw']);
+                            if ($bytes !== false) file_put_contents($dest, $bytes);
+                        }
+                    }
+                }
+            }
        }
    } finally {
        // Bump `collab_buckets.updated_at` for every bucket that received
@@ -58,4 +58,25 @@ describe('Calendar', () => {
        await sleep(150);
        expect($('#calendar')).toBeHidden();
    });
+
+    it('preserves month across close/reopen', async () => {
+        // Open calendar and navigate forward 3 months
+        click('#calendar-btn');
+        await sleep(200);
+        click('#cal-next');
+        click('#cal-next');
+        click('#cal-next');
+        await sleep(200);
+        const navigatedTitle = $('#cal-title').textContent;
+
+        // Close
+        click('#cal-close');
+        await sleep(150);
+        expect($('#calendar')).toBeHidden();
+
+        // Reopen — must stay on the navigated month, not jump to today
+        click('#calendar-btn');
+        await sleep(200);
+        expect($('#cal-title').textContent).toBe(navigatedTitle);
+    });
 });