// Shared comment system for wireframe pages // Requires: React 18+, Babel standalone (for JSX) // Backend: /api/comments (Cloudflare Pages Function in functions/api/comments.js) const { useState: _csUseState, useEffect: _csUseEffect, useRef: _csUseRef, useCallback: _csUseCallback } = React; // ═══════════════════════════════════════════════════════════════ // useComments hook // ═══════════════════════════════════════════════════════════════ function useComments(pageId) { const [comments, setComments] = _csUseState([]); const [commentMode, setCommentMode] = _csUseState(false); const [activeThread, setActiveThread] = _csUseState(null); const [authorName, setAuthorName] = _csUseState( () => localStorage.getItem('__comment_author') || '' ); // Load from localStorage on mount _csUseEffect(() => { try { const stored = localStorage.getItem('__comments_' + pageId); if (stored) setComments(JSON.parse(stored)); } catch (e) {} }, [pageId]); // Persist to localStorage on change _csUseEffect(() => { localStorage.setItem('__comments_' + pageId, JSON.stringify(comments)); }, [comments, pageId]); // Persist author name _csUseEffect(() => { if (authorName) localStorage.setItem('__comment_author', authorName); }, [authorName]); // API sync (attempts fetch, falls back silently to localStorage-only) _csUseEffect(() => { const fetchComments = async () => { try { const res = await fetch('/api/comments?page=' + encodeURIComponent(pageId)); if (res.ok) { const data = await res.json(); if (data.comments && data.comments.length) { setComments(prev => mergeComments(prev, data.comments)); } } } catch (e) {} }; fetchComments(); const interval = setInterval(fetchComments, 15000); return () => clearInterval(interval); }, [pageId]); function mergeComments(local, remote) { const map = {}; local.forEach(c => { map[c.id] = c; }); remote.forEach(c => { const existing = map[c.id]; if (!existing) { map[c.id] = c; } else if (c.messages.length > existing.messages.length) { map[c.id] = c; } else if (c.resolved !== existing.resolved && c.resolvedAt > (existing.resolvedAt || '')) { map[c.id] = c; } }); return Object.values(map).sort((a, b) => a.createdAt < b.createdAt ? -1 : 1); } const needsSyncRef = _csUseRef(false); _csUseEffect(() => { if (!needsSyncRef.current) return; needsSyncRef.current = false; fetch('/api/comments', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ page: pageId, comments: comments }) }).catch(() => {}); }, [comments, pageId]); function markDirty() { needsSyncRef.current = true; } const placeComment = _csUseCallback((tabId, xPct, yPct) => { const id = 'c_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8); const newComment = { id, tabId, xPct, yPct, messages: [], resolved: false, resolvedAt: null, createdAt: new Date().toISOString() }; setComments(prev => { markDirty(); return [...prev, newComment]; }); setActiveThread(id); setCommentMode(false); }, [pageId]); const addMessage = _csUseCallback((commentId, text) => { if (!text.trim()) return; const msg = { id: 'm_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8), author: authorName || 'Anonymous', text: text.trim(), timestamp: new Date().toISOString() }; setComments(prev => { markDirty(); return prev.map(c => c.id === commentId ? { ...c, messages: [...c.messages, msg] } : c); }); }, [authorName, pageId]); const resolveComment = _csUseCallback((commentId) => { setComments(prev => { markDirty(); return prev.map(c => c.id === commentId ? { ...c, resolved: !c.resolved, resolvedAt: new Date().toISOString() } : c); }); }, [pageId]); const deleteComment = _csUseCallback((commentId) => { setComments(prev => { markDirty(); return prev.filter(c => c.id !== commentId); }); setActiveThread(null); }, [pageId]); return { items: comments, commentMode, activeThread, authorName, unresolvedCount: comments.filter(c => !c.resolved).length, toggleCommentMode: () => { setCommentMode(m => !m); setActiveThread(null); }, selectThread: (id) => { setActiveThread(id === activeThread ? null : id); setCommentMode(false); }, closeThread: () => setActiveThread(null), placeComment, addMessage, resolveComment, deleteComment, setAuthorName }; } // ─── Comment Pin ───────────────────────────────────────────── function CommentPin({ number, x, y, active, resolved, onClick }) { return (
{ e.stopPropagation(); onClick(); }} style={{ position: 'absolute', left: x + '%', top: y + '%', transform: 'translate(-50%, -50%)', width: 28, height: 28, borderRadius: '50% 48% 52% 50% / 48% 52% 50% 48%', background: active ? 'var(--red-soft)' : resolved ? 'var(--paper-2)' : 'var(--red-soft)', border: active ? '2.5px solid var(--red)' : resolved ? '1.5px dashed var(--ink-faint)' : '2px solid var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Helvetica, Arial, sans-serif', fontSize: 12, fontWeight: 700, color: resolved ? 'var(--ink-faint)' : 'var(--ink)', cursor: 'pointer', boxShadow: active ? '3px 3px 0 rgba(26,24,20,0.25)' : 'var(--shadow)', zIndex: active ? 1001 : 1000, opacity: resolved ? 0.5 : 1, transition: 'transform 100ms, box-shadow 100ms', pointerEvents: 'auto' }} onMouseEnter={(e) => { e.currentTarget.style.transform = 'translate(-50%, -50%) scale(1.15)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translate(-50%, -50%)'; }} > {number}
); } // ─── Comment Thread Popover ────────────────────────────────── function CommentThread({ comment, number, onAddMessage, onResolve, onDelete, onClose, authorName, onAuthorChange }) { const [text, setText] = _csUseState(''); const messagesRef = _csUseRef(null); _csUseEffect(() => { if (messagesRef.current) messagesRef.current.scrollTop = messagesRef.current.scrollHeight; }, [comment.messages.length]); _csUseEffect(() => { const handler = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, [onClose]); const submit = () => { if (!text.trim()) return; onAddMessage(comment.id, text); setText(''); onClose(); }; return (
= 75 ? 'calc(100% + 12px)' : 'auto', top: 0, width: 280, background: 'var(--paper)', border: '2px solid var(--ink)', borderRadius: '6px 8px 5px 9px / 8px 5px 9px 6px', boxShadow: '3px 3px 0 rgba(26,24,20,0.18)', zIndex: 1002, fontFamily: 'Helvetica, Arial, sans-serif', fontSize: 13, overflow: 'hidden', pointerEvents: 'auto' }} onClick={(e) => e.stopPropagation()}> {/* Header */}
Comment #{number}
{/* Messages */}
{comment.messages.length === 0 && (
No messages yet — add the first comment below.
)} {comment.messages.map((msg) => (
{msg.author} {new Date(msg.timestamp).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
{msg.text}
))}
{/* Input */}
onAuthorChange(e.target.value)} style={{ width: '100%', marginBottom: 6, padding: '4px 8px', border: '1.2px solid var(--ink-soft)', borderRadius: '3px 5px 3px 5px', background: 'var(--paper)', fontFamily: 'Helvetica, Arial, sans-serif', fontSize: 12, outline: 'none' }} />