// Tree-aware list detail (v2) — the new lists rebuild.
//
// Renders a single root Node + its subtree recursively. Anything in the tree
// is one of three node types:
// • 'root' — the list itself (only at depth 0)
// • 'slot' — a categorical need ("5 trousers") or a sub-list header ("Sleep")
// • 'item' — a leaf carrying either a product_id or a custom blob
//
// A list owner can add items, slots, or sub-lists at any depth. Items under
// a slot have a `picked` toggle — when picked.count >= slot.quantityNeeded
// the slot is "fully picked". Voting is available at every node level so
// partners can agree (or disagree) per item AND per slot.
//
// Talks to window.MR.nodes for all persistence.
const { useState: _v2s, useEffect: _v2e, useRef: _v2r, useMemo: _v2m, useCallback: _v2cb } = React;
// Walks the DOM tree from `el` up to the body, returning true if any
// ancestor is an interactive element (button, link, input, etc.) or
// carries role="button". Used to suppress whole-card drag when the
// user mousedown'd on an inner control like Pick/Status/Vote/Delete.
// Tiny confetti burst — no libraries. Spawns N coloured divs at the cursor
// (or screen-centre fallback) and animates them down + out with a small
// gravity feel. Auto-cleans after 1.5s. Safe to call multiple times.
function fireConfetti(originX, originY) {
if (typeof document === 'undefined') return;
const cx = originX != null ? originX : window.innerWidth / 2;
const cy = originY != null ? originY : Math.min(window.innerHeight / 2, 280);
const COUNT = 36;
const colors = ['#cf5d4a', '#e0a94c', '#3f6b54', '#1c1a14', '#fffaf0', '#e07059', '#4a8265', '#8a6320'];
const wrap = document.createElement('div');
wrap.style.cssText = `position: fixed; inset: 0; pointer-events: none; z-index: 99998;`;
for (let i = 0; i < COUNT; i++) {
const piece = document.createElement('span');
const dx = (Math.random() - 0.5) * 360;
const dy = -120 - Math.random() * 240;
const rot = (Math.random() - 0.5) * 720;
const size = 6 + Math.random() * 6;
const color = colors[i % colors.length];
const dur = 1100 + Math.random() * 500;
piece.style.cssText = `
position: absolute;
left: ${cx}px;
top: ${cy}px;
width: ${size}px;
height: ${size * 0.6}px;
background: ${color};
border-radius: 1px;
transform: translate(-50%, -50%);
animation: mr-confetti-fly ${dur}ms cubic-bezier(.22,.7,.4,1) forwards;
--dx: ${dx}px;
--dy: ${dy}px;
--rot: ${rot}deg;
`;
wrap.appendChild(piece);
}
document.body.appendChild(wrap);
setTimeout(() => { try { wrap.remove(); } catch {} }, 1700);
}
// ──────────────────────────────────────────────────────────────────────
// Magical-moment helper. The point: when a user makes a decision, the
// app should *feel* like it noticed. fireConfetti() above is great for
// big milestones (100% complete, finished a shortlist) but too loud for
// every Pick toggle. This helper picks the right variant for the moment
// and animates around a focal element.
//
// Variants:
// • 'pick' — sparkle ring + small star burst (per-item)
// • 'decide' — confetti rain (shortlist fully decided)
// • 'milestone'— bigger confetti (50/75/100% list complete)
// • 'add' — quick pulse ring (item landed)
// ──────────────────────────────────────────────────────────────────────
function mrCelebrate(targetEl, opts = {}) {
if (typeof document === 'undefined') return;
const variant = (opts && opts.variant) || 'pick';
// Find a sensible origin from the target element.
let cx = window.innerWidth / 2;
let cy = Math.min(window.innerHeight / 2, 200);
if (targetEl && typeof targetEl.getBoundingClientRect === 'function') {
const r = targetEl.getBoundingClientRect();
cx = r.left + r.width / 2;
cy = r.top + r.height / 2;
}
// Respect motion preferences. We still want to confirm the action; a
// simple toast can stand in for the animation when the user has asked
// the system to reduce motion.
const reduceMotion = typeof window.matchMedia === 'function'
&& window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduceMotion) return;
if (variant === 'decide' || variant === 'milestone') {
fireConfetti(cx, cy);
return;
}
// 'pick' / 'add' — a sparkle burst + an expanding ring. Cheaper than
// confetti and feels per-element rather than per-page.
const wrap = document.createElement('div');
wrap.style.cssText = `position: fixed; left: ${cx}px; top: ${cy}px; width: 0; height: 0; pointer-events: none; z-index: 99999;`;
document.body.appendChild(wrap);
// Expanding ring.
const ring = document.createElement('span');
ring.style.cssText = `
position: absolute;
left: -28px; top: -28px;
width: 56px; height: 56px;
border-radius: 999px;
border: 2px solid #ffaf3a;
opacity: 0.9;
animation: mr-celeb-ring 600ms cubic-bezier(.2,.7,.4,1) forwards;
`;
wrap.appendChild(ring);
// Star sparkles.
const N = variant === 'add' ? 4 : 7;
const palette = ['#ffaf3a', '#ff7fa8', '#6ea4ff', '#5fc59a', '#ffd35a'];
const glyphs = ['✦', '✧', '★', '✺'];
for (let i = 0; i < N; i++) {
const angle = (i / N) * Math.PI * 2 + (Math.random() - 0.5) * 0.4;
const dist = 26 + Math.random() * 22;
const dx = Math.cos(angle) * dist;
const dy = Math.sin(angle) * dist - 6; // slight upward bias
const dur = 700 + Math.random() * 400;
const s = document.createElement('span');
s.textContent = glyphs[i % glyphs.length];
s.style.cssText = `
position: absolute;
left: 0; top: 0;
transform: translate(-50%, -50%);
color: ${palette[i % palette.length]};
font-size: ${12 + Math.random() * 6}px;
text-shadow: 0 0 6px ${palette[i % palette.length]}66;
animation: mr-celeb-spark ${dur}ms ease-out forwards;
--dx: ${dx}px;
--dy: ${dy}px;
`;
wrap.appendChild(s);
}
setTimeout(() => { try { wrap.remove(); } catch {} }, 1100);
}
// Expose globally so any component (not just NodeChildren) can fire
// celebrations without prop-drilling. Idempotent: assignment overwrites
// if the file hot-reloads, but the API surface is stable.
if (typeof window !== 'undefined') {
window.__mr_celebrate = mrCelebrate;
window.__mr_fireConfetti = fireConfetti;
}
// Inline form used by both the root toolbar and the slot mini-toolbar
// when the user picks "+ Placeholder". Captures a name + optional price
// for an item the user knows they need but hasn't found the product for
// yet. Submitting emits the spec; the parent wraps it in addItem with a
// `placeholder: true` flag in the custom blob.
function PlaceholderForm({ onSubmit, onCancel }) {
const [name, setName] = _v2s('');
const [price, setPrice] = _v2s('');
const submit = (e) => {
if (e) e.preventDefault();
const n = name.trim();
if (!n) return;
const p = price.trim() ? Number(price) : null;
onSubmit({ name: n, price: Number.isFinite(p) ? p : null });
setName(''); setPrice('');
};
return (
);
}
// PickOfToggle — the single control on every container that says either
// "Pick [N] of…" (when on) or "+ Pick one of…" (when off). Replaces the
// old kind-badge + Make-shortlist button combo. Toggling on flips the
// container from group → shortlist with N=1. The N is inline-editable
// once on, so changing "Pick 1 of" → "Pick 2 of" is a single tap.
function PickOfToggle({ isOn, count, onChange }) {
const [editing, setEditing] = _v2s(false);
const [draft, setDraft] = _v2s(String(count || 1));
_v2e(() => { setDraft(String(count || 1)); }, [count]);
const commit = () => {
const n = Math.max(1, Math.min(99, parseInt(draft, 10) || 1));
setEditing(false);
if (n !== (count || 1)) onChange({ slotKind: 'shortlist', quantityNeeded: n });
};
const toggle = (e) => {
e.stopPropagation();
console.log('[v2] PickOfToggle clicked, isOn=', isOn, 'editing=', editing);
if (editing) return;
if (isOn) {
onChange({ slotKind: 'group', quantityNeeded: 0 });
} else {
onChange({ slotKind: 'shortlist', quantityNeeded: 1 });
}
};
return (
);
}
function isInteractiveTarget(el) {
while (el && el !== document.body) {
if (!el.tagName) { el = el.parentElement; continue; }
const tag = el.tagName;
if (tag === 'BUTTON' || tag === 'A' || tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || tag === 'LABEL') return true;
const role = el.getAttribute && el.getAttribute('role');
if (role === 'button' || role === 'checkbox' || role === 'radio' || role === 'switch') return true;
el = el.parentElement;
}
return false;
}
// ───────────────────────── Page shell ─────────────────────────
function ListDetailV2({ rootId, productMap, onBack, onOpenProduct, onUpdateListContext, onNavigateAdd, onShare, myUserId, userLists, onSwitchList }) {
const [root, setRoot] = _v2s(null);
const [votes, setVotes] = _v2s([]);
const [comments, setComments] = _v2s([]);
const [names, setNames] = _v2s({}); // { userId: displayName }
const [claims, setClaims] = _v2s([]);
const [loading, setLoading] = _v2s(true);
const [err, setErr] = _v2s(null);
// 'list' (compact rows, fast scanning) vs 'grid' (big card thumbnails,
// browsy). Persists per session — lives in localStorage so the user's
// last pick sticks across navigations.
const [viewMode, setViewMode] = _v2s(() => {
try { return localStorage.getItem('mr-list2-view') || 'list'; } catch { return 'list'; }
});
// Grid-card size — applies only when viewMode === 'grid'. Four
// steps (sm / md / lg / xl) so the user can pick how visual the
// browse feels. Default 'md' matches the original 180→240px column
// that shipped before this setting existed.
const [gridSize, setGridSize] = _v2s(() => {
try { return localStorage.getItem('mr-list2-gridsize') || 'md'; } catch { return 'md'; }
});
// Activity drawer — toggled from the list header via a window event
// (mr-open-activity) so the header doesn't need to thread state down
// through props. Holds an array of activity rows fetched on open;
// refreshed whenever the drawer is opened so the user sees fresh
// partner activity.
const [activityOpen, setActivityOpen] = _v2s(false);
const [activity, setActivity] = _v2s([]);
const [activityLoading, setActivityLoading] = _v2s(false);
// Item the user clicked to inspect — the shared DetailPanel renders in
// App.jsx; we keep the id locally so buildListContext can re-publish a
// fresh payload whenever votes/comments/etc. change.
const [openItemId, setOpenItemId] = _v2s(null);
// Shortlist comparison modal — holds the slot id when open. Resolved
// to a node + its candidates at render time so it always reflects the
// latest tree (picks, votes, additions while the modal is open).
const [compareSlotId, setCompareSlotId] = _v2s(null);
// Placeholder replace modal — holds the placeholder item id when open.
// Resolved to a node at render time so edits applied through the modal
// (rename, repriced, replaced) reflect immediately.
const [placeholderItemId, setPlaceholderItemId] = _v2s(null);
// List-view controls — search/filter/sort applied to leaf items. These
// are page-local UI state (don't persist across reloads); resetting them
// is just a refresh away.
const [searchQ, setSearchQ] = _v2s('');
const [filterStatus, setFilterStatus] = _v2s(null); // null | 'want' | 'need' | 'have'
const [filterMust, setFilterMust] = _v2s(false);
const [filterMaxPrice, setFilterMaxPrice] = _v2s(null); // number or null
const [sortBy, setSortBy] = _v2s('manual'); // 'manual' | 'price-asc' | 'price-desc' | 'name' | 'newest'
// Auto-decide on consensus — when ON, any unpicked candidate in a
// shortlist that has 2+ up-votes (and no down-votes) is auto-picked.
// Each item carries an internal "user has un-picked this" flag in
// localStorage so the effect doesn't keep re-picking what the user
// explicitly opted out of. Defaults to ON for shared (partner) lists,
// OFF for private/registry.
const [autoDecide, setAutoDecideState] = _v2s(() => {
try {
const v = localStorage.getItem(`mr-autodecide-${rootId}`);
if (v === null) return null; // computed from root.kind below
return v === 'true';
} catch { return null; }
});
const effectiveAutoDecide = autoDecide == null
? (root && root.kind === 'partner') // default on for shared lists
: autoDecide;
const setAutoDecide = (v) => {
try { localStorage.setItem(`mr-autodecide-${rootId}`, String(v)); } catch {}
setAutoDecideState(v);
};
// Budget lives here (not in the dashboard) so the settings popover and
// the dashboard share a single source of truth. Initialised from
// localStorage; updates write through.
const [budget, setBudgetState] = _v2s(() => {
try {
const v = localStorage.getItem(`mr-budget-${rootId}`);
return v ? Number(v) : null;
} catch { return null; }
});
const setBudget = (v) => {
try {
if (v == null || v === '') localStorage.removeItem(`mr-budget-${rootId}`);
else localStorage.setItem(`mr-budget-${rootId}`, String(v));
} catch {}
setBudgetState(v == null || v === '' ? null : Number(v));
};
// Focus mode — once a shortlist has a picked candidate, the others are
// noise. Default ON. Per-list localStorage so the preference sticks per
// list (different lists have different patience for alternatives).
// Per-shortlist "expand me anyway" lives in slotExpandedAlts.
const [focusMode, setFocusModeState] = _v2s(() => {
try {
const v = localStorage.getItem(`mr-focus-${rootId}`);
return v === null ? true : v === 'true';
} catch { return true; }
});
const setFocusMode = (v) => {
try { localStorage.setItem(`mr-focus-${rootId}`, String(v)); } catch {}
setFocusModeState(v);
};
// Per-shortlist override map: { [slotId]: true } means "show alternatives
// anyway even though focus mode is on for the list".
const [slotExpandedAlts, setSlotExpandedAlts] = _v2s({});
const toggleSlotExpand = (slotId) => {
setSlotExpandedAlts(prev => ({ ...prev, [slotId]: !prev[slotId] }));
};
// Bulk selection. selectedIds is a Set; selectionMode lights up the
// checkboxes on item rows + shows the floating action bar at the bottom.
// Entering selection mode is implicit on first checkbox click.
const [selectedIds, setSelectedIds] = _v2s(() => new Set());
const selectionMode = selectedIds.size > 0;
// toggleSelected now accepts an optional explicit `force` argument:
// • undefined → pure toggle
// • true → select (idempotent — no-op if already selected)
// • false → deselect (idempotent — no-op if not selected)
// The checkbox's onClick passes `!isSelected` explicitly so two click
// handlers firing for the same DOM event (e.g. React's synthetic
// bubble racing the row's onClick) can't cancel each other out — the
// failure mode that previously left the checkbox un-clickable.
const toggleSelected = _v2cb((id, force) => {
setSelectedIds(prev => {
const isOn = prev.has(id);
const wantOn = force === undefined ? !isOn : !!force;
if (isOn === wantOn) return prev; // idempotent: no change
const next = new Set(prev);
if (wantOn) next.add(id); else next.delete(id);
return next;
});
}, []);
const clearSelection = _v2cb(() => setSelectedIds(new Set()), []);
// Bulk operations on the current selection.
const bulkSetStatus = async (status) => {
const ids = Array.from(selectedIds);
clearSelection();
await Promise.all(ids.map(id => window.MR.nodes.updateNode(id, { status })));
await refreshRoot();
};
const bulkDelete = async () => {
if (!window.confirm(`Delete ${selectedIds.size} item${selectedIds.size === 1 ? '' : 's'}? This can't be undone.`)) return;
const ids = Array.from(selectedIds);
clearSelection();
await Promise.all(ids.map(id => window.MR.nodes.deleteNode(id)));
await refreshRoot();
};
// Esc cancels selection mode.
_v2e(() => {
if (!selectionMode) return;
const onKey = (e) => { if (e.key === 'Escape') clearSelection(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [selectionMode]);
// ── Drag-and-drop (pointer-event based) ─────────────────────────────
// We rolled our own DnD instead of using HTML5 native drag because:
// - Chrome's native drag had a race where dragstart fired but the first
// dragover saw stale state and refused all drops.
// - The click/drag heuristic was unpredictable across browsers.
// Pointer events give us full, synchronous control. On mousedown of a
// drag handle we arm a drag; on mousemove we hit-test for drop targets;
// on mouseup we commit. Visual state (dragNodeId, dropTarget) is the
// same as before so all the existing styling keeps working.
const dragNodeIdRef = _v2r(null);
const [dragNodeIdState, setDragNodeIdState] = _v2s(null);
const setDragNodeId = (id) => {
dragNodeIdRef.current = id;
setDragNodeIdState(id);
};
const dragNodeId = dragNodeIdState;
const [dropTarget, setDropTarget] = _v2s(null);
// Floating drag ghost element appended to document.body during a drag.
const ghostRef = _v2r(null);
// Mutable drag-in-progress info — start coordinates, source element, etc.
// Lives in a ref so document-level mousemove handlers don't trigger React.
const dragInfoRef = _v2r(null);
// Start a custom drag on the drag-handle's pointerdown. nodeId is the
// dragged node's id; sourceEl is the visual element to clone as a ghost.
const startCustomDrag = (e, nodeId, sourceEl) => {
if (e.button !== undefined && e.button !== 0) return; // left mouse only
e.preventDefault();
e.stopPropagation();
const startX = e.clientX, startY = e.clientY;
dragInfoRef.current = {
nodeId,
sourceEl,
startX, startY,
armed: false, // turns true once mouse moves > THRESHOLD
lastTarget: null,
};
console.log('[v2] pointer drag arming for', nodeId);
document.addEventListener('mousemove', onDocMove);
document.addEventListener('mouseup', onDocUp);
document.addEventListener('keydown', onDocKey);
};
const THRESHOLD = 5;
const onDocMove = (e) => {
const info = dragInfoRef.current;
if (!info) return;
const dx = e.clientX - info.startX;
const dy = e.clientY - info.startY;
if (!info.armed) {
if (Math.hypot(dx, dy) < THRESHOLD) return;
info.armed = true;
setDragNodeId(info.nodeId);
// Build a small ghost pill — thumbnail + name — instead of cloning
// the whole card. The full card is enormous in grid view and looks
// awkward floating around the page.
try {
const src = info.sourceEl;
const img = src.querySelector('img');
const nameEl = src.querySelector('.list2-item-name, .list2-slot-title');
const brandEl = src.querySelector('.list2-item-brand');
const ghost = document.createElement('div');
ghost.style.cssText = `
position: fixed;
top: 0; left: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 8px;
max-width: 280px;
pointer-events: none;
opacity: 0.95;
transform: translate(${e.clientX + 8}px, ${e.clientY + 8}px) rotate(-1.5deg);
box-shadow: 0 18px 40px -12px rgba(20,16,8,0.5);
z-index: 99999;
border-radius: 999px;
background: #1c1a14;
color: #fffaf0;
font-family: var(--display, system-ui);
font-size: 13px;
letter-spacing: 0.01em;
transition: none;
white-space: nowrap;
overflow: hidden;
`;
if (img && img.src) {
const thumb = document.createElement('span');
thumb.style.cssText = `
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: #fffaf0 center/cover no-repeat url(${img.src});
display: inline-block;
`;
ghost.appendChild(thumb);
} else {
const dot = document.createElement('span');
dot.style.cssText = `
flex-shrink: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: #fffaf0;
margin-left: 6px;
`;
ghost.appendChild(dot);
}
const text = document.createElement('span');
text.style.cssText = 'overflow: hidden; text-overflow: ellipsis; min-width: 0;';
const brand = brandEl ? brandEl.textContent.trim() : '';
const name = nameEl ? nameEl.textContent.trim() : 'Item';
text.textContent = brand ? `${brand} · ${name}` : name;
ghost.appendChild(text);
document.body.appendChild(ghost);
ghostRef.current = ghost;
} catch (err) { console.warn('[v2] ghost failed', err); }
document.body.style.userSelect = 'none';
console.log('[v2] pointer drag started');
}
// Move ghost (offset so it sits below-right of the cursor, not under it)
if (ghostRef.current) {
ghostRef.current.style.transform = `translate(${e.clientX + 8}px, ${e.clientY + 8}px) rotate(-1.5deg)`;
}
// Hit-test for a drop target. Walk up from elementFromPoint looking
// for [data-drop-target] markers we render on items and slots.
if (ghostRef.current) ghostRef.current.style.display = 'none';
const under = document.elementFromPoint(e.clientX, e.clientY);
if (ghostRef.current) ghostRef.current.style.display = '';
const target = findDropTargetFromEl(under, info.nodeId, e.clientY);
if (target) {
// Only update React state when the target changes — avoids
// re-rendering on every pixel of motion.
if (!info.lastTarget || info.lastTarget.parentId !== target.parentId || info.lastTarget.position !== target.position) {
info.lastTarget = target;
setDropTarget(target);
}
} else if (info.lastTarget) {
info.lastTarget = null;
setDropTarget(null);
}
};
// Walk up the DOM from `el` finding the closest data-drop-target marker.
// Returns { parentId, position } or null. Position is computed from
// cursor Y relative to the target item; for slots, position = null
// (append at end). Skips the dragged node itself + its descendants
// (cycle protection).
const findDropTargetFromEl = (el, srcId, cursorY) => {
let cur = el;
// Track whether we've encountered the list-page root while walking
// up the tree. If we have, AND we didn't hit any drop-item or
// drop-slot before reaching it, that means the user is dragging
// over the page background — surface root as the drop target so
// an item nested in a group can be pulled OUT to top-level just
// by dragging into the empty space.
let rootHit = null;
while (cur && cur !== document.body) {
// Item target — drop relative to it
if (cur.dataset && cur.dataset.dropItem) {
const itemId = cur.dataset.dropItem;
const parentId = cur.dataset.dropParent;
const idx = parseInt(cur.dataset.dropIndex || '0', 10);
if (itemId === srcId) return null; // dropping on self
if (isInSubtree(srcId, itemId)) return null;
if (parentId === srcId) return null; // dropping into your own children
const rect = cur.getBoundingClientRect();
const insertAt = cursorY < rect.top + rect.height / 2 ? idx : idx + 1;
return { parentId, position: insertAt };
}
// Slot target — drop into this slot (append)
if (cur.dataset && cur.dataset.dropSlot) {
const slotId = cur.dataset.dropSlot;
if (slotId === srcId) return null;
if (isInSubtree(srcId, slotId)) return null;
return { parentId: slotId, position: null };
}
// Root container — remember it but keep walking in case the
// cursor IS over an item/slot deeper in the tree (rare, but
// possible with overflow or positioning).
if (cur.dataset && cur.dataset.dropRoot && !rootHit) {
rootHit = cur.dataset.dropRoot;
}
cur = cur.parentElement;
}
// Fallback: cursor is over the list page background. Drop at root,
// appended at the end. This is what enables "drag out of a group
// to send back to top-level". Without this, dropping in empty
// space was a silent no-op and the user couldn't escape a group
// by dragging.
if (rootHit && rootHit !== srcId && !isInSubtree(srcId, rootHit)) {
return { parentId: rootHit, position: null };
}
return null;
};
const onDocUp = (e) => {
const info = dragInfoRef.current;
document.removeEventListener('mousemove', onDocMove);
document.removeEventListener('mouseup', onDocUp);
document.removeEventListener('keydown', onDocKey);
document.body.style.userSelect = '';
if (ghostRef.current && ghostRef.current.parentNode) {
ghostRef.current.parentNode.removeChild(ghostRef.current);
}
ghostRef.current = null;
if (!info) return;
if (info.armed && info.lastTarget) {
console.log('[v2] pointer drop on', info.lastTarget, 'src=', info.nodeId);
moveNodeToParent(info.nodeId, info.lastTarget.parentId, info.lastTarget.position);
} else {
console.log('[v2] pointer drag ended, no target');
}
// Suppress the click that fires right after a real drag — without this,
// dropping over the source row would re-trigger openItem and pop the
// detail panel. Window-level flag so ItemNode's onClick can check it.
if (info.armed) {
window.__mr_dragEndedAt = Date.now();
}
dragInfoRef.current = null;
setDragNodeId(null);
setDropTarget(null);
};
const onDocKey = (e) => {
if (e.key === 'Escape' && dragInfoRef.current) {
console.log('[v2] pointer drag cancelled by Escape');
document.removeEventListener('mousemove', onDocMove);
document.removeEventListener('mouseup', onDocUp);
document.removeEventListener('keydown', onDocKey);
document.body.style.userSelect = '';
if (ghostRef.current && ghostRef.current.parentNode) {
ghostRef.current.parentNode.removeChild(ghostRef.current);
}
ghostRef.current = null;
dragInfoRef.current = null;
setDragNodeId(null);
setDropTarget(null);
}
};
const setViewModePersisted = (mode) => {
setViewMode(mode);
try { localStorage.setItem('mr-list2-view', mode); } catch {}
};
const setGridSizePersisted = (size) => {
setGridSize(size);
try { localStorage.setItem('mr-list2-gridsize', size); } catch {}
};
// Re-fetch the entire subtree + votes + registry claims. Claims only matter
// when the root is a registry but we fetch unconditionally for simplicity;
// RLS will return [] for non-registry roots without share_token.
//
// Auth-aware: on hard refresh the Supabase session takes a tick to rehydrate
// from storage. If we fetch before that, fetchMyRoots returns
// { ok: false, reason: 'signed-out' }, even though the user *is* signed in.
// We keep the loading state set and let the parent retry once myUserId
// arrives (see the useEffect on [rootId, myUserId] below).
const refreshRoot = _v2cb(async () => {
if (!rootId) return;
const claimsFetch = window.MR.supabase
? window.MR.supabase
.from('registry_claims')
.select('node_id, buyer_name, note')
.eq('root_id', rootId)
.then(r => ({ ok: !r.error, claims: r.data || [] }))
: Promise.resolve({ ok: true, claims: [] });
const [rootsRes, votesRes, claimsRes, commentsRes] = await Promise.all([
window.MR.nodes.fetchMyRoots(),
window.MR.nodes.fetchVotesForRoot(rootId),
claimsFetch,
window.MR.nodes.fetchCommentsForRoot(rootId),
]);
if (!rootsRes.ok) {
// Signed-out at the API layer usually means the session hasn't
// rehydrated yet on hard refresh. Stay in loading state — when
// myUserId becomes truthy the effect will re-run.
if (rootsRes.reason === 'signed-out') {
console.log('[v2] refreshRoot — session not ready yet, will retry');
return;
}
setErr(rootsRes.reason || 'Could not load list');
setLoading(false);
return;
}
const found = rootsRes.roots.find(r => r.id === rootId);
if (!found) {
setErr('That list could not be found.');
setLoading(false);
return;
}
setRoot(found);
const v = votesRes.ok ? (votesRes.votes || []) : [];
const c = commentsRes.ok ? (commentsRes.comments || []) : [];
setVotes(v);
setComments(c);
setClaims(claimsRes.ok ? (claimsRes.claims || []) : []);
// Resolve display names for every voter + commenter on this list.
const allIds = Array.from(new Set([
...v.map(x => x.voter_id),
...c.map(x => x.author_id),
found.ownerId,
].filter(Boolean)));
if (allIds.length > 0) {
const nameMap = await window.MR.nodes.resolveDisplayNames(allIds);
setNames(nameMap);
}
setLoading(false);
}, [rootId]);
// Helper: pretty-name a user id. "You" for the current user; the
// resolved display name otherwise; "someone" as a safe fallback.
const nameFor = (uid) => {
if (uid === myUserId) return 'You';
return names[uid] || 'someone';
};
// ── Drag-and-drop helpers ───────────────────────────────────────────────
// Find any node in the tree by id. We use this to look up the new parent's
// children when computing append positions, and to traverse a candidate
// subtree to make sure we're not creating a cycle.
const findNode = _v2cb((id) => {
const walk = (n) => {
if (!n) return null;
if (n.id === id) return n;
for (const c of (n.children || [])) {
const r = walk(c);
if (r) return r;
}
return null;
};
return walk(root);
}, [root]);
// True if `candidateId` is anywhere within the subtree rooted at `ancestorId`.
// Blocks dragging a section into one of its own descendants (infinite loop).
const isInSubtree = _v2cb((ancestorId, candidateId) => {
const ancestor = findNode(ancestorId);
if (!ancestor) return false;
const walk = (n) => {
if (n.id === candidateId) return true;
return (n.children || []).some(walk);
};
return walk(ancestor);
}, [findNode]);
// Move a node to a new parent at a target index. `targetIndex` is the
// index it should occupy after insert (0-based). Reorders siblings and
// sends a renumbered batch of position updates so the canonical ordering
// stays clean. Optimistic local update first, server reconcile on error.
const moveNodeToParent = async (nodeId, newParentId, targetIndex) => {
console.log('[v2] moveNodeToParent', { nodeId, newParentId, targetIndex });
if (!nodeId || !newParentId) { console.warn('[v2] move aborted — missing ids'); return; }
if (nodeId === newParentId) { console.warn('[v2] move aborted — self target'); return; }
if (isInSubtree(nodeId, newParentId)) { console.warn('[v2] move aborted — cycle'); return; }
// Compute the new ordered children for the destination parent, in
// memory, then snapshot the resulting positions to persist.
let renumberedNewParent = null;
let renumberedOldParent = null;
let newPositionForNode = null;
// Run the local mutation in a view-transition for FLIP-style smoothness
// when supported. Falls back to a plain setState in unsupported browsers.
const applyLocal = () => {
setRoot(prev => {
if (!prev) return prev;
const clone = JSON.parse(JSON.stringify(prev));
const findById = (n) => {
if (n.id === nodeId) return { node: n, parent: null };
for (const c of (n.children || [])) {
if (c.id === nodeId) return { node: c, parent: n };
const r = findById(c);
if (r) return r;
}
return null;
};
const findParent = (n, pid) => {
if (n.id === pid) return n;
for (const c of (n.children || [])) {
const r = findParent(c, pid);
if (r) return r;
}
return null;
};
const found = findById(clone);
if (!found || !found.parent) return prev;
// 1. Pull out of old parent
const oldParent = found.parent;
oldParent.children = (oldParent.children || []).filter(c => c.id !== nodeId);
// 2. Insert at targetIndex in new parent (or append)
const newParent = findParent(clone, newParentId);
if (!newParent) return prev;
found.node.parentId = newParentId;
newParent.children = newParent.children || [];
const insertAt = (targetIndex == null) ? newParent.children.length : Math.max(0, Math.min(newParent.children.length, targetIndex));
newParent.children.splice(insertAt, 0, found.node);
// 3. Renumber positions on both parents
newParent.children.forEach((c, i) => { c.position = i; });
oldParent.children.forEach((c, i) => { c.position = i; });
renumberedNewParent = newParent.children.slice();
renumberedOldParent = oldParent.id === newParent.id ? null : oldParent.children.slice();
newPositionForNode = insertAt;
return clone;
});
};
if (typeof document !== 'undefined' && document.startViewTransition) {
try { document.startViewTransition(() => applyLocal()); } catch { applyLocal(); }
} else {
applyLocal();
}
// Persist — move the node + renumber siblings on both parents.
// We batch the renumber to keep the server consistent with the client.
const mvRes = await window.MR.nodes.moveNode(nodeId, {
parentId: newParentId,
position: newPositionForNode || 0,
});
console.log('[v2] moveNode result', mvRes);
if (!mvRes.ok) {
console.error('[v2] moveNode failed, reverting', mvRes);
await refreshRoot();
return;
}
// Fire off the sibling renumbers in parallel; these are non-critical
// (the user can still drop again on a stale order) so we ignore errors.
const pendingUpdates = [];
(renumberedNewParent || []).forEach((c) => {
if (c.id !== nodeId) { // already updated above
pendingUpdates.push(window.MR.nodes.updateNode(c.id, { position: c.position }));
}
});
(renumberedOldParent || []).forEach((c) => {
pendingUpdates.push(window.MR.nodes.updateNode(c.id, { position: c.position }));
});
await Promise.all(pendingUpdates).catch(() => {});
};
// Comment handlers
const addComment = async (nodeId, body) => {
const res = await window.MR.nodes.addComment({ nodeId, rootId, body });
if (res.ok) {
setComments(prev => [...prev, res.comment]);
}
return res;
};
const deleteComment = async (commentId) => {
const res = await window.MR.nodes.deleteComment(commentId);
if (res.ok) {
setComments(prev => prev.filter(c => c.id !== commentId));
}
return res;
};
// Vote handler — toggles: tapping the same vote you already cast clears
// it; otherwise sets to the requested direction.
const voteOnNode = async (nodeId, dir) => {
const existing = votes.find(v => v.node_id === nodeId && v.voter_id === myUserId);
const next = existing && existing.vote === dir ? null : dir;
// Optimistic update
setVotes(prev => {
const filtered = prev.filter(v => !(v.node_id === nodeId && v.voter_id === myUserId));
return next ? [...filtered, { node_id: nodeId, voter_id: myUserId, vote: next }] : filtered;
});
await window.MR.nodes.voteNode(nodeId, next);
// Activity log — partner can see "Sarah voted 👍 on Cybex Cloud Q".
// We log only the affirmative direction (vote cast) — not the un-vote
// (next === null) — to keep the timeline focused on decisions.
if (next && window.MR && window.MR.lists && window.MR.lists.logActivity && root) {
try {
const findIt = (n) => {
if (n.id === nodeId) return n;
for (const c of (n.children || [])) {
const r = findIt(c); if (r) return r;
}
return null;
};
const node = findIt(root);
const itemName = (() => {
if (!node) return null;
if (node.productId) {
const p = (window.PRODUCTS || []).find(x => x.id === node.productId);
return (p && p.name) || node.name || null;
}
return (node.custom && node.custom.name) || node.name || null;
})();
const itemImage = (() => {
if (!node) return null;
if (node.productId) {
const p = (window.PRODUCTS || []).find(x => x.id === node.productId);
return (p && p.img) || null;
}
return (node.custom && node.custom.image) || null;
})();
window.MR.lists.logActivity(root.id, 'voted', {
itemId: nodeId,
meta: { vote: next, item_name: itemName, image_url: itemImage },
});
} catch {}
}
};
// Re-run on rootId OR myUserId change. On hard refresh, myUserId is null
// for a tick while Supabase rehydrates the session — when it lands, this
// effect re-fires and refreshRoot completes successfully. Without the
// myUserId dep, we'd be stuck on the "Hmm — we can't open this list"
// screen with a "signed-out" reason despite being signed in.
_v2e(() => { refreshRoot(); }, [refreshRoot, myUserId]);
// Auto-decide effect — walks the tree, finds unpicked candidates inside
// shortlists that have 2+ up-votes and no down-votes, and auto-picks them.
// Once auto-picked, sets a per-item flag so the user can manually unpick
// without the effect re-picking on the next vote/comment update. Only
// runs when effectiveAutoDecide is true.
const AUTO_PICK_THRESHOLD = 2;
_v2e(() => {
if (!effectiveAutoDecide || !root) return;
const toPick = [];
const walk = (n) => {
(n.children || []).forEach(c => {
if (c.type === 'slot' && c.slotKind === 'shortlist') {
const cands = (c.children || []).filter(k => k.type === 'item');
cands.forEach(k => {
if (k.picked) return;
try {
if (localStorage.getItem(`mr-autopick-skip-${k.id}`) === 'true') return;
} catch {}
const ks = (votes || []).filter(v => v.node_id === k.id);
const ups = ks.filter(v => v.vote === 'up').length;
const downs = ks.filter(v => v.vote === 'down').length;
if (ups >= AUTO_PICK_THRESHOLD && downs === 0) {
toPick.push(k.id);
}
});
} else {
walk(c);
}
});
};
walk(root);
if (toPick.length === 0) return;
// Mark them auto-picked locally so we don't fire again, then push to
// server. Each call also runs the auto status bump (want→need) via
// updateNode.
toPick.forEach(id => {
try { localStorage.setItem(`mr-autopick-fired-${id}`, '1'); } catch {}
updateNode(id, { picked: true });
});
}, [root, votes, effectiveAutoDecide]);
// Whenever a user manually unpicks something the auto-decide effect
// would otherwise re-pick, set a "skip" flag so this item is exempt
// from auto-decide in the future. We hook the togglePicked path via
// the same updateNode helper. Look for explicit picked:false transitions
// on a node that was auto-picked previously.
// (Done inline in updateNode via a localStorage check below.)
// Expose refreshRoot on window so deeply-nested helpers (budget swap
// CTAs, etc.) can poke a re-fetch without re-threading the callback.
_v2e(() => {
window.__mr_refreshRoot = () => refreshRoot();
return () => { if (window.__mr_refreshRoot && window.__mr_refreshRoot.toString().includes('refreshRoot')) delete window.__mr_refreshRoot; };
}, [refreshRoot]);
// Scroll-to-item from QuickAdd. When the user saves an item via the
// paste-link / bookmarklet flow, page-add.jsx writes a sessionStorage
// signal and navigates to this list. We pick up the signal here, find
// the newly-added item's row, scroll it into view, and flash it.
//
// Retries aggressively (up to 10 seconds) because:
// - Data fetch can take several seconds on a slow connection
// - The tree-render after refreshRoot can lag a frame or two
// - The new item might land in a sub-group that doesn't render
// until its parent slot's contents are hydrated
// We only remove the sessionStorage signal AFTER a successful match,
// so even if the first run can't find the row, later re-renders of
// this effect (e.g. when root updates from refreshRoot) get another
// chance with the signal still intact.
_v2e(() => {
if (!rootId) return;
let signal;
try {
const raw = sessionStorage.getItem('mr-scroll-to-item');
signal = raw ? JSON.parse(raw) : null;
} catch { signal = null; }
if (!signal || signal.listId !== rootId || !signal.itemId) return;
// Soft staleness — ignore signals older than 60s (probably left
// over from a previous session that never completed the scroll).
if (signal.ts && Date.now() - signal.ts > 60000) {
try { sessionStorage.removeItem('mr-scroll-to-item'); } catch {}
return;
}
let tries = 0;
let cancelled = false;
const MAX_TRIES = 40; // 10s total at 250ms intervals
const tick = () => {
if (cancelled) return;
// data-drop-item is set on every item row; data-node-id is a
// fallback in case the row's drag-drop wiring isn't applied
// (e.g. inside a special slot variant).
const el =
document.querySelector(`[data-drop-item="${signal.itemId}"]`)
|| document.querySelector(`[data-node-id="${signal.itemId}"]`);
if (el) {
// `block: center` keeps the row out from under the sticky header.
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
el.classList.add('list2-item--justadded');
setTimeout(() => {
if (el && el.classList) el.classList.remove('list2-item--justadded');
}, 2600);
// Only burn the signal on successful match — slow data loads
// get to keep retrying through subsequent effect re-runs.
try { sessionStorage.removeItem('mr-scroll-to-item'); } catch {}
return;
}
if (tries++ < MAX_TRIES) setTimeout(tick, 250);
};
setTimeout(tick, 120);
return () => { cancelled = true; };
}, [rootId, root]);
// ── Activity drawer plumbing ───────────────────────────────────────
// The Activity button in ListHeaderV2 dispatches a window event
// because the header is its own component and we don't want to
// prop-drill toggle state through every settings/share callback.
// Fetches fresh activity on open so partner actions (votes,
// additions, picks) feel live.
const loadActivity = _v2cb(async () => {
if (!rootId || !window.MR || !window.MR.lists) return;
setActivityLoading(true);
try {
const res = await window.MR.lists.fetchActivity(rootId, 80);
if (res && res.ok) setActivity(res.activity || []);
} finally { setActivityLoading(false); }
}, [rootId]);
_v2e(() => {
const onOpen = () => { setActivityOpen(true); loadActivity(); };
window.addEventListener('mr-open-activity', onOpen);
return () => window.removeEventListener('mr-open-activity', onOpen);
}, [loadActivity]);
// Esc closes the drawer.
_v2e(() => {
if (!activityOpen) return;
const onKey = (e) => { if (e.key === 'Escape') setActivityOpen(false); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [activityOpen]);
// Auto-scroll while dragging — when the cursor gets near the top or
// bottom edge of the viewport, scroll the page so the user can drop
// somewhere off-screen without releasing the drag. Edge size + speed
// ramp up the closer to the edge you are. Tracks `mousemove` now —
// we drive drag with pointer events, not HTML5 native drag.
_v2e(() => {
if (!dragNodeId) return;
const EDGE = 80;
const MAX_SPEED = 18;
let raf = null;
let lastDelta = 0;
const onMove = (e) => {
const y = e.clientY;
const h = window.innerHeight;
let delta = 0;
if (y < EDGE) delta = -Math.ceil((1 - y / EDGE) * MAX_SPEED);
else if (y > h - EDGE) delta = Math.ceil((1 - (h - y) / EDGE) * MAX_SPEED);
lastDelta = delta;
if (delta !== 0 && raf == null) {
const tick = () => {
if (lastDelta === 0) { raf = null; return; }
window.scrollBy(0, lastDelta);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
}
};
window.addEventListener('mousemove', onMove);
return () => {
window.removeEventListener('mousemove', onMove);
if (raf != null) cancelAnimationFrame(raf);
};
}, [dragNodeId]);
// ── Mutation handlers — all hit the DB then refresh. ────────────────────
const addItem = async ({ parentId, productId = null, custom = null, name, ageMin = null, ageMax = null }) => {
const res = await window.MR.nodes.addChild({
parentId,
rootId: root.id,
type: 'item',
name: name || (custom && custom.name) || 'Item',
productId,
custom,
});
// Age fields are applied as a follow-up patch because addChild
// doesn't take them at creation time. Silently noop when the
// paste-link extractor didn't return either bound — most pages
// don't expose age. Fire-and-forget: the item itself has landed
// already; a missed age update isn't worth blocking the user.
if (res.ok && res.node && (ageMin != null || ageMax != null)) {
try {
await window.MR.nodes.updateNode(res.node.id, {
age_min: ageMin != null ? Number(ageMin) : null,
age_max: ageMax != null ? Number(ageMax) : null,
});
} catch (err) {
console.warn('[addItem] age patch failed', err);
}
}
// Placeholder flag — written to localStorage keyed by the new node's
// id so subsequent reads (via nodeFromRow) re-hydrate the flag onto
// the custom blob. We strip it from the API payload because the DB
// schema doesn't carry it.
if (res.ok && res.node && custom && custom.placeholder) {
try { localStorage.setItem(`mr-placeholder-${res.node.id}`, 'true'); } catch {}
}
// Gallery — same localStorage fallback. og-fetch returns up to 12
// images; we store the whole array so the detail panel can show the
// full set. The primary image stays in custom_image_url for cards.
if (res.ok && res.node && custom && Array.isArray(custom.gallery) && custom.gallery.length > 1) {
try { localStorage.setItem(`mr-gallery-${res.node.id}`, JSON.stringify(custom.gallery)); } catch {}
}
// Materials + certifications — same localStorage fallback as the
// gallery. The schema doesn't carry them yet, but localStorage keeps
// the feature working until we add columns. Per-node key keeps reads
// O(1) when rendering the row.
if (res.ok && res.node && custom && (custom.materials || (Array.isArray(custom.certifications) && custom.certifications.length))) {
try {
localStorage.setItem(`mr-meta-${res.node.id}`, JSON.stringify({
materials: custom.materials || null,
certifications: Array.isArray(custom.certifications) ? custom.certifications : [],
}));
} catch {}
}
if (res.ok) {
// Activity feed entry. Capture enough to render a readable line
// without needing to fetch the product separately ("Sarah added
// Cybex Cloud Q"). Source URL is kept so the timeline can link out.
// Image URL is snapshotted at log time so even when the item is
// later removed or its image swapped, the activity row still
// shows a thumbnail of what was added.
if (window.MR && window.MR.lists && window.MR.lists.logActivity) {
const product = productId ? (window.PRODUCTS || []).find(p => p.id === productId) : null;
try {
window.MR.lists.logActivity(root.id, 'added_item', {
itemId: res.node && res.node.id,
meta: {
product_name: product ? product.name : null,
custom_name: custom ? custom.name : null,
source_url: custom ? custom.sourceUrl : null,
image_url: (product && product.img) || (custom && custom.image) || null,
},
});
} catch {}
}
await refreshRoot();
}
return res;
};
// addSlot now takes an explicit slotKind ('group' | 'shortlist').
// - 'group' = a heading + items, no decision UI.
// - 'shortlist' = "I'm picking one of these" candidates, items get the
// Pick toggle; quantityNeeded controls how many to pick.
// Defaults to 'group' so accidental calls give the safer affordance.
const addSlot = async ({ parentId, name, slotKind = 'group', quantityNeeded = null, blurb = null, necessity = null }) => {
const qty = quantityNeeded != null
? quantityNeeded
: (slotKind === 'shortlist' ? 1 : 0);
const res = await window.MR.nodes.addChild({
parentId,
rootId: root.id,
type: 'slot',
slotKind,
name,
quantityNeeded: qty,
blurb,
necessity,
});
if (res.ok) await refreshRoot();
return res;
};
const updateNode = async (id, patch) => {
// Manual unpick — when a user explicitly unpicks an item that the
// auto-decide effect previously picked, stamp a "skip" flag so it
// doesn't get auto-re-picked next time votes update. The flag is
// cleared if the user manually picks it again.
if (patch.picked === false) {
try { localStorage.setItem(`mr-autopick-skip-${id}`, 'true'); } catch {}
} else if (patch.picked === true) {
try { localStorage.removeItem(`mr-autopick-skip-${id}`); } catch {}
}
// Auto status transition: picking a candidate also bumps its status
// from want → need ("Getting"). Conceptually: a pick is the moment
// you've decided you're acquiring this thing. Don't downgrade if the
// user has already marked it Have; only nudge from the default state.
if (patch.picked === true && !('status' in patch)) {
const findIt = (n) => {
if (n.id === id) return n;
for (const c of (n.children || [])) {
const r = findIt(c); if (r) return r;
}
return null;
};
const cur = root ? findIt(root) : null;
if (cur && (cur.status || 'want') === 'want') {
patch = { ...patch, status: 'need' };
}
}
// Optimistic — apply the patch to the local tree immediately so the
// UI flips before the round-trip lands. Without this, the toggle
// feels broken (no visible change for ~half a second) and we depend
// entirely on the refresh after a successful write to repaint.
// Particularly important when slot_kind is being stripped server-side
// and only persists in localStorage — refreshRoot would otherwise
// walk the tree back to a stale value before nodeFromRow re-applies
// the LS override.
// Snapshot the node BEFORE we mutate the tree — we need its display
// name (and old status) for an honest activity-feed line.
const findIt = (n, target) => {
if (n.id === target) return n;
for (const c of (n.children || [])) {
const r = findIt(c, target); if (r) return r;
}
return null;
};
const beforeNode = root ? findIt(root, id) : null;
const displayName = (() => {
if (!beforeNode) return 'an item';
if (beforeNode.productId) {
const p = (window.PRODUCTS || []).find(x => x.id === beforeNode.productId);
return (p && p.name) || beforeNode.name || 'an item';
}
return (beforeNode.custom && beforeNode.custom.name) || beforeNode.name || 'an item';
})();
// Snapshot the item's image at update time for the activity feed
// thumbnail. Same lookup as displayName but for the picture.
const displayImage = (() => {
if (!beforeNode) return null;
if (beforeNode.productId) {
const p = (window.PRODUCTS || []).find(x => x.id === beforeNode.productId);
return (p && p.img) || null;
}
return (beforeNode.custom && beforeNode.custom.image) || null;
})();
setRoot(prev => {
if (!prev) return prev;
const clone = JSON.parse(JSON.stringify(prev));
const apply = (n) => {
if (n.id === id) Object.assign(n, patch);
else (n.children || []).forEach(apply);
};
apply(clone);
return clone;
});
const res = await window.MR.nodes.updateNode(id, patch);
if (res.ok) {
// Activity entries — log only the meaningful transitions, not
// every keystroke of a rename. Picked, status changes, and
// registry toggles are the high-signal events for a partner.
if (window.MR && window.MR.lists && window.MR.lists.logActivity) {
try {
if ('picked' in patch) {
window.MR.lists.logActivity(root.id, 'updated_item', {
itemId: id,
meta: { picked: !!patch.picked, name: displayName, image_url: displayImage },
});
}
if ('status' in patch && beforeNode && (beforeNode.status || 'want') !== patch.status) {
window.MR.lists.logActivity(root.id, 'updated_item', {
itemId: id,
meta: { status_from: beforeNode.status || 'want', status_to: patch.status, name: displayName, image_url: displayImage },
});
}
if ('inRegistry' in patch && beforeNode && !!beforeNode.inRegistry !== !!patch.inRegistry) {
window.MR.lists.logActivity(root.id, 'updated_item', {
itemId: id,
meta: { in_registry: !!patch.inRegistry, name: displayName, image_url: displayImage },
});
}
} catch {}
}
await refreshRoot();
}
return res;
};
const deleteNode = async (id) => {
// Snapshot the doomed node's display name so the activity line reads
// "Sarah removed Cybex Cloud Q" not "Sarah removed an item".
const findIt = (n, target) => {
if (n.id === target) return n;
for (const c of (n.children || [])) {
const r = findIt(c, target); if (r) return r;
}
return null;
};
const node = root ? findIt(root, id) : null;
const displayName = (() => {
if (!node) return null;
if (node.productId) {
const p = (window.PRODUCTS || []).find(x => x.id === node.productId);
return (p && p.name) || node.name || null;
}
return (node.custom && node.custom.name) || node.name || null;
})();
// Snapshot the image at delete time — once the row's gone, this is
// the only place the activity feed can get a thumbnail.
const displayImage = (() => {
if (!node) return null;
if (node.productId) {
const p = (window.PRODUCTS || []).find(x => x.id === node.productId);
return (p && p.img) || null;
}
return (node.custom && node.custom.image) || null;
})();
const res = await window.MR.nodes.deleteNode(id);
if (res.ok) {
if (window.MR && window.MR.lists && window.MR.lists.logActivity) {
try {
window.MR.lists.logActivity(root.id, 'removed_item', {
itemId: id,
meta: {
[node && node.type === 'slot' ? 'slot_name' : 'item_name']: displayName,
image_url: displayImage,
},
});
} catch {}
}
await refreshRoot();
}
return res;
};
// Locate a node + its parent in the current tree.
const findNodeWithParent = _v2cb((id) => {
if (!root) return { node: null, parent: null };
let foundNode = null, foundParent = null;
const walk = (n) => {
(n.children || []).forEach(c => {
if (c.id === id) { foundNode = c; foundParent = n; }
else walk(c);
});
};
walk(root);
return { node: foundNode, parent: foundParent };
}, [root]);
// Synthesize a product object for the shared DetailPanel — catalog items
// pass through the canonical product; custom items get a hand-built shape
// that exposes name/brand/img/gallery/price/description/retailers so the
// gallery, "Find retailer in Australia", and source-URL CTAs all work.
const synthesizeProductForNode = (node) => {
if (!node) return null;
const catalog = node.productId && productMap ? productMap[node.productId] : null;
if (catalog) return catalog;
const custom = node.custom || {};
const name = custom.name || node.name || 'Item';
const img = custom.image || '';
// Source URL has been stored under different key names by different
// code paths (sourceUrl, source_url, url, link). Check them all so
// the detail panel reliably shows the Source link and the more-menu
// shows Refetch regardless of which path created the item.
const sourceUrl = custom.sourceUrl || custom.source_url || custom.url || custom.link || '';
// Full gallery: when the user multi-selected images in QuickAdd, we
// saved the picked set as custom.gallery. The old synth always
// returned [primaryImage], losing the rest — that's why even after
// picking 3 images the detail panel only showed one. Prefer the
// saved gallery; fall back to a single-image array.
const gallery = (Array.isArray(custom.gallery) && custom.gallery.length)
? custom.gallery
: (img ? [img] : []);
let primaryUrl = null;
let retailers = [];
if (sourceUrl) {
let hostname = '';
try { hostname = new URL(sourceUrl).hostname.replace(/^www\./, ''); } catch {}
primaryUrl = sourceUrl;
retailers = [{ name: hostname || 'Source', url: sourceUrl }];
}
// Age range — stored on the node (not the custom blob) by the
// QuickAdd auto-detect + the manual age picker. Surfacing it on the
// synthesized product lets the DetailPanel show "0–3 mo" etc in the
// header chip row, same as for catalog items.
const ageMin = node.ageMin != null ? Number(node.ageMin) : 0;
const ageMax = node.ageMax != null ? Number(node.ageMax) : 0;
// Client-side fallback for items saved BEFORE the deep AI extractor
// shipped — scan the description for material composition patterns
// like "80% recycled polyester, 20% elastane" or "Made of organic
// cotton" so the structured Specs block can render even without a
// server-side materials field. Refetch is still the way to get the
// FULL deep-extracted payload (multi-component splits, certs in
// prose, dimensions, made-in), but this gives sensible structure
// for older items without forcing a re-fetch.
const inferMaterialsFromDesc = (desc) => {
if (!desc) return null;
const text = String(desc).slice(0, 4000);
// Pattern 1: comma-separated "X% A, Y% B"
const pctMulti = text.match(/(\d{1,3}\s*%\s*[a-zA-Z][a-zA-Z\s\-]+?(?:\s*,\s*\d{1,3}\s*%\s*[a-zA-Z][a-zA-Z\s\-]+?){1,5})(?=[\s.,;])/i);
if (pctMulti) return pctMulti[1].replace(/\s+/g, ' ').trim();
// Pattern 2: "Made of/from X" with a fibre word
const madeFrom = text.match(/\b(?:made\s+(?:of|from|with))\s+([^.;\n]{4,140}?(?:cotton|wool|polyester|linen|silk|bamboo|hemp|merino|cashmere|nylon|spandex|elastane|tencel|modal|viscose|lyocell|leather|down|fleece|jersey|alpaca|mohair|recycled|organic|beechwood|maple|oak|silicone|plastic|rubber|bpa-?free)[^.;\n]{0,80})(?=[.;])/i);
if (madeFrom) return madeFrom[1].replace(/\s+/g, ' ').trim();
// Pattern 3: "100% X"
const singlePct = text.match(/(100\s*%\s*[a-zA-Z][a-zA-Z\s\-]{2,40}?)(?=[\s.,;])/i);
if (singlePct) return singlePct[1].replace(/\s+/g, ' ').trim();
return null;
};
const fallbackMaterials = !custom.materials ? inferMaterialsFromDesc(custom.description) : null;
// Clean up the description for display:
// 1. Pull out bracket-tagged feature sections like "[Peace in Mind]:
// ..." or "[Soft and Flexible]: ..." — these are highlight chips,
// not narrative prose.
// 2. Strip leading key:value prefix junk like "Material Silicone
// Color X Brand Y" that Amazon-style listings dump at the start.
// 3. Drop a literal leading "Description" word that some retailers
// prepend.
// The original description is preserved as descriptionRaw so the
// detail panel can offer "Read more" / "Show full description" toggles
// without losing info. Each of these cleanups is conservative — if
// the description doesn't match the heuristic, we pass it through
// unchanged.
const cleanDescription = (raw) => {
if (!raw) return { description: '', features: [], descriptionRaw: '' };
let text = String(raw);
const features = [];
// Pull "[Label]: value" sections (run greedily for multiple tags).
const bracketRe = /\[([^\]\n]{2,60})\]\s*:?\s*([^\[\n]{0,400}?)(?=\[|$)/g;
let m;
while ((m = bracketRe.exec(text))) {
const label = m[1].replace(/\s+/g, ' ').trim();
const value = m[2].replace(/\s+/g, ' ').trim().replace(/^[:\s.]+/, '');
if (label && value && value.length >= 8) {
features.push(`${label}: ${value.slice(0, 120)}${value.length > 120 ? '…' : ''}`);
}
}
// Now strip the bracket sections from the description text so we
// don't show them twice.
if (features.length) {
text = text.replace(/\[[^\]\n]{2,60}\]\s*:?\s*[^\[\n]{0,400}/g, ' ').trim();
}
// Strip leading "Description" / "Product description" / "About this item"
text = text.replace(/^\s*(?:Description|Product\s+description|About\s+this\s+item)[:.\s]*/i, '');
// Strip Amazon-style key:value prefix runs. Pattern:
// "Word Word Word Word Word Word…" with no punctuation up front,
// then a real sentence following. We detect when the description
// begins with > 3 successive "Capital Word ValueWord" key:value
// pairs (Material Silicone Color X Brand Y Material Type Free).
// Drop them until we hit a real sentence (starts with a capital
// followed by a clear noun/verb, has a period, etc.)
const kvPrefix = text.match(/^((?:[A-Z][a-z]+(?:\s+[A-Z][a-z]+){0,3}\s+[A-Za-z][a-zA-Z0-9,\/\-]*\s+){3,10})/);
if (kvPrefix && kvPrefix[1].length > 30 && kvPrefix[1].length < text.length * 0.8) {
text = text.slice(kvPrefix[1].length).trim();
}
// Trim leftover whitespace runs.
text = text.replace(/\s+/g, ' ').trim();
return { description: text, features, descriptionRaw: String(raw) };
};
const cleaned = cleanDescription(custom.description);
return {
id: node.id,
name,
brand: custom.brand || '',
img,
gallery,
price: custom.price != null ? custom.price : 0,
currency: custom.currency || 'AUD',
description: cleaned.description,
descriptionRaw: cleaned.descriptionRaw,
why: custom.description || '',
benefit: '',
ageMin,
ageMax,
learning: [],
retailers,
primaryUrl,
// Structured spec fields — pulled through so the detail panel
// can render them in the new Specs block for custom items.
// Falls back to description-scanned materials when no structured
// field was saved (older items, pre-deep-extractor).
materials: custom.materials || fallbackMaterials || null,
certifications: Array.isArray(custom.certifications) ? custom.certifications : [],
// Dimensions (server-extracted in og-fetch). Object with keys
// like { width, height, depth, weight }, each in display-ready
// strings ("30 cm" / "1.2 kg") — see extractDimensions in og-fetch.
dimensions: custom.dimensions && typeof custom.dimensions === 'object' ? custom.dimensions : null,
// Country of origin and 1-4 short feature highlights — AI-only
// extraction; populated for items added/refetched after the
// structured-spec rewrite. Falls back to bracket-tagged sections
// pulled from the description (Amazon-style "[Peace in Mind]: ...")
// so older items still get structured Highlights chips.
countryOfOrigin: custom.madeIn || null,
features: (() => {
const stored = Array.isArray(custom.features) ? custom.features : [];
if (stored.length) return stored;
return cleaned.features.slice(0, 4);
})(),
// Marker so other code can branch if needed.
__custom: true,
};
};
// Build the listContext payload consumed by DetailPanel's ListContextExtras.
// Captures the current snapshot of votes/comments/claims for the node and
// wires callbacks back to our mutation handlers.
const buildListContext = (nodeId) => {
const { node, parent } = findNodeWithParent(nodeId);
if (!node) return null;
const isUnderSlot = parent && parent.type === 'slot';
// "Pick this one" only belongs inside a shortlist — a group container
// suppresses it. Legacy slots default to 'group' after the migration so
// existing lists don't surface the pick affordance unexpectedly.
const isUnderShortlist = isUnderSlot && parent.slotKind === 'shortlist';
const claim = (claims || []).find(c => c.node_id === node.id) || null;
// Source URL is what powers the "Re-fetch info from page" action.
// Different code paths have stored this under different keys over
// the months — newer in-list pastes use `sourceUrl` (camelCase),
// the QuickAdd / bookmarklet flow uses `source_url` (snake_case),
// and a handful of very early imports stash it as plain `url`.
// Catalog items expose it via `retailers[0].url` / `primaryUrl`
// on the matched product. Check all of these so the menu shows
// Refetch for every item that could possibly be re-grabbed.
const customSourceUrl = node.custom && (
node.custom.sourceUrl
|| node.custom.source_url
|| node.custom.url
|| node.custom.link
);
const catalogProduct = node.productId && productMap ? productMap[node.productId] : null;
const catalogSourceUrl = catalogProduct && (
catalogProduct.primaryUrl
|| (Array.isArray(catalogProduct.retailers) && catalogProduct.retailers[0] && catalogProduct.retailers[0].url)
|| null
);
const sourceUrl = customSourceUrl || catalogSourceUrl || null;
// Other writable lists the user owns — populates the Move/Copy
// submenu in the 3-dot more menu. Excludes the current list and
// any list they don't own (shared lists where they aren't the
// creator) since we don't have permission to write there.
const otherLists = (userLists || [])
.filter(l => l.id !== root.id && l.isMine !== false && l._supabase)
.map(l => ({ id: l.id, name: l.name }));
return {
nodeId: node.id,
nodeName: node.name || (node.custom && node.custom.name) || 'Item',
nodeStatus: node.status || 'want',
nodePicked: !!node.picked,
nodeInRegistry: !!node.inRegistry,
isUnderSlot,
isUnderShortlist,
rootKind: root && root.kind,
claim,
nodeVotes: (votes || []).filter(v => v.node_id === node.id),
comments: (comments || []).filter(c => c.node_id === node.id),
myUserId,
nameFor,
onSetStatus: (s) => updateNode(node.id, { status: s }),
onSetPicked: (v) => updateNode(node.id, { picked: !!v }),
onSetInRegistry:(v) => updateNode(node.id, { inRegistry: !!v }),
onVote: (dir) => voteOnNode(node.id, dir),
onDelete: () => { deleteNode(node.id); setOpenItemId(null); },
onAddComment: (body) => addComment(node.id, body),
onDeleteComment:(cid) => deleteComment(cid),
// ── More-menu actions ───────────────────────────────────────────
// Source URL is exposed so the menu can show/hide the "Re-fetch"
// option. Null for catalog items.
sourceUrl,
// Other lists the user can copy/move to. Empty array (not null)
// when the user only owns this one list — the menu can then
// hide the submenu items entirely.
otherLists,
// Re-run og-fetch on the source URL and merge the freshest
// image / price / brand / description back into the custom blob.
// No-op for catalog items. Resolves to { ok, reason? } so the
// menu can show a toast on failure.
onRefetch: async () => {
if (!sourceUrl) return { ok: false, reason: 'no-source-url' };
try {
// Pass deep=1 so og-fetch runs the AI-powered materials
// pass in addition to the regex extractor. The user
// explicitly asked for a thorough re-check, so the extra
// ~5s + per-call cost is justified — this is the "really
// get it right this time" button.
const resp = await fetch(`/api/og-fetch?url=${encodeURIComponent(sourceUrl)}&deep=1`);
const json = await resp.json();
if (!resp.ok || !json || !json.ok || !json.data) {
return { ok: false, reason: (json && json.error) || 'fetch-failed' };
}
const d = json.data;
// Build a minimal patch — only replace fields the user
// hasn't already curated. Name + brand stay untouched
// (the user may have renamed) unless they're currently
// blank; everything else gets the fresh values.
const cur = node.custom || {};
const nextCustom = {
...cur,
// Always overwrite the visual fields — these are what
// tend to break (low-res image, missing price).
image: d.image || cur.image || '',
price: d.price != null ? Number(d.price) : (cur.price ?? null),
currency: d.currency || cur.currency || 'AUD',
description: d.description || cur.description || '',
gallery: (Array.isArray(d.gallery) && d.gallery.length)
? d.gallery
: (cur.gallery || (d.image ? [d.image] : [])),
// Brand only if we didn't have one before.
brand: cur.brand || d.brand || '',
// Structured spec fields — overwrite even when the current
// value exists, because the whole point of refetch is
// "the data we have is wrong/incomplete." Fall back to
// existing values only when og-fetch returned nothing.
materials: d.materials || cur.materials || null,
certifications: (Array.isArray(d.certifications) && d.certifications.length)
? d.certifications
: (cur.certifications || []),
dimensions: (d.dimensions && Object.keys(d.dimensions || {}).length)
? d.dimensions
: (cur.dimensions || null),
madeIn: d.madeIn || cur.madeIn || null,
features: (Array.isArray(d.features) && d.features.length)
? d.features
: (cur.features || []),
};
// Age range — only update from fetched data if not already
// set on the node (preserves any manual override).
const agePatch = {};
if (node.ageMin == null && d.ageMin != null) agePatch.age_min = Number(d.ageMin);
if (node.ageMax == null && d.ageMax != null) agePatch.age_max = Number(d.ageMax);
await updateNode(node.id, { custom: nextCustom, ...agePatch });
return { ok: true };
} catch (err) {
console.warn('[refetch] failed', err);
return { ok: false, reason: err.message || 'fetch-failed' };
}
},
// Duplicate creates a sibling with the same payload. Same parent,
// appended at the end. Useful for cloning a starting-point item
// when iterating on variants.
onDuplicate: async () => {
if (!window.MR || !window.MR.nodes || !parent) return { ok: false };
const res = await window.MR.nodes.addChild({
parentId: parent.id,
rootId: root.id,
type: 'item',
name: node.name || (node.custom && node.custom.name) || 'Item',
productId: node.productId || null,
custom: node.custom ? { ...node.custom } : null,
});
if (res.ok && res.node) {
// Carry over status / age / category — the addChild call
// doesn't take these at creation time.
const patch = {};
if (node.status) patch.status = node.status;
if (node.inRegistry) patch.in_registry = !!node.inRegistry;
if (node.ageMin != null) patch.age_min = node.ageMin;
if (node.ageMax != null) patch.age_max = node.ageMax;
if (node.category) patch.category = node.category;
if (Object.keys(patch).length) {
try { await window.MR.nodes.updateNode(res.node.id, patch); } catch {}
}
await refreshRoot();
}
return res;
},
// Copy / move into a different list root. Both walk the same
// addChild path; move just deletes the source after the copy
// lands. parentId becomes the target root (i.e. lands at the
// top of the destination list, not inside a group — keeps the
// mental model simple).
onCopyToList: async (targetListId) => {
if (!window.MR || !window.MR.nodes || !targetListId) return { ok: false };
const res = await window.MR.nodes.addChild({
parentId: targetListId,
rootId: targetListId,
type: 'item',
name: node.name || (node.custom && node.custom.name) || 'Item',
productId: node.productId || null,
custom: node.custom ? { ...node.custom } : null,
});
return res;
},
onMoveToList: async (targetListId) => {
if (!window.MR || !window.MR.nodes || !targetListId) return { ok: false };
const res = await window.MR.nodes.addChild({
parentId: targetListId,
rootId: targetListId,
type: 'item',
name: node.name || (node.custom && node.custom.name) || 'Item',
productId: node.productId || null,
custom: node.custom ? { ...node.custom } : null,
});
if (res.ok) {
// Only delete the source once the copy actually landed.
await window.MR.nodes.deleteNode(node.id);
setOpenItemId(null);
await refreshRoot();
}
return res;
},
};
};
// Open a list-item in the shared DetailPanel. Captures the product
// synthesis + listContext, and hands the App a teardown so closing the
// panel clears our local openItemId.
// Flat list of all item nodes in display order — used to power the
// DetailPanel's ⟵ / ⟶ keyboard nav across items in the same list.
// We compute this on demand (rather than memoising) because it's
// only walked when an item is opened, and the result depends on the
// current tree. Skips slots/groups (they're not items) and
// placeholders (which open their own focused replace modal instead
// of the rich DetailPanel — see handleOpenListItem below).
const flattenItemsInOrder = () => {
const out = [];
const visit = (n) => {
(n.children || []).forEach(c => {
if (c.type === 'item' && !(c.custom && c.custom.placeholder)) out.push(c);
else if (c.type === 'slot') visit(c);
});
};
if (root) visit(root);
return out;
};
const handleOpenListItem = (itemId) => {
const { node } = findNodeWithParent(itemId);
if (!node) return;
// Placeholders get their own focused modal — the DetailPanel's
// gallery/retailer/comparison sections don't apply when there's no
// product yet. The PlaceholderReplaceModal is built around the
// "fill this in" workflow instead.
if (node.custom && node.custom.placeholder) {
setPlaceholderItemId(itemId);
return;
}
setOpenItemId(itemId);
const product = synthesizeProductForNode(node);
const listContext = buildListContext(itemId);
// contextList unlocks the DetailPanel's prev/next keyboard nav
// (ArrowLeft / ArrowRight). One synthesized product per item, in
// the same order the user sees on the page.
const contextList = flattenItemsInOrder().map(synthesizeProductForNode).filter(Boolean);
if (onOpenProduct) {
onOpenProduct(product, {
listContext,
contextList,
onClose: () => setOpenItemId(null),
});
}
};
// When the DetailPanel's prev/next nav fires (it calls openProduct
// with just the product, no opts), the host App's openProduct
// dispatches a `mr-detail-product-change` event so we can sync our
// local openItemId to the new product. That re-runs the
// buildListContext effect below and keeps the right-rail status /
// vote / comment actions wired to the right node.
_v2e(() => {
const onNav = (ev) => {
const newId = ev && ev.detail && ev.detail.productId;
if (!newId) return;
// Only react if the new id matches one of our items — otherwise
// it's a navigation outside the list and shouldn't clobber our
// state. findNodeWithParent returns {} if not found in our tree.
const found = findNodeWithParent(newId);
if (found && found.node) setOpenItemId(newId);
};
window.addEventListener('mr-detail-product-change', onNav);
return () => window.removeEventListener('mr-detail-product-change', onNav);
}, [findNodeWithParent]);
// Keep listContext fresh while the panel is open — re-build on every
// change to root / votes / comments / claims so the right rail sees the
// latest data immediately after a vote/status/comment mutation.
_v2e(() => {
if (!openItemId || !onUpdateListContext) return;
const ctx = buildListContext(openItemId);
if (ctx) onUpdateListContext(ctx);
}, [openItemId, root, votes, comments, claims, names]);
// ── Render states ───────────────────────────────────────────────────────
// Missing rootId — usually a malformed URL like `#list2/` (no id), a
// stale bookmark, or a stripped link. Render the same "couldn't open"
// affordance instead of an indefinite "Loading list…" spinner so the
// user has a route back to a working page.
if (!rootId) return (
No list selected
The link looks incomplete. Head back to your lists and pick the one you meant to open.
);
if (loading) return (
Loading list…
);
if (err) return (
Hmm — we can't open this list
{err}
);
if (!root) return null;
return (
updateNode(root.id, patch)}
onShare={onShare ? () => onShare(root) : null}
userLists={userLists}
onSwitchList={onSwitchList}
focusMode={focusMode}
onFocusMode={setFocusMode}
budget={budget}
onBudgetChange={setBudget}
autoDecide={effectiveAutoDecide}
onAutoDecideChange={setAutoDecide}
onDuplicate={async () => {
const res = await window.MR.nodes.duplicateRoot(root);
if (res.ok) {
try { location.hash = '#list/' + res.root.id; } catch {}
} else {
alert('Could not duplicate: ' + (res.reason || 'unknown error'));
}
}}
onSaveAsTemplate={async () => {
const res = await window.MR.nodes.duplicateRoot(root, {
stripItems: true,
nameOverride: `${root.name || 'List'} template`,
});
if (res.ok) {
try { location.hash = '#list/' + res.root.id; } catch {}
} else {
alert('Could not save as template: ' + (res.reason || 'unknown error'));
}
}}
onArchive={() => {
if (!confirm(`Archive "${root.name || 'this list'}"? You can find it again in the Archived tab on the Lists page.`)) return;
window.MR.nodes.setArchived(root.id, true);
try { location.hash = '#lists'; } catch {}
}}
onPrint={() => {
// Add a body class so print CSS targets this view, then trigger
// the system print dialog.
document.body.classList.add('mr-printing');
setTimeout(() => {
try { window.print(); } finally {
setTimeout(() => document.body.classList.remove('mr-printing'), 400);
}
}, 50);
}}
onEnrichItems={async () => {
if (!window.MR.enrich) return;
// Walk the current root and count enrichable items first.
const enrichable = window.MR.enrich.findEnrichable(root);
if (enrichable.length === 0) {
window.__mr_showToast && window.__mr_showToast('No items with URLs to enrich');
return;
}
if (!window.confirm(`Fetch product details for ${enrichable.length} item${enrichable.length === 1 ? '' : 's'}? This may take a moment.`)) return;
window.__mr_showToast && window.__mr_showToast(`Enriching ${enrichable.length} item${enrichable.length === 1 ? '' : 's'}…`);
const res = await window.MR.enrich.enrichRoot(root, {
onProgress: ({ done, total }) => {
window.__mr_showToast && window.__mr_showToast(`Enriching items… ${done}/${total}`);
},
});
const msg = res.failed > 0
? `Enriched ${res.succeeded}/${res.total} items (${res.failed} couldn't be fetched)`
: `Enriched ${res.succeeded} item${res.succeeded === 1 ? '' : 's'} ✓`;
window.__mr_showToast && window.__mr_showToast(msg);
await refreshRoot();
}}
// Open every item's source URL in a new browser tab — useful
// for opening a shortlist of prams to flip between in one go.
// Catalog items use the first retailer URL; custom (paste-link)
// items use their saved source URL. Skips items with neither.
onOpenAllInTabs={() => {
const items = flattenItemsInOrder();
const targets = items.map(n => {
if (n.productId && productMap && productMap[n.productId]) {
const p = productMap[n.productId];
return {
name: p.name,
url: p.primaryUrl
|| (Array.isArray(p.retailers) && p.retailers[0] && p.retailers[0].url)
|| null,
};
}
return {
name: (n.custom && n.custom.name) || n.name || 'Item',
url: (n.custom && n.custom.sourceUrl) || null,
};
}).filter(t => {
if (!t.url) return false;
// safeUrl bounce — same XSS/scheme guard the rest of the
// app uses for outbound links. Skips javascript:, data:, etc.
if (window.MR && window.MR.safeUrl) {
return !!window.MR.safeUrl(t.url);
}
return /^https?:\/\//i.test(t.url);
});
if (targets.length === 0) {
window.__mr_showToast && window.__mr_showToast('No items with links to open');
return;
}
// Confirm before spawning many tabs — popup blockers usually
// allow ≤5 from one click; beyond that, browsers warn or
// truncate. We still let the user proceed; they'll get a
// browser-level dialog if anything's blocked.
if (targets.length > 5) {
const ok = window.confirm(
`Open ${targets.length} tabs?\n\n` +
`Your browser may ask permission for the first one. ` +
`Tip: many browsers block popups by default — if only one tab opens, ` +
`look for the blocked-popup icon in the address bar and allow it for magicrascals.com.`
);
if (!ok) return;
}
// Open in REVERSE order so the FIRST item ends up as the
// rightmost (most recently opened) tab — browsers focus the
// newest tab, so the user lands on item #1 when we're done.
let opened = 0;
for (let i = targets.length - 1; i >= 0; i--) {
try {
const w = window.open(targets[i].url, '_blank', 'noopener,noreferrer');
if (w) opened++;
} catch {}
}
if (opened < targets.length) {
window.__mr_showToast && window.__mr_showToast(
`Opened ${opened}/${targets.length} tabs — check for a blocked-popup notice in your address bar.`
);
} else {
window.__mr_showToast && window.__mr_showToast(`Opened ${opened} tab${opened === 1 ? '' : 's'} ✦`);
}
}}
/>
{
setFilterStatus(null);
setFilterMust(false);
setFilterMaxPrice(null);
setSearchQ('');
setFocusMode(false);
}}
onFilterAcquired={() => {
setFilterStatus('have');
setFilterMust(false);
setFilterMaxPrice(null);
setSearchQ('');
}}
/>
addItem({ parentId: root.id, ...p })}
onAddSlot={(p) => addSlot({ parentId: root.id, ...p })}
onAddSublist={(name) => addSlot({ parentId: root.id, name, quantityNeeded: 0 })}
productMap={productMap}
viewMode={viewMode}
onViewMode={setViewModePersisted}
gridSize={gridSize}
onGridSize={setGridSizePersisted}
onItemAdded={refreshRoot}
/>
{/* List-item detail is rendered by the shared DetailPanel in App.
handleOpenListItem builds a synthesized product + listContext and
hands them up via onOpenProduct. We keep openItemId locally so we
can re-publish listContext when votes/comments/etc. change. */}
{/* "What's missing?" AI chip — sits above the tree on every list
that has items. One tap opens the AI chat sidebar with a focused
"what's missing from this list?" prompt; the sidebar renders the
response with full markdown, inline product links, and add-to-list
actions. Only mounted when window.ListAIHelper has loaded. */}
{(root.children || []).length > 0 && window.ListAIHelper && (
)}
{
if (!e.dataTransfer) return;
const types = Array.from(e.dataTransfer.types || []);
if (types.includes('application/x-mr-product')) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
e.currentTarget.classList.add('is-ai-drop-target');
}
}}
onDragLeave={(e) => {
// Only clear when actually leaving the container (not bubbling
// through a child) — relatedTarget is the element we entered.
if (!e.currentTarget.contains(e.relatedTarget)) {
e.currentTarget.classList.remove('is-ai-drop-target');
}
}}
onDrop={async (e) => {
if (!e.dataTransfer) return;
const raw = e.dataTransfer.getData('application/x-mr-product');
if (!raw) return;
e.preventDefault();
e.currentTarget.classList.remove('is-ai-drop-target');
try {
const data = JSON.parse(raw);
if (!data || !data.productId) return;
await addItem({
parentId: root.id,
productId: data.productId,
name: data.name || 'Item',
});
if (typeof window.__mr_showToast === 'function') {
window.__mr_showToast(`Added "${data.name || 'item'}"`);
}
if (typeof window.__mr_celebrate === 'function') {
window.__mr_celebrate(e.currentTarget, { variant: 'add' });
}
} catch (err) {
console.error('[v2] AI drop failed:', err);
}
}}
>
{(root.children || []).length === 0 ? (
// ──────────────────────────────────────────────────────────────
// EMPTY STATE — "what this list could become"
//
// Old version was a bare line "This list is empty" — accurate but
// dispiriting. Users churn at this exact moment. New version sells
// the value: hero illustration, focused CTAs for the two highest-
// intent actions (paste link, ask AI), and a preview of what the
// list will grow into (shortlist decisions, partner voting, budget,
// gallery view). Inspires by showing the future state, not the
// current emptiness.
// ──────────────────────────────────────────────────────────────
✦✧✦
Let's build {root.name}
Drop in anything you're considering — a link, a photo, or just a name.
Decisions, comparisons, and a tidy list grow from there.
{/* Side-by-side comparison modal for shortlists. Re-resolves the slot
node from the live tree on every render so picks / votes / new
candidates added during the session update in-place. */}
{/* Bulk action bar — appears when ≥1 item is selected. Floating
dock at the bottom of the viewport. Esc cancels selection. */}
{selectionMode && (
{selectedIds.size}selected
)}
{placeholderItemId && (() => {
const { node } = findNodeWithParent(placeholderItemId);
if (!node) return null;
return (
setPlaceholderItemId(null)}
onEdit={(patch) => updateNode(node.id, patch)}
onReplaceWithProduct={(p) => {
// Strip the placeholder flag from LS, swap to the catalog
// product id. Custom blob is cleared because product_id now
// owns the display fields.
try { localStorage.removeItem(`mr-placeholder-${node.id}`); } catch {}
updateNode(node.id, { productId: p.id, custom: null, name: p.name });
setPlaceholderItemId(null);
}}
onReplaceWithCustom={(custom) => {
// Replace via paste-link or photo upload. Strips placeholder
// flag and writes a normal custom blob.
try { localStorage.removeItem(`mr-placeholder-${node.id}`); } catch {}
const { placeholder, ...rest } = custom;
updateNode(node.id, { custom: rest, name: rest.name || node.name });
setPlaceholderItemId(null);
}}
onDelete={() => {
try { localStorage.removeItem(`mr-placeholder-${node.id}`); } catch {}
deleteNode(node.id);
setPlaceholderItemId(null);
}}
/>
);
})()}
{compareSlotId && (() => {
const find = (n) => {
if (n.id === compareSlotId) return n;
for (const c of (n.children || [])) {
const r = find(c);
if (r) return r;
}
return null;
};
const slot = root ? find(root) : null;
if (!slot) return null;
return (
setCompareSlotId(null)}
onPick={(itemId, picked) => updateNode(itemId, { picked: !!picked })}
onVote={voteOnNode}
onSetNotes={(itemId, notes) => updateNode(itemId, { notes })}
onOpenProduct={onOpenProduct}
/>
);
})()}
{activityOpen && (
setActivityOpen(false)}
onRefresh={loadActivity}
/>
)}
);
}
// ───────────────────────── Activity drawer ─────────────────────────
// Slides in from the right with a list of events for the current list.
// Each row pairs an actor avatar, a verb-phrase, the affected item, and a
// time-ago stamp. Renders the same set of action types the rest of the
// app logs (added_item, removed_item, voted, picked, status changes,
// partner_joined, etc.) and degrades gracefully on unknown actions.
function ActivityDrawer({ activity, loading, nameFor, myUserId, root, onClose, onRefresh, onOpenItem, productMap }) {
// Verb renderer — same vocabulary as page-lists.jsx's drawer so the
// copy stays consistent across the app. Falls back to the raw action
// name when we encounter something newly-introduced.
const verb = (a) => {
const m = a.meta || {};
const statusLabel = (s) => s === 'have' ? 'Have' : s === 'need' ? 'Getting' : s === 'want' ? 'Loved' : s;
switch (a.action) {
case 'added_item': return `added ${m.product_name || m.custom_name || 'an item'}`;
case 'updated_item': {
if (m.status_to) return `moved ${m.name || 'an item'} to ${statusLabel(m.status_to)}`;
if (m.in_registry === true) return `added ${m.name || 'an item'} to the registry`;
if (m.in_registry === false) return `removed ${m.name || 'an item'} from the registry`;
if (m.picked === true) return `picked ${m.name || 'an item'} ✨`;
if (m.picked === false) return `unpicked ${m.name || 'an item'}`;
return `updated ${m.name || 'an item'}`;
}
case 'removed_item': return `removed ${m.item_name || m.slot_name || 'an item'}`;
case 'voted': return `voted ${m.vote === 'up' ? '👍' : '👎'} on ${m.item_name || 'an item'}`;
case 'noted': return `added a note`;
case 'joined': return `joined the list`;
case 'partner_joined': {
const name = m && m.name;
return name ? `joined the list as ${name} 💞` : `joined the list 💞`;
}
case 'invited': return `invited ${a.target_email || 'someone'}`;
case 'invite_sent': return `invited ${a.target_email || 'a partner'}`;
case 'created_list': return `created this list`;
case 'shortlist_decided': return `decided "${m && m.slot_name || 'a shortlist'}" ✨`;
case 'list_completed': return `finished this list 🎉`;
default: return a.action;
}
};
const timeAgo = (ts) => {
if (!ts) return '';
const t = new Date(ts).getTime();
const s = Math.max(0, Math.floor((Date.now() - t) / 1000));
if (s < 60) return 'just now';
if (s < 3600) return Math.floor(s / 60) + 'm ago';
if (s < 86400) return Math.floor(s / 3600) + 'h ago';
const d = Math.floor(s / 86400);
if (d < 7) return d + 'd ago';
return new Date(ts).toLocaleDateString();
};
const actorLabel = (a) => {
if (a.actor_id === myUserId) return 'You';
const fromMap = nameFor ? nameFor(a.actor_id) : null;
return fromMap || a.actor_email || 'Someone';
};
// Group activity by day for readability (Today / Yesterday / Date)
const groups = (() => {
const out = [];
let lastKey = '';
const dayKey = (ts) => {
const d = new Date(ts);
d.setHours(0, 0, 0, 0);
return d.getTime();
};
const dayLabel = (ts) => {
const k = dayKey(ts);
const today = dayKey(Date.now());
const oneDay = 86400000;
if (k === today) return 'Today';
if (k === today - oneDay) return 'Yesterday';
return new Date(ts).toLocaleDateString(undefined, { weekday: 'long', month: 'short', day: 'numeric' });
};
for (const a of (activity || [])) {
const label = a.created_at ? dayLabel(a.created_at) : 'Unknown';
if (label !== lastKey) { out.push({ label, items: [] }); lastKey = label; }
out[out.length - 1].items.push(a);
}
return out;
})();
return (
<>
);
}
// ───────────────────────── Header ─────────────────────────
function ListHeaderV2({ root, onBack, onUpdate, onShare, focusMode, onFocusMode, budget, onBudgetChange, autoDecide, onAutoDecideChange, onDuplicate, onSaveAsTemplate, onArchive, onPrint, onEnrichItems, onOpenAllInTabs, userLists, onSwitchList }) {
const [editingName, setEditingName] = _v2s(false);
const [draftName, setDraftName] = _v2s(root.name);
const [editingDesc, setEditingDesc] = _v2s(false);
const [draftDesc, setDraftDesc] = _v2s(root.description || '');
const [settingsOpen, setSettingsOpen] = _v2s(false);
// List-switcher popover. Clicking the title opens it; "Rename" inside
// is now where the rename action lives (replaces the previous
// click-name-to-rename pattern). Lists are sourced from userLists
// (passed from index.html), excluding the current one + any list
// the user doesn't own.
const [switcherOpen, setSwitcherOpen] = _v2s(false);
// Close switcher on outside click.
_v2e(() => {
if (!switcherOpen) return;
const onDown = (e) => {
if (!e.target.closest('.list2-switcher-pop') && !e.target.closest('.list2-switcher-trigger')) {
setSwitcherOpen(false);
}
};
document.addEventListener('mousedown', onDown);
return () => document.removeEventListener('mousedown', onDown);
}, [switcherOpen]);
// Close switcher on Esc.
_v2e(() => {
if (!switcherOpen) return;
const onKey = (e) => { if (e.key === 'Escape') setSwitcherOpen(false); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [switcherOpen]);
// Other-list options for the switcher list — everything the user
// owns or collaborates on (isMine !== false catches both), minus the
// currently-open one. Sorted alphabetically for predictable scanning.
const otherLists = _v2m(() => {
if (!Array.isArray(userLists)) return [];
return userLists
.filter(l => l && l.id !== root.id && l.isMine !== false)
.slice()
.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
}, [userLists, root.id]);
_v2e(() => { setDraftName(root.name); }, [root.name]);
_v2e(() => { setDraftDesc(root.description || ''); }, [root.description]);
const commitName = () => {
const v = (draftName || '').trim();
if (!v || v === root.name) { setEditingName(false); return; }
onUpdate({ name: v });
setEditingName(false);
};
// Description commits empty strings (clearing the description) as well
// as edits. Persist null when blank so the DB stays clean.
const commitDesc = () => {
const v = (draftDesc || '').trim();
const cur = (root.description || '').trim();
if (v === cur) { setEditingDesc(false); return; }
onUpdate({ description: v || null });
setEditingDesc(false);
};
// Click-outside to close the settings popover.
_v2e(() => {
if (!settingsOpen) return;
const onDown = (e) => {
if (!e.target.closest('.list2-settings-pop') && !e.target.closest('.list2-settings-btn')) {
setSettingsOpen(false);
}
};
document.addEventListener('mousedown', onDown);
return () => document.removeEventListener('mousedown', onDown);
}, [settingsOpen]);
const kindLabel = (() => {
const k = root.kind || 'private';
if (k === 'partner') return 'Shared';
if (k === 'registry') return 'Registry';
return 'Private';
})();
return (
{onShare && (
)}
{/* Activity / timeline opener. Sits next to Share so partners
naturally find it when they're already thinking "who's done
what?". The drawer itself lives inside ListDetailV2 and is
toggled via a window event so we don't have to thread state
through the header→detail props. */}
setSwitcherOpen(s => !s)}
title="Switch list or rename"
aria-haspopup="menu"
aria-expanded={switcherOpen}
>
{root.name}
▾
{switcherOpen && (
Actions
{otherLists.length > 0 && (
Jump to
{otherLists.map(l => (
))}
)}
)}
)}
{/* Description — click-to-edit, just like the name. When empty,
shows a quiet "Add a description…" placeholder the user can
click to start typing. Empty submits clear the description. */}
{editingDesc ? (