// ListItemDetailModal — opens when you tap any item in a v2 list.
//
// Handles both catalog items (where node.productId resolves to a real
// product) AND custom items (the ad-hoc blob carrying name/brand/price/
// image/sourceUrl). Surfaces the rich detail the user expects when they
// click on something they care about: the picture at full size, the
// product info, source-URL link, editable notes, pick toggle if it's
// under a slot, vote widget, and a delete action.
//
// Edit mode (custom items only) lets the user rename, change brand, edit
// price, replace the image, and edit description inline. Catalog items
// expose a "View full product" button that hands off to the existing
// ProductCard panel for retailer-search + comparison.
const { useState: _lds, useEffect: _lde, useRef: _ldr } = React;
// One canonical set of status icons + metadata, matching the heart/cart/check
// icons in the topbar. Use this map everywhere status is shown so we stay
// consistent. The DB enum is the legacy `want`/`need`/`have`; the labels are
// the user-facing Loved/Getting/Have vocabulary.
const STATUS_META = {
want: { value: 'want', label: 'Loved', tone: 'loved', ariaLabel: 'Loved' },
need: { value: 'need', label: 'Getting', tone: 'getting', ariaLabel: 'Getting' },
have: { value: 'have', label: 'Have', tone: 'have', ariaLabel: 'Have' },
};
const STATUS_ORDER = ['want', 'need', 'have'];
// Single-source-of-truth icon paths — identical to the topbar SVGs so a
// user learns the visual vocabulary once. `size` controls width+height.
function StatusIcon({ status, size = 14, filled = true, className = '' }) {
const s = status || 'want';
if (s === 'want') {
return (
);
}
if (s === 'need') {
return (
);
}
// 'have'
return (
);
}
window.StatusIcon = StatusIcon;
window.STATUS_META = STATUS_META;
window.STATUS_ORDER = STATUS_ORDER;
function ListItemDetailModal({
node,
productMap,
votes,
comments, // [{ id, author_id, body, created_at }] for this node
nameFor, // (userId) → 'You' | displayName | 'someone'
myUserId,
isUnderSlot,
rootKind,
claim, // existing registry claim if any
onClose,
onUpdate, // (patch) → persist node edits
onDelete, // () → delete node
onVote, // (vote: 'up'|'down'|null) → toggle vote
onAddComment, // (body) → post comment
onDeleteComment, // (commentId) → delete comment
onOpenFullProduct, // (product) → switch to the catalog ProductCard
}) {
if (!node) return null;
// Resolve the display fields from either catalog or custom shape.
const product = node.productId && productMap ? productMap[node.productId] : null;
const isCatalog = !!product;
const isCustom = !product && !!node.custom;
const name = product ? product.name : (node.custom && node.custom.name) || node.name || 'Item';
const brand = product ? product.brand : (node.custom && node.custom.brand) || '';
const image = product ? product.img : (node.custom && node.custom.image) || '';
// Gallery: catalog items have product.gallery; custom items get the
// list collected at paste-link time (read from localStorage by
// nodeFromRow). Falls back to [image] so we always render something.
const galleryRaw = product
? (product.gallery && product.gallery.length ? product.gallery : (image ? [image] : []))
: ((node.custom && Array.isArray(node.custom.gallery) && node.custom.gallery.length)
? node.custom.gallery
: (image ? [image] : []));
// De-dupe so the same URL doesn't show up twice (catalog + custom can
// both list the primary).
const gallery = Array.from(new Set(galleryRaw)).slice(0, 12);
const [galIdx, setGalIdx] = _lds(0);
_lde(() => { setGalIdx(0); }, [node.id]);
const hasMultiImages = gallery.length > 1;
const activeImage = gallery[Math.min(galIdx, gallery.length - 1)] || image;
const price = product ? product.price : (node.custom && node.custom.price);
const currency = product ? (product.currency || 'AUD') : (node.custom && node.custom.currency) || 'AUD';
const description = product
? (product.why || product.description || '')
: (node.custom && node.custom.description) || '';
const sourceUrl = product ? null : ((node.custom && node.custom.sourceUrl) || '');
// Edit mode — drafts mirror the live values until commit/cancel.
const [editing, setEditing] = _lds(false);
const [draftName, setDraftName ] = _lds(name);
const [draftBrand, setDraftBrand] = _lds(brand || '');
const [draftPrice, setDraftPrice] = _lds(price != null ? String(price) : '');
const [draftDesc, setDraftDesc ] = _lds(description || '');
const [imgUploading, setImgUploading] = _lds(false);
const fileRef = _ldr(null);
_lde(() => {
setDraftName(name);
setDraftBrand(brand || '');
setDraftPrice(price != null ? String(price) : '');
setDraftDesc(description || '');
}, [node.id]);
// Notes — separate from edit mode, always inline-editable.
const [notesDraft, setNotesDraft] = _lds(node.notes || '');
_lde(() => { setNotesDraft(node.notes || ''); }, [node.id, node.notes]);
const commitNotes = () => {
const v = (notesDraft || '').trim();
if (v === (node.notes || '')) return;
onUpdate({ notes: v });
};
// Esc to close
_lde(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose]);
const commitEdits = () => {
const patch = {};
const newName = (draftName || '').trim();
if (newName && newName !== name) patch.name = newName;
// For custom items, also write into the custom blob.
if (isCustom) {
const customPatch = {};
if (newName && newName !== (node.custom.name || '')) customPatch.name = newName;
const trimmedBrand = draftBrand.trim();
if (trimmedBrand !== (node.custom.brand || '')) customPatch.brand = trimmedBrand;
const priceNum = draftPrice.trim() ? Number(draftPrice) : null;
if (priceNum !== node.custom.price) customPatch.price = priceNum;
const trimmedDesc = draftDesc.trim();
if (trimmedDesc !== (node.custom.description || '')) customPatch.description = trimmedDesc;
if (Object.keys(customPatch).length > 0) patch.custom = customPatch;
}
if (Object.keys(patch).length > 0) onUpdate(patch);
setEditing(false);
};
const handleImageReplace = async (file) => {
if (!file) return;
setImgUploading(true);
try {
// uploadOrEncodeImage is a global helper (defined in tweaks-panel.jsx?).
const res = typeof uploadOrEncodeImage === 'function'
? await uploadOrEncodeImage(file)
: null;
if (res && res.url) {
const customPatch = { ...(node.custom || {}), image: res.url };
onUpdate({ custom: customPatch });
}
} finally {
setImgUploading(false);
}
};
// Vote state for the in-modal widget — also resolve voter names so
// partners know who voted what (hover the count to see).
const nodeVotes = (votes || []).filter(v => v.node_id === node.id);
const upCount = nodeVotes.filter(v => v.vote === 'up').length;
const downCount = nodeVotes.filter(v => v.vote === 'down').length;
const myVote = nodeVotes.find(v => v.voter_id === myUserId)?.vote || null;
const upNames = nodeVotes.filter(v => v.vote === 'up')
.map(v => (nameFor ? nameFor(v.voter_id) : 'someone')).join(', ');
const downNames = nodeVotes.filter(v => v.vote === 'down')
.map(v => (nameFor ? nameFor(v.voter_id) : 'someone')).join(', ');
return (
<>
{/* Big image — fills the left half on desktop, full width on phones.
When there are multiple images (from a richer og-fetch result or
catalog gallery), show prev/next arrows + a counter + a thumbnail
strip below. */}