join: merge multi-selected cards into one (right-click + toolbar)

Right-click on a card that's part of a ≥2-card selection now offers
"Join N cards" at the top of the context menu, and the same action
sits next to "Group" in the bottom select-bar.

Title strategy:
* sequential ctrl-click selection → first selected wins
* bulk gesture (rubber-band) → longest title wins

The bulk vs sequential distinction is tracked via a new
`state.selectionWasBulk` flag set in board.js when the rubber-band
becomes active and cleared in clearSelection() and after a successful
join. ctrl-clicks alone don't touch it, so bulk + ctrl-click hybrid
selections stay bulk.

Body format: list of every original title as `## heading` lines, then
each card's body separated by `---`. The winner keeps its color, tags,
bucket, due_date, parent_id; only the body is rewritten. Losers are
deleted via DELETE /api/cards/{id}.

Undo: a single pushUndo entry restores the winner's original body and
recreates every loser via POST + due_date PATCH (since POST doesn't
take due_date). Ctrl+Z reverts the whole join.

Implementation:
* state.js: new selectionWasBulk boolean in state.
* board.js: rubber-band onMove sets state.selectionWasBulk = true on
  first activation; clearSelection clears it. New select-join click
  handler dynamic-imports joinSelectedCards from context-menu.js to
  keep the dependency lazy.
* context-menu.js: joinSelectedCards is now exported. Inserts
  data-action="join" into the menu when the right-clicked card is in
  a ≥2-card selection. Action handler dispatches to joinSelectedCards
  before falling through to the regular if-chain so it can early-return.
* index.php: new #select-join button in #select-bar with ph-arrows-merge
  icon, sits between Group and Bucket.

Tests (public/plugins/tests/card-join.test.js, registered in tests.js):
* visibility: shows for ≥2 selected with right-clicked card in the
  selection; hidden for solo selection; hidden when right-click target
  isn't selected.
* sequential winner: first ctrl-clicked card survives, others deleted.
* merged body lists every title at the top and contains every body.
* selection cleared after a successful join.
* bulk winner: longest title survives regardless of insertion order.
* undo: Ctrl+Z restores winner body + recreates losers.

undo.test.js race-fix:
* New waitForStateCard(id, predicate, timeout=2000) helper polls
  state.cards every 30ms until the in-memory state reflects the
  expected change. Replaces fragile fixed `sleep(300)` waits between
  chained user actions where the second action reads from state.cards
  before the first action's _reloadAll has landed.
* Multi-undo color test: between the two color changes, wait for
  state.cards to actually contain the pink color before doing the
  second rightClick. Without this the second action's contextmenu
  handler reads the stale card and pushes the wrong undo snapshot,
  collapsing both undo entries onto the original color.
* Due_date undo test: after PATCHing due_date directly via API, wait
  for state.cards to reflect it before opening the editor — the
  editor's snapshot for the undo entry reads from state.cards.find()
  and would otherwise capture due_date=null.

chore: bump version to 0.9.5

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/js/modules/board.js

@@ -66,6 +66,7 @@ function toggleSelect(id) {
 
 function clearSelection() {
     selectedIds.clear();
+    state.selectionWasBulk = false;
     board.querySelectorAll('.card-selected').forEach(el => {
         el.classList.remove('card-selected');
         el.querySelector('.card-select-check')?.remove();
@@ -117,6 +118,16 @@ $('select-group')?.addEventListener('click', async () => {
     await window._reloadAll();
 });
 
+$('select-join')?.addEventListener('click', async () => {
+    if (selectedIds.size < 2) return;
+    // Dynamic import keeps the board → context-menu edge lazy and avoids
+    // circular import surprises at module load time. joinSelectedCards
+    // reads state.selectedIds + state.selectionWasBulk and handles its
+    // own reload + selection clear.
+    const { joinSelectedCards } = await import('./context-menu.js');
+    await joinSelectedCards();
+});
+
 $('select-bucket')?.addEventListener('click', () => {
     if (!selectedIds.size) return;
     // Remove existing picker
@@ -1193,6 +1204,9 @@ board.addEventListener('mousedown', e => {
         if (!boxActive) {
             boxActive = true;
             if (!additive) clearSelection();
+            // Mark the selection as bulk so the join action knows to use
+            // the longest-title strategy instead of first-clicked.
+            state.selectionWasBulk = true;
             boxEl = document.createElement('div');
             boxEl.className = 'box-select';
             board.appendChild(boxEl);

public/js/modules/context-menu.js

@@ -3,7 +3,7 @@
 import { $, esc, api } from './util.js';
 import { state, parseTags, getChildren, isFavorite, toggleFavorite, CARD_COLORS } from './state.js';
 import { showDialog } from './dialog.js';
-import { pushCardEdit, pushCardDelete, pushBatch, snapshotCard } from './undo.js';
+import { pushCardEdit, pushCardDelete, pushBatch, pushUndo, snapshotCard } from './undo.js';
 import { stripMd } from './markdown.js';
 
 const menu = $('ctx-menu');
@@ -32,12 +32,89 @@ menu.addEventListener('mouseenter', () => {
 document.addEventListener('click', hideContextMenu);
 document.addEventListener('contextmenu', e => { if (!menu.contains(e.target)) hideContextMenu(); });
 
+/**
+ * Merge every currently-selected card into a single card. Title strategy:
+ * if the selection involved a bulk gesture (rubber-band) we use the
+ * longest title — there's no meaningful "first" in that case. Otherwise
+ * the first ctrl-clicked card wins (state.selectedIds is a Set, which
+ * preserves insertion order).
+ *
+ * Body format: list of all titles as `# heading` lines at the top, then
+ * each card's body separated by `---`. The winner keeps its color, tags,
+ * bucket, due_date, parent_id; the others are deleted.
+ *
+ * The whole operation is bundled into a single undo entry that recreates
+ * the deleted cards verbatim and restores the winner's original body.
+ */
+export async function joinSelectedCards() {
+    const ids = [...state.selectedIds].map(String);
+    const cards = ids
+        .map(id => state.cards.find(c => String(c.id) === id))
+        .filter(Boolean);
+    if (cards.length < 2) return;
+
+    // We need bodies for the merge. /api/cards GET excludes body for
+    // performance, so fetch the full rows for the selected ids in one shot.
+    const fullRes = await fetch(`api/cards?ids=${cards.map(c => c.id).join(',')}`).then(r => r.json());
+    const fullById = new Map(fullRes.map(c => [String(c.id), c]));
+    const full = cards.map(c => fullById.get(String(c.id)) || c);
+
+    // Pick winner
+    let winner;
+    if (state.selectionWasBulk) {
+        winner = full.reduce((a, b) => (b.title || '').length > (a.title || '').length ? b : a);
+    } else {
+        winner = full[0]; // first in Set iteration order = first selected
+    }
+    const losers = full.filter(c => c.id !== winner.id);
+
+    // Build merged body: title list, then bodies separated by `---`.
+    // Order: winner first (its body stays at the top after the title list),
+    // then losers in their selection order so the result is deterministic.
+    const ordered = [winner, ...losers];
+    const titleList = ordered.map(c => `## ${c.title || ''}`).join('\n');
+    const bodyChunks = ordered.map(c => (c.body || '').trim()).filter(Boolean);
+    const mergedBody = titleList + '\n\n---\n\n' + bodyChunks.join('\n\n---\n\n');
+
+    // Snapshot for undo BEFORE we mutate anything
+    const winnerPrev = { title: winner.title, body: winner.body || '' };
+    const loserSnapshots = losers.map(c => snapshotCard(c));
+
+    // Apply: PATCH winner with the merged body, DELETE losers.
+    pushUndo(`join ${ordered.length} cards`, async () => {
+        await api(`api/cards/${winner.id}`, { method: 'PATCH', body: winnerPrev });
+        for (const snap of loserSnapshots) {
+            const created = await api('api/cards', { method: 'POST', body: {
+                title: snap.title, body: snap.body, color: snap.color,
+                bucket_id: snap.bucket_id, parent_id: snap.parent_id, position: snap.position,
+            }});
+            if (created?.id && snap.due_date) {
+                await api(`api/cards/${created.id}`, { method: 'PATCH', body: { due_date: snap.due_date } });
+            }
+        }
+    });
+
+    await api(`api/cards/${winner.id}`, { method: 'PATCH', body: { body: mergedBody } });
+    for (const c of losers) {
+        await api(`api/cards/${c.id}`, { method: 'DELETE' });
+    }
+
+    state.selectedIds.clear();
+    state.selectionWasBulk = false;
+    await window._reloadAll();
+}
+
 export function showContextMenu(x, y, card) {
     const children = getChildren(card.id);
     const isParent = children.length > 0;
     const isChild = !!card.parent_id;
+    // Multi-select join: only offered when the right-clicked card is part
+    // of a selection of ≥2 cards. The action merges them into one.
+    const selected = state.selectedIds;
+    const inMultiSelect = selected.size >= 2 && selected.has(String(card.id));
 
     items.innerHTML = `
+        ${inMultiSelect ? `<button class="ctx-item" data-action="join"><i class="ph ph-arrows-merge text-sm"></i><span class="font-pixel text-[10px]">Join ${selected.size} cards</span></button><div class="ctx-sep"></div>` : ''}
         <button class="ctx-item" data-action="open"><i class="ph ph-eye text-sm"></i><span class="font-pixel text-[10px]">Open</span></button>
         <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>
@@ -176,6 +253,11 @@ export function showContextMenu(x, y, card) {
     items.querySelectorAll('[data-action]').forEach(btn => btn.addEventListener('click', async e => {
         e.stopPropagation();
         const a = btn.dataset.action;
+        if (a === 'join') {
+            hideContextMenu();
+            await joinSelectedCards();
+            return;
+        }
         if (a === 'open') { hideContextMenu(); window._openDetail(card.id); }
         else if (a === 'edit') { hideContextMenu(); window._openModal(card); }
         else if (a === 'duplicate') {

public/js/modules/state.js

@@ -23,6 +23,11 @@ export const state = {
 
     // Multi-select
     selectedIds: new Set(),
+    // True when at least one bulk gesture (rubber-band) participated in
+    // building the current selection. Used by the join/merge action to
+    // pick the title strategy: false → first selected wins, true →
+    // longest title wins (since "first" isn't meaningful for bulk).
+    selectionWasBulk: false,
 
     // Detail / editor
     editingId: null,