super-buckets, dnd insert cursor for cards + buckets, drag-state survives polls
Super-buckets: a bucket can act as a dropdown of nested children, 1-level deep, created by dragging one bucket onto the center of another. The parent shows up as a single tile in the bar with a stack icon and the active member's name; clicking opens a popover that lists parent + all children. Selecting an entry sets state.activeBucket. Implementation: * src/Database.php — ALTER TABLE buckets ADD COLUMN parent_id + index. * public/index.php — PATCH /api/buckets accepts parent_id with depth / cycle / collab guards. DELETE on a parent un-nests its children rather than cascade-deleting. The /api/import handler does a second pass to remap parent_id through the new bucket id map so backup + restore round-trips the hierarchy. * public/js/modules/buckets.js renderBar() — top-level buckets only; buckets with ≥1 child render as a `.bucket-super` tile with data-bucket-super=<parent.id> and data-super-shown=<active member>. Three drop zones per tile: left/right 25% → reorder via insert cursor, center 50% → nest (PATCH parent_id) with .bucket-nest-target outline. canNestInto() mirrors the backend rules client-side. openSuperDropdown() renders a popover under the tile with parent + children as real .bucket-tab[data-bucket=…] entries (so the collab plugin's MutationObserver still picks them up); appended inside #bucket-bar but `position:fixed` so the bar's overflow:auto can't clip it. showBucketCtx() now scopes move-left/right to siblings (top-level peers OR same parent_id) so the action works in both the bar and the dropdown. Drag-and-drop insertion cursor for cards (matches the bucket fix): * public/js/modules/board.js bindCardEvents() — single #card-drop-cursor element inside #board, repositioned by per-card dragover. Three zones (left/right 25% → cursor in gap, center 50% → card-drop-group highlight). dragleave does NOT hide the cursor (was flickering as the mouse moved between adjacent cards); only dragend clears it. handleCardDrop recomputes the drop zone from e.clientX since the cursor approach no longer tags the target with .card-drop-before / .card-drop-after. * "Vor der ersten Card" works automatically: the first card's left 25% positions the cursor at offsetLeft - 6, which sits inside #board's px-6 padding and stays visible. * public/css/style.css — old .card-drop-before::before / .card-drop-after::after pseudo-elements removed in favour of the #card-drop-cursor rule. Drag ghost survives background polls: * board.js draggingCardIds: Set<string> at module scope. dragstart fills it; dragend clears. renderBoard() re-applies the .card-dragging class to every member of the set after every render so caldav / collab polls calling _reloadAll mid-drag don't visually pop the source card back to its normal state. Tests (public/plugins/tests/super-buckets.test.js): * API parent_id: nest, un-nest, self-parent rejected, level-2 rejected (bucket with own children, target is itself a child), DELETE un-nests, export → import preserves parent_id. * Bar rendering: super-tile DOM markers, label = parent name when no child active, label = active child name when selected, popover opens with parent + children entries, click child sets activeBucket, click super-tile twice toggles popover closed, plain bucket stays plain. * Drop cursor element exists. * Both describe blocks reset state.activeBucket = 'all' in afterEach — the rendering tests set it to a child id and the leak was breaking downstream Card: Due Date & Done / Card: Grouping tests by filtering every newly-created card with bucket_id=null off the board. chore: bump version to 0.9.3 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.6 committed
1 parent
2059e50ce3
commit
08f73dfd19
8 files changed
+696
-51
No files matched your search
+242
-27
@@ -20,9 +20,16 @@ document.addEventListener('click', hideBucketCtx);
|
||||
|
||||
async function showBucketCtx(x, y, bucket) {
|
||||
ctxBucketId = bucket.id;
|
||||
const idx = state.buckets.findIndex(b => b.id == bucket.id);
|
||||
// Move-left / move-right operates within the bucket's siblings —
|
||||
// top-level peers if the bucket is top-level, dropdown peers if it's
|
||||
// a super-bucket child. This keeps reordering scoped to where the
|
||||
// user actually sees the bucket in the UI.
|
||||
const siblings = state.buckets
|
||||
.filter(b => (b.parent_id || null) === (bucket.parent_id || null))
|
||||
.sort((a, b) => (a.position || 0) - (b.position || 0));
|
||||
const idx = siblings.findIndex(b => b.id == bucket.id);
|
||||
const canLeft = idx > 0;
|
||||
const canRight = idx < state.buckets.length - 1;
|
||||
const canRight = idx >= 0 && idx < siblings.length - 1;
|
||||
const hasCards = state.cards.some(c => c.bucket_id == bucket.id);
|
||||
|
||||
const isCollab = !!bucket.collab_uid;
|
||||
@@ -98,11 +105,12 @@ async function showBucketCtx(x, y, bucket) {
|
||||
}
|
||||
else if (a === 'move-left' || a === 'move-right') {
|
||||
hideBucketCtx();
|
||||
const swapIdx = a === 'move-left' ? idx - 1 : idx + 1;
|
||||
const other = state.buckets[swapIdx];
|
||||
const other = siblings[a === 'move-left' ? idx - 1 : idx + 1];
|
||||
if (!other) return;
|
||||
await api(`api/buckets/${bucket.id}`, { method: 'PATCH', body: { position: swapIdx } });
|
||||
await api(`api/buckets/${other.id}`, { method: 'PATCH', body: { position: idx } });
|
||||
// Swap positions of two siblings — works for both top-level
|
||||
// and dropdown reordering since `siblings` is scoped above.
|
||||
await api(`api/buckets/${bucket.id}`, { method: 'PATCH', body: { position: other.position ?? 0 } });
|
||||
await api(`api/buckets/${other.id}`, { method: 'PATCH', body: { position: bucket.position ?? 0 } });
|
||||
await loadBuckets(); window._renderBoard();
|
||||
}
|
||||
else if (a === 'delete-keep') {
|
||||
@@ -222,13 +230,42 @@ function renderBar() {
|
||||
if (!bar) return;
|
||||
const tab = (active) => `bucket-tab ${active ? 'active' : ''} flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors shrink-0`;
|
||||
|
||||
// Top-level buckets only — children are rendered inside their parent's
|
||||
// dropdown popover, not directly in the bar.
|
||||
const topLevel = state.buckets.filter(b => !b.parent_id);
|
||||
const childrenOf = (parentId) => state.buckets
|
||||
.filter(b => b.parent_id == parentId)
|
||||
.sort((a, b) => (a.position || 0) - (b.position || 0));
|
||||
|
||||
// Resolve which child / parent to *show* on a super-bucket tile. The
|
||||
// active bucket wins; otherwise fall back to the parent itself.
|
||||
const tileFor = (parent) => {
|
||||
const kids = childrenOf(parent.id);
|
||||
if (!kids.length) return null; // not a super-bucket
|
||||
const activeChild = kids.find(c => c.id == state.activeBucket);
|
||||
if (activeChild) return activeChild;
|
||||
if (state.activeBucket == parent.id) return parent;
|
||||
return parent;
|
||||
};
|
||||
|
||||
bar.innerHTML = `
|
||||
<button class="${tab(state.activeBucket === 'all')}" data-bucket="all" title="all"><i class="ph ph-squares-four text-sm"></i></button>
|
||||
<button class="${tab(state.activeBucket === 'current')}" data-bucket="current" title="current"><i class="ph ph-lightning text-sm"></i></button>
|
||||
<button class="${tab(state.activeBucket === 'favorites')}" data-bucket="favorites" title="favorites"><i class="ph ph-star text-sm"></i></button>
|
||||
<button class="${tab(state.activeBucket === 'journal')}" data-bucket="journal" title="journal"><i class="ph ph-notebook text-sm"></i></button>
|
||||
<button class="${tab(state.activeBucket === 'none')}" data-bucket="none" title="unsorted"><i class="ph ph-tray text-sm"></i></button>
|
||||
${state.buckets.map(b => {
|
||||
${topLevel.map(b => {
|
||||
const kids = childrenOf(b.id);
|
||||
const isSuper = kids.length > 0;
|
||||
if (isSuper) {
|
||||
// Super-bucket tile: shows the active member's name + a stack icon.
|
||||
// The shown member's id goes on `data-super-shown` so we can
|
||||
// highlight + recolor without taking over the dropdown click.
|
||||
const shown = tileFor(b);
|
||||
const c = shown.color || '#64748b';
|
||||
const groupActive = state.activeBucket == b.id || kids.some(k => k.id == state.activeBucket);
|
||||
return `<button class="${tab(groupActive)} bucket-super" data-bucket-super="${b.id}" data-super-shown="${shown.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${groupActive ? `background:${c};color:var(--t-bg);border-color:${c}` : ''}"><i class="ph ph-stack text-sm"></i><span class="font-pixel text-[10px]">${esc(shown.name)}</span><i class="ph ph-caret-down text-[10px] ml-0.5 opacity-70"></i></button>`;
|
||||
}
|
||||
const c = b.color || '#64748b';
|
||||
const active = state.activeBucket == b.id;
|
||||
return `<button class="${tab(active)}" data-bucket="${b.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${active ? `background:${c};color:var(--t-bg);border-color:${c}` : ''}"><i class="ph ph-folder text-sm"></i><span class="font-pixel text-[10px]">${esc(b.name)}</span></button>`;
|
||||
@@ -239,11 +276,152 @@ function renderBar() {
|
||||
|
||||
let draggingBucketId = null;
|
||||
|
||||
bar.querySelectorAll('.bucket-tab').forEach(t => {
|
||||
const bid = t.dataset.bucket;
|
||||
const isUser = bid !== 'all' && bid !== 'none';
|
||||
// Single insertion-cursor element shared by all bucket tabs. Lives
|
||||
// inside #bucket-bar (which is `position: relative` so absolute
|
||||
// children align to its scroll-aware coord space) and gets repositioned
|
||||
// by the dragover handlers below. The cursor sits *between* tiles,
|
||||
// not as a border on the target tile, so it stays unambiguous when
|
||||
// we add the super-bucket nest gesture later.
|
||||
let dropCursor = bar.querySelector('#bucket-drop-cursor');
|
||||
if (!dropCursor) {
|
||||
dropCursor = document.createElement('div');
|
||||
dropCursor.id = 'bucket-drop-cursor';
|
||||
bar.appendChild(dropCursor);
|
||||
}
|
||||
function showDropCursor(targetTab, before) {
|
||||
// Position the cursor at the gap on the chosen side of the target.
|
||||
// offsetLeft / offsetWidth are relative to the offsetParent
|
||||
// (#bucket-bar) so they survive horizontal scroll.
|
||||
const x = before
|
||||
? targetTab.offsetLeft - 4
|
||||
: targetTab.offsetLeft + targetTab.offsetWidth + 1;
|
||||
dropCursor.style.left = x + 'px';
|
||||
dropCursor.style.display = 'block';
|
||||
}
|
||||
function hideDropCursor() {
|
||||
dropCursor.style.display = 'none';
|
||||
}
|
||||
|
||||
t.addEventListener('click', () => { state.activeBucket = bid; state.activeGroup = null; renderBar(); window._renderBoard(); });
|
||||
/** Can `draggedId` legally become a child of `targetId`?
|
||||
* Rules: 1-level deep only, no self-parenting, target must be a real
|
||||
* user bucket and currently top-level, dragged must not have children. */
|
||||
function canNestInto(draggedId, targetId) {
|
||||
if (!Number.isFinite(draggedId) || !Number.isFinite(targetId)) return false;
|
||||
if (draggedId === targetId) return false;
|
||||
const target = state.buckets.find(b => b.id === targetId);
|
||||
if (!target || target.parent_id) return false;
|
||||
const dragged = state.buckets.find(b => b.id === draggedId);
|
||||
if (!dragged) return false;
|
||||
// Already a child of the same target → no-op nest
|
||||
if (dragged.parent_id === targetId) return false;
|
||||
// Dragged has its own children → would create level-2
|
||||
if (state.buckets.some(b => b.parent_id === draggedId)) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
/** Open a popover under a super-bucket tile, listing parent + every
|
||||
* child. Each entry is a real `.bucket-tab[data-bucket=...]` element
|
||||
* so the collab plugin's MutationObserver still picks them up and
|
||||
* decorates them with the unread dot / users-three icon. */
|
||||
function openSuperDropdown(anchorTab, parentId) {
|
||||
// Toggle: if a popover is already open for this parent, close it.
|
||||
const existing = document.getElementById('bucket-super-popover');
|
||||
if (existing) {
|
||||
const wasFor = existing.dataset.parentId;
|
||||
existing.remove();
|
||||
if (wasFor === String(parentId)) return;
|
||||
}
|
||||
const parent = state.buckets.find(b => b.id === parentId);
|
||||
if (!parent) return;
|
||||
const kids = state.buckets
|
||||
.filter(b => b.parent_id === parentId)
|
||||
.sort((a, b) => (a.position || 0) - (b.position || 0));
|
||||
const members = [parent, ...kids];
|
||||
|
||||
const pop = document.createElement('div');
|
||||
pop.id = 'bucket-super-popover';
|
||||
pop.dataset.parentId = String(parentId);
|
||||
// Anchor under the tile, clamped to the viewport.
|
||||
const rect = anchorTab.getBoundingClientRect();
|
||||
pop.style.position = 'fixed';
|
||||
pop.style.top = (rect.bottom + 4) + 'px';
|
||||
pop.style.left = rect.left + 'px';
|
||||
|
||||
const renderEntry = (m) => {
|
||||
const c = m.color || '#64748b';
|
||||
const active = state.activeBucket == m.id;
|
||||
const isParent = m.id === parentId;
|
||||
return `<button class="bucket-tab ${active ? 'active' : ''} flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors w-full" data-bucket="${m.id}" draggable="true" data-bucket-drag="${m.id}" style="border-left:3px solid ${c};${active ? `background:${c};color:var(--t-bg);border-color:${c}` : ''}"><i class="ph ph-folder text-sm"></i><span class="font-pixel text-[10px] flex-1 text-left">${esc(m.name)}</span>${isParent ? '<i class="ph ph-house text-[10px] opacity-60" title="parent"></i>' : ''}</button>`;
|
||||
};
|
||||
pop.innerHTML = members.map(renderEntry).join('');
|
||||
// Append inside #bucket-bar (not document.body) so the collab
|
||||
// plugin's MutationObserver on #bucket-bar still picks up these
|
||||
// .bucket-tab entries and decorates collab children with the
|
||||
// unread dot + users-three icon. Position is `fixed` anyway so
|
||||
// the bar's overflow:auto can't clip the popover.
|
||||
bar.appendChild(pop);
|
||||
|
||||
// Wire each entry: click selects, contextmenu opens bucket ctx,
|
||||
// drag starts a re-parent / re-order operation against the bar.
|
||||
pop.querySelectorAll('.bucket-tab[data-bucket]').forEach(entry => {
|
||||
const ebid = entry.dataset.bucket;
|
||||
entry.addEventListener('click', () => {
|
||||
state.activeBucket = ebid;
|
||||
state.activeGroup = null;
|
||||
pop.remove();
|
||||
renderBar();
|
||||
window._renderBoard();
|
||||
});
|
||||
entry.addEventListener('contextmenu', e => {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
const bk = state.buckets.find(b => b.id == ebid);
|
||||
if (bk) showBucketCtx(e.clientX, e.clientY, bk);
|
||||
});
|
||||
entry.addEventListener('dragstart', e => {
|
||||
draggingBucketId = ebid;
|
||||
e.dataTransfer.setData('application/x-bucket', ebid);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
entry.style.opacity = '0.3';
|
||||
});
|
||||
entry.addEventListener('dragend', () => {
|
||||
entry.style.opacity = '';
|
||||
draggingBucketId = null;
|
||||
hideDropCursor();
|
||||
bar.querySelectorAll('.bucket-nest-target').forEach(x => x.classList.remove('bucket-nest-target'));
|
||||
});
|
||||
});
|
||||
|
||||
// Click outside the popover closes it.
|
||||
setTimeout(() => {
|
||||
const onDocClick = (e) => {
|
||||
if (!pop.contains(e.target) && !anchorTab.contains(e.target)) {
|
||||
pop.remove();
|
||||
document.removeEventListener('click', onDocClick);
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', onDocClick);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
bar.querySelectorAll('.bucket-tab').forEach(t => {
|
||||
// Super-bucket tile uses `data-bucket-super`; regular tiles use
|
||||
// `data-bucket`. The id we resolve here is the parent's id for a
|
||||
// super-tile (so drag/contextmenu/etc. operate on the parent).
|
||||
const isSuperTile = t.classList.contains('bucket-super');
|
||||
const bid = isSuperTile ? t.dataset.bucketSuper : t.dataset.bucket;
|
||||
const SPECIAL = ['all', 'current', 'favorites', 'journal', 'none'];
|
||||
const isUser = isSuperTile || !SPECIAL.includes(bid);
|
||||
|
||||
if (isSuperTile) {
|
||||
// Click opens the dropdown popover instead of activating the
|
||||
// parent directly. The dropdown lists parent + every child.
|
||||
t.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openSuperDropdown(t, parseInt(bid, 10));
|
||||
});
|
||||
} else {
|
||||
t.addEventListener('click', () => { state.activeBucket = bid; state.activeGroup = null; renderBar(); window._renderBoard(); });
|
||||
}
|
||||
|
||||
if (isUser) {
|
||||
t.addEventListener('contextmenu', e => {
|
||||
@@ -262,18 +440,31 @@ function renderBar() {
|
||||
t.addEventListener('dragend', () => {
|
||||
t.style.opacity = '';
|
||||
draggingBucketId = null;
|
||||
bar.querySelectorAll('.bucket-drop-left,.bucket-drop-right').forEach(x => x.classList.remove('bucket-drop-left', 'bucket-drop-right'));
|
||||
hideDropCursor();
|
||||
bar.querySelectorAll('.bucket-nest-target').forEach(x => x.classList.remove('bucket-nest-target'));
|
||||
});
|
||||
}
|
||||
|
||||
t.addEventListener('dragover', e => {
|
||||
e.preventDefault();
|
||||
if (draggingBucketId && isUser && draggingBucketId !== bid) {
|
||||
// Bucket reorder indicator
|
||||
// Three drop zones along the tile's width:
|
||||
// left 25% → insert before
|
||||
// right 25% → insert after
|
||||
// center 50% → nest into this bucket
|
||||
const rect = t.getBoundingClientRect();
|
||||
const left = e.clientX < rect.left + rect.width / 2;
|
||||
t.classList.toggle('bucket-drop-left', left);
|
||||
t.classList.toggle('bucket-drop-right', !left);
|
||||
const x = e.clientX - rect.left;
|
||||
const isLeft = x < rect.width * 0.25;
|
||||
const isRight = x > rect.width * 0.75;
|
||||
const isCenter = !isLeft && !isRight;
|
||||
if (isCenter && canNestInto(parseInt(draggingBucketId, 10), parseInt(bid, 10))) {
|
||||
hideDropCursor();
|
||||
bar.querySelectorAll('.bucket-nest-target').forEach(x => x.classList.remove('bucket-nest-target'));
|
||||
t.classList.add('bucket-nest-target');
|
||||
} else {
|
||||
bar.querySelectorAll('.bucket-nest-target').forEach(x => x.classList.remove('bucket-nest-target'));
|
||||
showDropCursor(t, isLeft);
|
||||
}
|
||||
t.classList.remove('drag-over');
|
||||
} else if (!draggingBucketId) {
|
||||
// Card drop on bucket
|
||||
@@ -281,23 +472,44 @@ function renderBar() {
|
||||
}
|
||||
});
|
||||
t.addEventListener('dragleave', () => {
|
||||
t.classList.remove('drag-over', 'bucket-drop-left', 'bucket-drop-right');
|
||||
t.classList.remove('drag-over');
|
||||
});
|
||||
t.addEventListener('drop', async e => {
|
||||
e.preventDefault();
|
||||
t.classList.remove('drag-over', 'bucket-drop-left', 'bucket-drop-right');
|
||||
t.classList.remove('drag-over', 'bucket-nest-target');
|
||||
hideDropCursor();
|
||||
|
||||
// Bucket reorder
|
||||
// Bucket reorder / nest
|
||||
const dragBid = e.dataTransfer.getData('application/x-bucket');
|
||||
if (dragBid && isUser && dragBid !== bid) {
|
||||
const rect = t.getBoundingClientRect();
|
||||
const before = e.clientX < rect.left + rect.width / 2;
|
||||
const ids = state.buckets.map(b => String(b.id)).filter(i => i !== dragBid);
|
||||
const targetIdx = ids.indexOf(String(bid));
|
||||
ids.splice(before ? targetIdx : targetIdx + 1, 0, dragBid);
|
||||
await Promise.all(ids.map((id, i) => api(`api/buckets/${id}`, { method: 'PATCH', body: { position: i } })));
|
||||
await loadBuckets();
|
||||
window._renderBoard();
|
||||
const x = e.clientX - rect.left;
|
||||
const isLeft = x < rect.width * 0.25;
|
||||
const isRight = x > rect.width * 0.75;
|
||||
const isCenter = !isLeft && !isRight;
|
||||
if (isCenter && canNestInto(parseInt(dragBid, 10), parseInt(bid, 10))) {
|
||||
// Nest: dragged becomes a child of target. Backend
|
||||
// refuses cycles / level-2 with a 400 — bubble that
|
||||
// up via alert so the user knows.
|
||||
const res = await api(`api/buckets/${dragBid}`, { method: 'PATCH', body: { parent_id: parseInt(bid, 10) } });
|
||||
if (res?.error) { alert(res.error); return; }
|
||||
await loadBuckets();
|
||||
renderBar();
|
||||
window._renderBoard();
|
||||
return;
|
||||
}
|
||||
// Reorder among top-level buckets only.
|
||||
const before = isLeft || (!isRight && x < rect.width / 2);
|
||||
const topIds = state.buckets.filter(b => !b.parent_id).map(b => String(b.id)).filter(i => i !== dragBid);
|
||||
const targetIdx = topIds.indexOf(String(bid));
|
||||
if (targetIdx >= 0) {
|
||||
topIds.splice(before ? targetIdx : targetIdx + 1, 0, dragBid);
|
||||
// The dragged bucket also gets un-nested if it was a child.
|
||||
await api(`api/buckets/${dragBid}`, { method: 'PATCH', body: { parent_id: null } });
|
||||
await Promise.all(topIds.map((id, i) => api(`api/buckets/${id}`, { method: 'PATCH', body: { position: i } })));
|
||||
await loadBuckets();
|
||||
window._renderBoard();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -314,7 +526,10 @@ function renderBar() {
|
||||
window._renderBoard();
|
||||
return;
|
||||
}
|
||||
const bucketId = bid === 'none' ? null : (['all','current','journal'].includes(bid) ? undefined : bid);
|
||||
// Card drop on a super-bucket: card goes into the *currently
|
||||
// shown* member of that group, not the parent itself.
|
||||
const targetBid = isSuperTile ? (t.dataset.superShown || bid) : bid;
|
||||
const bucketId = targetBid === 'none' ? null : (['all','current','journal'].includes(targetBid) ? undefined : targetBid);
|
||||
if (bucketId === undefined) return;
|
||||
await Promise.all(ids.map(id => api(`api/cards/${id}`, { method: 'PATCH', body: { bucket_id: bucketId, parent_id: null } })));
|
||||
window._clearSelection?.();
|
||||
|
||||
Reference in new issue
Block a user