bak

public/js/modules/board.js

@@ -57,6 +57,7 @@ export function renderBoard() {
     cards = sortedCards(cards);
     window._refreshTasks?.();
 
+    hideFan();
     renderGroupBar(cards);
 
     if (!cards.length) {
@@ -127,6 +128,60 @@ function renderGroupBar(cards) {
     }
 }
 
+// ── Group fan preview ──
+
+let fanEl = null;
+let fanTimer = null;
+let fanGroupId = null;
+
+function showFan(groupEl, parentId) {
+    hideFan();
+    const parent = state.cards.find(c => c.id == parentId);
+    if (!parent) return;
+    const children = getChildren(parentId);
+    const all = children;
+    const maxShow = 12;
+    const visible = all.slice(0, maxShow);
+    const hasMore = all.length > maxShow;
+
+    fanGroupId = parentId;
+    fanEl = document.createElement('div');
+    fanEl.className = 'group-fan';
+    const cols = Math.min(6, visible.length);
+    fanEl.innerHTML = `<div class="group-fan-grid ${hasMore ? 'has-more' : ''}" style="--fan-cols:${cols}">${visible.map(c => {
+        const img = firstImage(c.body);
+        return `<div class="group-fan-card" data-fan-id="${c.id}">
+            <div class="group-fan-bar" style="background:${c.color}"></div>
+            ${img ? `<div class="group-fan-thumb" style="background-image:url('${img}')"></div>` : ''}
+            <div class="group-fan-title font-pixel">${esc(c.title)}</div>
+        </div>`;
+    }).join('')}</div>`;
+
+    document.body.appendChild(fanEl);
+
+    // Position below the group card
+    const rect = groupEl.getBoundingClientRect();
+    const fanW = fanEl.offsetWidth;
+    let left = rect.left + rect.width / 2 - fanW / 2;
+    left = Math.max(8, Math.min(left, innerWidth - fanW - 8));
+    let top = rect.bottom + 6;
+    if (top + fanEl.offsetHeight > innerHeight - 40) top = rect.top - fanEl.offsetHeight - 6;
+    fanEl.style.left = left + 'px';
+    fanEl.style.top = top + 'px';
+
+    fanEl.querySelectorAll('[data-fan-id]').forEach(card => {
+        card.addEventListener('click', () => { hideFan(); window._openDetail(card.dataset.fanId); });
+    });
+
+    fanEl.addEventListener('mouseleave', hideFan);
+}
+
+function hideFan() {
+    if (fanTimer) { clearTimeout(fanTimer); fanTimer = null; }
+    if (fanEl) { fanEl.remove(); fanEl = null; }
+    fanGroupId = null;
+}
+
 // ── Card event binding ──
 
 function bindCardEvents() {
@@ -136,8 +191,26 @@ function bindCardEvents() {
 
     board.querySelectorAll('[data-id]').forEach(el => {
         const id = el.dataset.id;
+        const children = getChildren(id);
+        const isGroup = children.length > 0 && !state.activeGroup;
         let clickTimer = null;
 
+        // Group fan on long hover
+        if (isGroup) {
+            el.addEventListener('mouseenter', () => {
+                fanTimer = setTimeout(() => showFan(el, id), 800);
+            });
+            el.addEventListener('mouseleave', e => {
+                // Don't hide if moving to the fan itself
+                if (fanEl && fanEl.contains(e.relatedTarget)) return;
+                if (fanTimer) { clearTimeout(fanTimer); fanTimer = null; }
+                // Delay hiding to allow moving to fan
+                if (fanEl && fanGroupId == id) {
+                    setTimeout(() => { if (fanGroupId == id && fanEl && !fanEl.matches(':hover')) hideFan(); }, 200);
+                }
+            });
+        }
+
         el.addEventListener('click', () => {
             if (clickTimer) return;
             clickTimer = setTimeout(() => { clickTimer = null; window._openDetail(id); }, 200);