// MedBridge — Figma-style comments backed by Supabase. // See SUPABASE_SETUP.md for schema + RLS setup. // // One CommentLayer is mounted inside every DCArtboard (patched into // design-canvas.jsx). It listens for clicks when the global comment mode is // on, drops a pin at the click position (normalised to 0..1 of the artboard), // and stores it in Supabase. Realtime subscriptions push new comments to // every connected reviewer. // // Identity: reviewer name + a deterministic colour, kept in localStorage. // No signup, no auth — appropriate for an internal review tool. const { useState: useCm, useEffect: useCe, useRef: useCr } = React; // ─── Supabase client (lazy, no-op if credentials are placeholders) ── function getSupabase() { if (typeof window.supabase === 'undefined') return null; const url = window.SUPABASE_URL; const key = window.SUPABASE_ANON_KEY; if (!url || !key) return null; if (url.includes('YOUR-PROJECT-REF') || key.includes('YOUR-ANON')) return null; if (!window.__mb_sb) { try { window.__mb_sb = window.supabase.createClient(url, key, { realtime: { params: { eventsPerSecond: 5 } }, }); } catch (e) { console.warn('[MedBridge] Supabase init failed:', e); return null; } } return window.__mb_sb; } const SB_READY = () => !!getSupabase(); // ─── Reviewer identity ────────────────────────────────────────────── const REVIEWER_HUES = ['#1F4E8C','#0F766E','#B45309','#7A5C8E','#558578','#7B6648','#A86373','#2A66A8','#8A6F8C','#4E7388']; function getReviewer() { let name = localStorage.getItem('mb_reviewer_name') || ''; let color = localStorage.getItem('mb_reviewer_color'); if (!color) { color = REVIEWER_HUES[Math.floor(Math.random() * REVIEWER_HUES.length)]; localStorage.setItem('mb_reviewer_color', color); } return { name, color }; } function setReviewerName(name) { localStorage.setItem('mb_reviewer_name', name); window.dispatchEvent(new Event('mb-reviewer-changed')); } // ─── Global comment-mode toggle (driven from Tweaks panel) ───────── function useCommentMode() { const [on, setOn] = useCm(() => !!window.__mb_comment_mode); useCe(() => { const h = (e) => setOn(!!e.detail); window.addEventListener('mb-comment-mode', h); return () => window.removeEventListener('mb-comment-mode', h); }, []); return on; } function setCommentMode(on) { window.__mb_comment_mode = on; window.dispatchEvent(new CustomEvent('mb-comment-mode', { detail: on })); } // ─── Data hook per screen ─────────────────────────────────────────── function useComments(screenId) { const [comments, setComments] = useCm([]); const [loaded, setLoaded] = useCm(false); useCe(() => { const sb = getSupabase(); if (!sb || !screenId) { setLoaded(true); return; } let alive = true; (async () => { const { data, error } = await sb .from('comments') .select('*, replies:comment_replies(*)') .eq('screen_id', screenId) .order('created_at', { ascending: true }); if (!alive) return; if (error) console.warn('[MedBridge] load comments failed:', error); setComments(data || []); setLoaded(true); })(); const channel = sb.channel(`comments:${screenId}`) .on('postgres_changes', { event: '*', schema: 'public', table: 'comments', filter: `screen_id=eq.${screenId}` }, (payload) => { if (!alive) return; if (payload.eventType === 'INSERT') { setComments(c => c.some(x => x.id === payload.new.id) ? c : [...c, { ...payload.new, replies: [] }]); } else if (payload.eventType === 'UPDATE') { setComments(c => c.map(x => x.id === payload.new.id ? { ...x, ...payload.new } : x)); } else if (payload.eventType === 'DELETE') { setComments(c => c.filter(x => x.id !== payload.old.id)); } }) .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'comment_replies' }, (payload) => { if (!alive) return; setComments(c => c.map(x => x.id === payload.new.comment_id ? { ...x, replies: [...(x.replies || []), payload.new] } : x )); }) .subscribe(); return () => { alive = false; sb.removeChannel(channel); }; }, [screenId]); const addComment = async (x, y, body, reviewer) => { const sb = getSupabase(); if (!sb) return null; const { data, error } = await sb.from('comments').insert({ screen_id: screenId, x, y, body, author_name: reviewer.name, author_color: reviewer.color, }).select().single(); if (error) { console.warn('[MedBridge] insert comment failed:', error); return null; } // Optimistic; realtime will dedupe via the `some()` check above. setComments(c => c.some(x => x.id === data.id) ? c : [...c, { ...data, replies: [] }]); return data; }; const addReply = async (commentId, body, reviewer) => { const sb = getSupabase(); if (!sb) return; const { data, error } = await sb.from('comment_replies').insert({ comment_id: commentId, body, author_name: reviewer.name, author_color: reviewer.color, }).select().single(); if (error) { console.warn('[MedBridge] insert reply failed:', error); return; } setComments(c => c.map(x => x.id === commentId && !(x.replies || []).some(r => r.id === data.id) ? { ...x, replies: [...(x.replies || []), data] } : x )); }; const toggleResolve = async (id, resolved) => { const sb = getSupabase(); if (!sb) return; await sb.from('comments').update({ resolved: !resolved }).eq('id', id); }; const deleteComment = async (id) => { const sb = getSupabase(); if (!sb) return; await sb.from('comments').delete().eq('id', id); }; return { comments, loaded, addComment, addReply, toggleResolve, deleteComment }; } // ─── A single pin + its open thread ───────────────────────────────── function CommentPin({ comment, index, open, onOpen, onClose, onReply, onToggleResolve, onDelete, reviewer }) { const [draft, setDraft] = useCm(''); const replies = comment.replies || []; const initials = (comment.author_name || '?').trim().split(/\s+/).map(s => s[0]).filter(Boolean).slice(0,2).join('').toUpperCase(); // Decide which side the thread opens on so it doesn't fall off the edge. const openRight = comment.x < 0.5; const submit = (e) => { e?.preventDefault(); if (!draft.trim()) return; if (!reviewer.name) { const n = prompt('Ihr Name (wird mit Kommentaren angezeigt):', ''); if (!n) return; setReviewerName(n.trim()); } onReply(draft.trim()); setDraft(''); }; return ( <> {open && (
e.stopPropagation()} style={{ position: 'absolute', left: `${comment.x * 100}%`, top: `${comment.y * 100}%`, transform: `translate(${openRight ? '20px' : 'calc(-100% - 20px)'}, -8px)`, width: 280, maxWidth: 280, pointerEvents: 'auto', zIndex: 200, background: 'rgba(255,255,255,0.96)', WebkitBackdropFilter: 'blur(20px) saturate(180%)', backdropFilter: 'blur(20px) saturate(180%)', border: '0.5px solid rgba(255,255,255,0.8)', borderRadius: 14, boxShadow: '0 1px 0 rgba(255,255,255,0.6) inset, 0 16px 40px rgba(15,27,45,0.22), 0 1px 2px rgba(15,27,45,0.08)', fontFamily: '-apple-system, system-ui, sans-serif', fontSize: 13, color: '#0F1B2D', overflow: 'hidden', }}>
{comment.body}
{replies.map((r) => (
s[0]).filter(Boolean).slice(0,2).join('').toUpperCase()} />
{r.body}
))}