bak

public/js/modules/board.js

@@ -73,6 +73,31 @@ function clearSelection() {
 export function getSelectedIds() { return [...selectedIds]; }
 export { clearSelection };
 
+// Delete/Backspace deletes selected cards
+document.addEventListener('keydown', async e => {
+    if (!selectedIds.size) return;
+    if (e.key !== 'Delete' && e.key !== 'Backspace') return;
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) return;
+    e.preventDefault();
+    if (localStorage.getItem('hyprcrd-confirm-delete') !== '0') {
+        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();
+});
+
+// Clear selection on click outside board (header, footer, etc)
+document.addEventListener('click', e => {
+    if (!selectedIds.size) return;
+    if (board.contains(e.target)) return;
+    if (selectBar?.contains(e.target)) return;
+    if (document.querySelector('.bucket-picker')?.contains(e.target)) return;
+    clearSelection();
+});
+
 $('select-export')?.addEventListener('click', () => {
     if (!selectedIds.size) return;
     window.location.href = 'api/export?ids=' + [...selectedIds].join(',');
@@ -89,23 +114,66 @@ $('select-group')?.addEventListener('click', async () => {
     await window._reloadAll();
 });
 
-$('select-bucket')?.addEventListener('click', async () => {
+$('select-bucket')?.addEventListener('click', () => {
     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();
+    // Remove existing picker
+    document.querySelector('.bucket-picker')?.remove();
+
+    const btn = $('select-bucket');
+    const rect = btn.getBoundingClientRect();
+    const picker = document.createElement('div');
+    picker.className = 'bucket-picker';
+    picker.style.cssText = `position:fixed;left:${rect.left}px;bottom:${window.innerHeight - rect.top + 4}px;z-index:200;background:var(--t-surface);border:1px solid var(--t-border);border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,0.4);min-width:180px;max-height:260px;display:flex;flex-direction:column;`;
+
+    const list = document.createElement('div');
+    list.style.cssText = 'overflow-y:auto;flex:1;';
+    state.buckets.forEach(b => {
+        const item = document.createElement('button');
+        item.style.cssText = 'display:flex;align-items:center;gap:8px;width:100%;padding:6px 12px;background:none;border:none;color:var(--t-muted);font-size:12px;cursor:pointer;text-align:left;';
+        item.innerHTML = `<span style="width:8px;height:8px;border-radius:2px;background:${b.color || '#64748b'};flex-shrink:0;"></span><span style="font-family:var(--t-font-pixel);font-size:10px;">${esc(b.name)}</span>`;
+        item.addEventListener('mouseenter', () => { item.style.color = 'var(--t-bright)'; });
+        item.addEventListener('mouseleave', () => { item.style.color = 'var(--t-muted)'; });
+        item.addEventListener('click', async () => {
+            picker.remove();
+            for (const id of selectedIds) await api(`api/cards/${id}`, { method: 'PATCH', body: { bucket_id: b.id } });
+            clearSelection();
+            await window._reloadAll();
+        });
+        list.appendChild(item);
+    });
+    picker.appendChild(list);
+
+    const inputWrap = document.createElement('div');
+    inputWrap.style.cssText = 'border-top:1px solid var(--t-border);padding:6px;';
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.placeholder = 'new bucket...';
+    input.style.cssText = 'width:100%;background:var(--t-bg);border:1px solid var(--t-border);color:var(--t-bright);padding:4px 8px;font-size:11px;font-family:var(--t-font-pixel);border-radius:3px;';
+    input.addEventListener('keydown', async e => {
+        if (e.key !== 'Enter') return;
+        const name = input.value.trim();
+        if (!name) return;
+        picker.remove();
+        let bucket = state.buckets.find(b => b.name.toLowerCase() === name.toLowerCase());
+        if (!bucket) {
+            const created = await api('api/buckets', { method: 'POST', body: { name } });
+            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();
+    });
+    inputWrap.appendChild(input);
+    picker.appendChild(inputWrap);
+
+    document.body.appendChild(picker);
+    input.focus();
+
+    const closePicker = e => { if (!picker.contains(e.target) && e.target !== btn) { picker.remove(); cleanup(); } };
+    const closeOnEsc = e => { if (e.key === 'Escape') { e.stopPropagation(); picker.remove(); cleanup(); } };
+    const cleanup = () => { document.removeEventListener('mousedown', closePicker); document.removeEventListener('keydown', closeOnEsc, true); };
+    setTimeout(() => { document.addEventListener('mousedown', closePicker); document.addEventListener('keydown', closeOnEsc, true); }, 0);
 });
 
 $('select-color')?.addEventListener('click', async () => {
@@ -137,6 +205,15 @@ $('select-tag')?.addEventListener('click', async () => {
     await window._reloadAll();
 });
 
+$('select-unbucket')?.addEventListener('click', async () => {
+    if (!selectedIds.size) return;
+    for (const id of selectedIds) {
+        await api(`api/cards/${id}`, { method: 'PATCH', body: { bucket_id: null } });
+    }
+    clearSelection();
+    await window._reloadAll();
+});
+
 $('select-delete')?.addEventListener('click', async () => {
     if (!selectedIds.size) return;
     if (localStorage.getItem('hyprcrd-confirm-delete') !== '0') {
@@ -568,7 +645,11 @@ export function renderBoard() {
     if (fc) fc.textContent = `${cards.length} card${cards.length !== 1 ? 's' : ''} · ${state.cards.length} total`;
 
     // Refresh split preview if open
-    if (boardSplitOpen && boardPreviewCardId) showBoardPreview(boardPreviewCardId);
+    if (boardSplitOpen && boardPreviewCardId) {
+        const stillExists = state.cards.some(c => c.id == boardPreviewCardId);
+        if (stillExists) showBoardPreview(boardPreviewCardId);
+        else { boardPreviewCardId = null; resetBoardPreview(); }
+    }
 
     // Notification banner
     renderNotifs();
@@ -790,6 +871,18 @@ function bindCardEvents() {
             window._renderTagBar?.();
             renderBoard();
         });
+        seg.addEventListener('contextmenu', async e => {
+            e.preventDefault();
+            e.stopPropagation();
+            const tag = seg.dataset.tag;
+            const cardEl = seg.closest('[data-id]');
+            if (!cardEl) return;
+            const card = state.cards.find(c => c.id == cardEl.dataset.id);
+            if (!card) return;
+            const newBody = (card.body || '').replace(new RegExp('\\s*#' + tag.replace(/[.*+?^${}()|[\]\\\/]/g, '\\$&') + '(?=\\s|$)', 'm'), '');
+            await api(`api/cards/${card.id}`, { method: 'PATCH', body: { body: newBody } });
+            await window._reloadAll?.();
+        });
     });
 
     board.querySelectorAll('[data-id]').forEach(el => {
@@ -997,3 +1090,87 @@ async function handleCardDrop(e, el, targetId) {
         requestAnimationFrame(() => { card.style.transition = 'transform 0.25s ease'; card.style.transform = ''; });
     });
 }
+
+// ── Box select ──
+
+let boxEl = null;
+let boxStart = null;
+let boxActive = false;
+
+board.addEventListener('mousedown', e => {
+    // Only start on board background (not on cards or interactive elements)
+    if (e.button !== 0 || e.target !== board) return;
+    if (e.shiftKey) return;
+
+    const additive = e.ctrlKey || e.metaKey;
+    const priorSelection = additive ? new Set(selectedIds) : null;
+    boxStart = { x: e.clientX, y: e.clientY, scrollTop: board.scrollTop };
+    boxActive = false;
+
+    const onMove = ev => {
+        const dx = ev.clientX - boxStart.x;
+        const dy = ev.clientY - boxStart.y;
+        if (!boxActive && Math.abs(dx) < 5 && Math.abs(dy) < 5) return;
+
+        if (!boxActive) {
+            boxActive = true;
+            if (!additive) clearSelection();
+            boxEl = document.createElement('div');
+            boxEl.className = 'box-select';
+            board.appendChild(boxEl);
+        }
+
+        const boardRect = board.getBoundingClientRect();
+        const scrollDelta = board.scrollTop - boxStart.scrollTop;
+        const x1 = boxStart.x - boardRect.left;
+        const y1 = boxStart.y - boardRect.top + board.scrollTop;
+        const x2 = ev.clientX - boardRect.left;
+        const y2 = ev.clientY - boardRect.top + board.scrollTop;
+
+        const left = Math.min(x1, x2);
+        const top = Math.min(y1, y2);
+        const width = Math.abs(x2 - x1);
+        const height = Math.abs(y2 - y1);
+
+        boxEl.style.left = left + 'px';
+        boxEl.style.top = top + 'px';
+        boxEl.style.width = width + 'px';
+        boxEl.style.height = height + 'px';
+
+        // Check intersections
+        const selRect = { left, top, right: left + width, bottom: top + height };
+        board.querySelectorAll('[data-id]').forEach(card => {
+            const cr = card.getBoundingClientRect();
+            const cardRect = {
+                left: cr.left - boardRect.left,
+                top: cr.top - boardRect.top + board.scrollTop,
+                right: cr.right - boardRect.left,
+                bottom: cr.bottom - boardRect.top + board.scrollTop,
+            };
+            const intersects = !(cardRect.right < selRect.left || cardRect.left > selRect.right || cardRect.bottom < selRect.top || cardRect.top > selRect.bottom);
+            const id = card.dataset.id;
+            const wasPrior = priorSelection?.has(id);
+            if (additive) {
+                // Toggle: prior selected + hit by box → deselect; not prior + hit → select
+                const shouldBeSelected = intersects ? !wasPrior : !!wasPrior;
+                if (shouldBeSelected && !selectedIds.has(id)) toggleSelect(id);
+                else if (!shouldBeSelected && selectedIds.has(id)) toggleSelect(id);
+            } else {
+                if (intersects && !selectedIds.has(id)) toggleSelect(id);
+                else if (!intersects && selectedIds.has(id)) toggleSelect(id);
+            }
+        });
+    };
+
+    const onUp = () => {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        if (boxEl) { boxEl.remove(); boxEl = null; }
+        if (!boxActive && selectedIds.size) clearSelection();
+        boxStart = null;
+        boxActive = false;
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+});

public/js/modules/buckets.js

@@ -22,6 +22,7 @@ async function showBucketCtx(x, y, bucket) {
     const idx = state.buckets.findIndex(b => b.id == bucket.id);
     const canLeft = idx > 0;
     const canRight = idx < state.buckets.length - 1;
+    const hasCards = state.cards.some(c => c.bucket_id == bucket.id);
 
     ctxMenu.innerHTML = `<div class="py-1">
         <button class="ctx-item" data-baction="rename"><i class="ph ph-pencil-simple text-sm"></i><span class="font-pixel text-[10px]">rename</span></button>
@@ -30,8 +31,11 @@ async function showBucketCtx(x, y, bucket) {
         <button class="ctx-item ${!canLeft ? 'opacity-30 pointer-events-none' : ''}" data-baction="move-left"><i class="ph ph-arrow-left text-sm"></i><span class="font-pixel text-[10px]">move left</span></button>
         <button class="ctx-item ${!canRight ? 'opacity-30 pointer-events-none' : ''}" data-baction="move-right"><i class="ph ph-arrow-right text-sm"></i><span class="font-pixel text-[10px]">move right</span></button>
         <div style="height:1px;background:var(--t-border);margin:2px 0"></div>
-        <button class="ctx-item" data-baction="delete-keep"><i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">delete (keep cards)</span></button>
-        <button class="ctx-item danger" data-baction="delete-all"><i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">delete + cards</span></button>
+        ${hasCards
+            ? `<button class="ctx-item" data-baction="delete-keep"><i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">delete (keep cards)</span></button>
+               <button class="ctx-item danger" data-baction="delete-all"><i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">delete + cards</span></button>`
+            : `<button class="ctx-item danger" data-baction="delete-keep"><i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">delete</span></button>`
+        }
     </div>
     <div id="bctx-colors" class="hidden px-3 py-2 border-t border-t-border">
         <div class="flex flex-wrap gap-1.5">
@@ -70,8 +74,11 @@ async function showBucketCtx(x, y, bucket) {
         }
         else if (a === 'delete-keep') {
             hideBucketCtx();
-            const ok = await showDialog({ title: 'delete_bucket', message: `"${bucket.name}" loeschen? Karten bleiben erhalten.`, danger: true, okLabel: 'delete' });
-            if (!ok) return;
+            const cards = state.cards.filter(c => c.bucket_id == bucket.id);
+            if (cards.length > 0 || localStorage.getItem('hyprcrd-confirm-delete') !== '0') {
+                const ok = await showDialog({ title: 'delete_bucket', message: cards.length ? `"${bucket.name}" loeschen? ${cards.length} Karte(n) bleiben erhalten.` : `"${bucket.name}" loeschen?`, danger: true, okLabel: 'delete' });
+                if (!ok) return;
+            }
             if (state.activeBucket == bucket.id) state.activeBucket = 'all';
             await api(`api/buckets/${bucket.id}`, { method: 'DELETE' });
             await loadBuckets(); await window._reloadAll();

public/js/modules/caldav.js

@@ -32,8 +32,8 @@ const logEl = $('caldav-log');
 export function openCaldavSettings() {
     // 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'));
+    settingsOverlay?.querySelectorAll('.settings-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === 'caldav'));
+    settingsOverlay?.querySelectorAll('[id^="settings-panel-"]').forEach(p => p.classList.toggle('hidden', p.id !== 'settings-panel-caldav'));
     loadSettings();
 }
 
@@ -150,19 +150,6 @@ $('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');
@@ -175,18 +162,18 @@ export async function triggerSync() {
 
     if (btn) btn.style.opacity = '';
 
-    // Also sync WebDAV Notes
-    const notesRes = await fetch('api/notes/sync', {
+    // Also poll relay
+    const relayRes = await fetch('api/relay/poll', {
         method: 'POST', headers: { 'X-CSRF-Token': getCsrf() },
-    }).then(r => r.json()).catch(() => null);
+    }).then(r => r.ok ? r.json() : null).catch(() => null);
 
     if (res.ok) {
         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) };
-        const allLog = [...(res.log || []), ...(notesRes?.log || [])];
+        const rp = relayRes?.pulled || 0;
+        const total = { pushed: s.pushed || 0, pulled: (s.pulled || 0) + rp, deleted: s.deleted || 0 };
+        const allLog = res.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 : ''}`;
+        const msg = `pushed:${total.pushed} pulled:${total.pulled} del:${total.deleted}${rp ? ' relay:' + rp : ''}`;
         if (syncStatus) { syncStatus.textContent = msg; syncStatus.style.color = hasErrors ? 'var(--t-danger)' : 'var(--t-accent)'; }
         await window._reloadAll?.();
         showLog(allLog);
@@ -212,25 +199,38 @@ 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);
+// ── Relay settings ──
+
+$('relay-save')?.addEventListener('click', async () => {
+    const relayStatus = $('relay-status');
+    const body = { url: $('relay-url')?.value || '' };
+    const key = $('relay-key')?.value;
+    if (key) body.key = key;
+    await api('api/relay/settings', { method: 'POST', body });
+    if (relayStatus) { relayStatus.textContent = 'saved'; relayStatus.style.color = 'var(--t-accent)'; }
+});
+
+$('relay-test')?.addEventListener('click', async () => {
+    const relayStatus = $('relay-status');
+    if (relayStatus) { relayStatus.textContent = 'testing...'; relayStatus.style.color = 'var(--t-dim)'; }
+    const res = await fetch('api/relay/poll', { method: 'POST', headers: { 'X-CSRF-Token': getCsrf() } }).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`;
+        if (relayStatus) { relayStatus.textContent = `ok — ${res.pulled} pulled`; relayStatus.style.color = 'var(--t-accent)'; }
+        if (res.pulled) await window._reloadAll?.();
     } else {
-        if (syncStatus) { syncStatus.textContent = res?.error || 're-key failed'; syncStatus.style.color = 'var(--t-danger)'; }
+        if (relayStatus) { relayStatus.textContent = res?.error || 'failed'; relayStatus.style.color = 'var(--t-danger)'; }
     }
 });
+
+export async function loadRelaySettings() {
+    const s = await api('api/relay/settings');
+    if (!s) return;
+    const urlInput = $('relay-url');
+    const keyInput = $('relay-key');
+    if (urlInput) urlInput.value = s.url || '';
+    if (keyInput) keyInput.placeholder = s.has_key ? '(saved)' : 'shared secret';
+}
+
 $('cal-caldav-settings')?.addEventListener('click', openCaldavSettings);
 $('cal-sync')?.addEventListener('click', () => triggerSync());
 
@@ -265,13 +265,13 @@ async function backgroundSync() {
     bgSyncRunning = true;
     try {
         const headers = { 'X-CSRF-Token': getCsrf() };
-        const [res, notesRes] = await Promise.all([
+        const [res, relayRes] = 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),
+            fetch('api/relay/poll', { 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) };
+        const rp = relayRes?.pulled || 0;
+        const total = { pushed: s.pushed || 0, pulled: (s.pulled || 0) + rp, deleted: s.deleted || 0 };
         if (total.pulled > 0 || total.pushed > 0 || total.deleted > 0) {
             await window._reloadAll?.();
             showSyncNotification(total);

public/js/modules/context-menu.js

@@ -38,6 +38,7 @@ export function showContextMenu(x, y, card) {
         <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="push-relay"><i class="ph ph-broadcast text-sm"></i><span class="font-pixel text-[10px]">push to relay</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>
         <button class="ctx-item" data-action="color"><i class="ph ph-palette text-sm"></i><span class="font-pixel text-[10px]">color</span><i class="ph ph-caret-right text-xs ml-auto"></i></button>
@@ -205,6 +206,17 @@ export function showContextMenu(x, y, card) {
             await window._reloadAll();
         }
         else if (a === 'save-md') { hideContextMenu(); window.location.href = `api/export-md?ids=${card.id}`; }
+        else if (a === 'push-relay') {
+            hideContextMenu();
+            const res = await api(`api/relay/push`, { method: 'POST', body: { card_id: card.id } });
+            const msg = res?.ok ? 'pushed to relay' : (res?.error || 'push failed');
+            const color = res?.ok ? 'var(--t-accent)' : 'var(--t-danger)';
+            const n = document.createElement('div');
+            n.style.cssText = `position:fixed;bottom:60px;right:16px;z-index:200;background:var(--t-surface);border:1px solid ${color};border-radius:4px;padding:10px 14px;box-shadow:0 4px 20px rgba(0,0,0,0.4);`;
+            n.innerHTML = `<div style="font-family:var(--t-font-pixel);font-size:10px;color:${color};display:flex;align-items:center;gap:6px;"><i class="ph ph-broadcast"></i>${msg}</div>`;
+            document.body.appendChild(n);
+            setTimeout(() => { n.style.transition='opacity .3s'; n.style.opacity='0'; setTimeout(() => n.remove(), 350); }, 3000);
+        }
         else if (a === 'favorite') { hideContextMenu(); toggleFavorite(card.id); window._renderBoard(); }
         else if (a === 'color') toggle(colors);
         else if (a === 'bucket') toggle(buckets);

public/js/modules/gallery.js

@@ -73,8 +73,14 @@ export async function openGallery() {
         if (orphaned.length) {
             html += `<div class="col-span-full font-pixel text-[10px] text-t-danger flex items-center gap-1.5 pt-2"><i class="ph ph-warning text-xs"></i>orphaned (not used by any card)</div>`;
             html += orphaned.map(f => `
-                <div class="gallery-item group relative cursor-pointer" data-orphan="${f.name}">
-                    ${mediaTile(f.url, 'border-t-danger/30')}
+                <div class="gallery-item group cursor-pointer" data-orphan="${f.name}">
+                    <div class="relative aspect-square bg-t-bg border border-t-danger/30 rounded overflow-visible">
+                        <img src="${f.url}" class="w-full h-full object-cover opacity-60 rounded" loading="lazy">
+                        <div style="position:absolute;top:4px;right:4px;display:flex;gap:4px;" class="opacity-0 group-hover:opacity-100 transition-opacity">
+                            <button class="w-6 h-6 flex items-center justify-center bg-black/80 text-t-accent rounded border-0 cursor-pointer hover:bg-t-accent hover:text-t-bg transition-colors" data-new-orphan="${f.name}" title="new card"><i class="ph ph-plus text-sm"></i></button>
+                            <button class="w-6 h-6 flex items-center justify-center bg-black/80 text-t-danger rounded border-0 cursor-pointer hover:bg-t-danger hover:text-t-bg transition-colors" data-del-orphan="${f.name}" title="delete"><i class="ph ph-trash text-sm"></i></button>
+                        </div>
+                    </div>
                     <div class="mt-1 font-pixel text-[8px] text-t-dim truncate">${esc(f.name)}</div>
                 </div>`).join('');
         }
@@ -114,6 +120,31 @@ export async function openGallery() {
                 if (f && !isAudio(f.url)) openOrphanLightbox(f);
             });
         });
+
+        // Orphan: inline new card button
+        grid.querySelectorAll('[data-new-orphan]').forEach(btn => {
+            btn.addEventListener('click', e => {
+                e.stopPropagation();
+                const name = btn.dataset.newOrphan;
+                const label = name.replace(/\.[^.]+$/, '');
+                closeGallery();
+                window._openModal({ id: null, title: label, body: `![${label}](uploads/${name})`, color: '#38bdf8', bucket_id: null });
+            });
+        });
+
+        // Orphan: inline delete button
+        grid.querySelectorAll('[data-del-orphan]').forEach(btn => {
+            btn.addEventListener('click', async e => {
+                e.stopPropagation();
+                const name = btn.dataset.delOrphan;
+                if (localStorage.getItem('hyprcrd-confirm-delete') !== '0') {
+                    const ok = await showDialog({ title: 'delete_image', message: `"${name}" loeschen?`, danger: true, okLabel: 'delete' });
+                    if (!ok) return;
+                }
+                await fetch(`api/uploads/${name}`, { method: 'DELETE', headers: { 'X-CSRF-Token': getCsrf() } });
+                openGallery();
+            });
+        });
     }
 
     el.classList.add('open');

public/js/modules/theme.js

@@ -32,7 +32,8 @@ overlay?.querySelectorAll('.settings-tab').forEach(tab => {
         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 === 'caldav') { window._loadCaldavSettings?.(); }
+        if (panel === 'relay') { window._loadRelaySettings?.(); }
         if (panel === 'notifications') renderNotifSettings();
         if (panel === 'behavior') initBehaviorSettings();
     });
@@ -46,9 +47,37 @@ function updateStats() {
     const st = $('stats-tags'); if (st) st.textContent = tags.size;
 }
 
+// Vault key
+$('settings-vault-save')?.addEventListener('click', async () => {
+    const key = $('settings-vault-key')?.value;
+    const status = $('settings-vault-status');
+    if (!key || key.length < 8) { if (status) { status.textContent = 'min 8 characters'; status.style.color = 'var(--t-danger)'; } return; }
+    const res = await fetch('api/auth/vault-key', {
+        method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getCsrf() },
+        body: JSON.stringify({ key }),
+    }).then(r => r.json()).catch(() => ({ error: 'failed' }));
+    if (res.ok) {
+        if (status) { status.textContent = res.rekey ? 'saved — notes will re-encrypt on next sync' : 'saved'; status.style.color = 'var(--t-accent)'; }
+        $('settings-vault-key').value = '';
+        if (res.rekey) window._triggerSync?.();
+    } else {
+        if (status) { status.textContent = res.error || 'failed'; status.style.color = 'var(--t-danger)'; }
+    }
+});
+
+async function loadVaultStatus() {
+    const res = await api('api/auth/vault-key');
+    if (!res) return;
+    const status = $('settings-vault-status');
+    const input = $('settings-vault-key');
+    if (input) input.placeholder = res.has_key ? '(set — enter new to change)' : 'enter vault key';
+    if (status && res.has_key) { status.textContent = 'vault key is set'; status.style.color = 'var(--t-dim)'; }
+}
+
 $('settings-btn')?.addEventListener('click', () => {
     renderThemes();
     updateStats();
+    loadVaultStatus();
     overlay?.classList.add('open');
 });
 $('settings-close')?.addEventListener('click', () => overlay?.classList.remove('open'));