dist

public/js/modules/board.js

@@ -5,8 +5,17 @@ import { state, sortedCards, parseTags, tagChipHtml, getChildren, getRecent, get
 import { stripMd, getTodos, firstImage, leadingImage } from './markdown.js';
 import { pushReorder, pushCardEdit, pushBatch, snapshotCard } from './undo.js';
 import { getCalConfig } from './caldav.js';
+import { renderMd, addCodeCopyButtons } from './markdown.js';
 
 const board = $('board');
+const boardPreview = $('board-preview');
+const boardPreviewBody = $('board-preview-body');
+const boardPreviewTitle = $('board-preview-title');
+const boardPreviewColor = $('board-preview-color');
+const boardPreviewTags = $('board-preview-tags');
+const boardPreviewMeta = $('board-preview-meta');
+let boardSplitOpen = localStorage.getItem('hyprcrd-board-split') === '1';
+let boardPreviewCardId = null;
 let activeDragEl = null;
 let dragGhost = null;
 
@@ -91,6 +100,80 @@ export function updateSortUI() {
     if (icon) icon.className = `ph ${SORT_ICONS[state.sortMode]} text-xs`;
 }
 
+// ── Board split preview ──
+
+function showBoardPreview(cardId) {
+    const card = state.cards.find(c => c.id == cardId);
+    if (!card || !boardSplitOpen) return;
+    boardPreviewCardId = cardId;
+    $('board-preview-empty')?.classList.add('hidden');
+    $('board-preview-content')?.classList.remove('hidden');
+    if (boardPreviewColor) boardPreviewColor.style.background = card.color;
+    if (boardPreviewTitle) boardPreviewTitle.textContent = card.title;
+    if (boardPreviewBody) {
+        boardPreviewBody.innerHTML = renderMd(card.body);
+        addCodeCopyButtons(boardPreviewBody);
+    }
+    const tags = parseTags(card);
+    if (boardPreviewTags) {
+        if (tags.length) {
+            boardPreviewTags.classList.remove('hidden');
+            boardPreviewTags.innerHTML = tags.map(t => tagChipHtml(t)).join('');
+        } else {
+            boardPreviewTags.classList.add('hidden');
+        }
+    }
+    if (boardPreviewMeta) {
+        boardPreviewMeta.textContent = '> ' + (card.updated_at || card.created_at || '').substring(0, 10) + (card.bucket_name ? '  |  ' + card.bucket_name : '');
+    }
+    // Highlight active card
+    board.querySelectorAll('.board-card').forEach(el => el.classList.toggle('preview-active', el.dataset.id == cardId));
+}
+
+function closeBoardPreview() {
+    boardPreview?.classList.add('hidden');
+    boardSplitOpen = false;
+    localStorage.setItem('hyprcrd-board-split', '0');
+    const btn = $('board-split-toggle');
+    if (btn) btn.classList.remove('text-t-accent');
+    board.querySelectorAll('.board-card').forEach(el => el.classList.remove('preview-active'));
+    boardPreviewCardId = null;
+    resetBoardPreview();
+}
+
+function resetBoardPreview() {
+    $('board-preview-empty')?.classList.remove('hidden');
+    $('board-preview-content')?.classList.add('hidden');
+    if (boardPreviewTitle) boardPreviewTitle.textContent = '';
+    if (boardPreviewBody) boardPreviewBody.innerHTML = '';
+}
+
+function toggleBoardSplit() {
+    boardSplitOpen = !boardSplitOpen;
+    localStorage.setItem('hyprcrd-board-split', boardSplitOpen ? '1' : '0');
+    boardPreview?.classList.toggle('hidden', !boardSplitOpen);
+    const btn = $('board-split-toggle');
+    if (btn) btn.classList.toggle('text-t-accent', boardSplitOpen);
+    if (!boardSplitOpen) {
+        board.querySelectorAll('.board-card').forEach(el => el.classList.remove('preview-active'));
+        boardPreviewCardId = null;
+    }
+}
+
+$('board-split-toggle')?.addEventListener('click', toggleBoardSplit);
+$('board-preview-close')?.addEventListener('click', closeBoardPreview);
+$('board-preview-edit')?.addEventListener('click', () => {
+    const card = state.cards.find(c => c.id == boardPreviewCardId);
+    if (card) window._openModal(card);
+});
+
+// Init split state
+if (boardSplitOpen) {
+    boardPreview?.classList.remove('hidden');
+    const btn = $('board-split-toggle');
+    if (btn) btn.classList.add('text-t-accent');
+}
+
 $('superview-toggle')?.addEventListener('click', () => {
     state.superView = !state.superView;
     localStorage.setItem('hyprcrd-superview', state.superView ? '1' : '0');
@@ -276,7 +359,7 @@ export function renderBoard() {
         }
 
         board.querySelectorAll('.superview-item[data-id]').forEach(el => {
-            el.addEventListener('click', () => { clearHover(); window._openDetail(el.dataset.id); });
+            el.addEventListener('click', () => { clearHover(); if (boardSplitOpen) showBoardPreview(el.dataset.id); else window._openDetail(el.dataset.id); });
             el.addEventListener('dblclick', () => { clearHover(); const card = state.cards.find(c => c.id == el.dataset.id); if (card) window._openModal(card); });
             el.addEventListener('contextmenu', e => { e.preventDefault(); clearHover(); const card = state.cards.find(c => c.id == el.dataset.id); if (card) window._showContextMenu(e.clientX, e.clientY, card); });
 
@@ -485,7 +568,11 @@ function bindCardEvents() {
         el.addEventListener('click', (e) => {
             if (e.ctrlKey || e.metaKey) { e.preventDefault(); toggleSelect(id); return; }
             if (clickTimer) return;
-            clickTimer = setTimeout(() => { clickTimer = null; window._openDetail(id); }, 200);
+            clickTimer = setTimeout(() => {
+                clickTimer = null;
+                if (boardSplitOpen) { showBoardPreview(id); }
+                else { window._openDetail(id); }
+            }, 200);
         });
         el.addEventListener('dblclick', e => {
             e.preventDefault();