} {dropMode &&

Click anywhere to drop a pin · Esc to cancel

} {pendingPin && ( )} {!dropMode && !pendingPin && ( )} {open && !dropMode && !pendingPin && (

{selectedThread ? "Thread" : ("Feedback · " + currentUser.display_name)}

{!selectedThread && ( <>

{tab === "pins" && ( <>

page: {route}

{pins.length === 0 &&

No pins on this page yet. Drop one to leave a callout.

} {pins.map(function(p){ return ; })} )} {tab === "notes" && ( <>

{composeNoteScope && ( )} {pageNotes.length > 0 &&

For this page ({route})

} {pageNotes.map(function(n){ return ; })} {siteNotes.length > 0 &&

Site-wide

} {siteNotes.map(function(n){ return ; })} {pageNotes.length + siteNotes.length === 0 && !composeNoteScope && (

No general notes yet. Use page notes for things like "mobile optimization needed", or site-wide for cross-cutting issues.

)} )}

)} {selectedThread && ( )}

)} ); } function PinDot({ pin, num, replies, currentUser, onClick }) { const pageW = document.documentElement.scrollWidth; const x = (Number(pin.x_pct || 0) / 100) * pageW; const y = Number(pin.page_y_px || 0); const directedAt = isDirectedAt(pin.message, currentUser.display_name) || replies.some(function(r){ return isDirectedAt(r.message, currentUser.display_name); }); let cls = "mm-fb-pin"; if (pin.status === "resolved") cls += " resolved"; if (directedAt) cls += " directed"; return ( ); } function ItemCard({ item, label, replyCount, onOpen }) { const isPin = item.kind === "pin"; return (

{label} {item.username} {fmtTime(item.created_at)} {replyCount > 0 && · {replyCount} {replyCount === 1 ? "reply" : "replies"}} {item.status === "resolved" && · ✓ resolved}

{renderMessageWithMentions(item.message)}

{item.anchor_text &&

near: "{item.anchor_text}"

}

); } function MessageEditor({ initial, onSave, onCancel }) { const [v, setV] = useState(initial || ""); return (

<div className="actions">
          <button className="mm-fb-btn ghost" style={{ fontSize: 11, padding: "3px 10px" }} onClick={onCancel}>Cancel</button>
          <button className="mm-fb-btn primary" style={{ fontSize: 11, padding: "3px 10px" }} disabled={!v.trim()}
            onClick={async function(){ const ok = await onSave(v.trim()); if (ok) onCancel(); }}>Save</button>
        </div>
      </div>
    );
  }

{replies.map(function(r){
            const directed = isDirectedAt(r.message, currentUser.display_name);
            const replyLabel = (numMap && numMap[r.id]) || "";
            return (
              <div key={r.id} className={"mm-fb-reply" + (directed ? " directed" : "")}>
                <div style={{ display: "flex", gap: 8, fontSize: 11, color: "var(--text-3,#8A8A86)", fontFamily: "var(--font-mono,'JetBrains Mono'),monospace", flexWrap: "wrap", alignItems: "center" }}>
                  <span className="mm-fb-id">{replyLabel}</span>
                  <span style={{ fontWeight: 600, color: "var(--text-2,#4A4A48)" }}>{r.username}</span>
                  <span>{fmtTime(r.created_at)}</span>
                  {directed && <span style={{ color: "var(--mm-red,#E2231A)", fontWeight: 600 }}>· directed at you</span>}
                </div>
                {editingId === r.id ? (
                  <MessageEditor initial={r.message}
                    onCancel={function(){ setEditingId(null); }}
                    onSave={async function(msg){ return await onEdit(r.id, msg); }} />
                ) : (
                  <>
                    <div style={{ fontSize: 13, marginTop: 2, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
                      {renderMessageWithMentions(r.message)}
                    </div>
                    {canDelete(r) && (
                      <div className="mm-fb-item-actions">
                        <button onClick={function(){ setEditingId(r.id); }}>Edit</button>
                        <button className="danger" onClick={function(){ onDelete(r.id); }}>Delete</button>
                      </div>
                    )}
                  </>
                )}
              </div>
            );
          })}
        </div>

<ReplyCompose users={users} currentUser={currentUser} parentId={thread.id} onSubmit={onReply} />
      </>
    );
  }

const MentionTextarea = React.forwardRef(function MentionTextarea({ users, value, onChange, placeholder }, ref) {
    const localRef = useRef(null);
    const taRef = ref || localRef;
    const [active, setActive] = useState(false);
    const [filter, setFilter] = useState("");
    const [highlight, setHighlight] = useState(0);
    const [mentionStart, setMentionStart] = useState(-1);
    const [dropdownPos, setDropdownPos] = useState(null);

useEffect(function(){
      if (!active || !taRef.current) { setDropdownPos(null); return; }
      const update = function(){
        if (!taRef.current) return;
        const r = taRef.current.getBoundingClientRect();
        setDropdownPos({ left: r.left, bottom: window.innerHeight - r.top + 4, width: r.width });
      };
      update();
      window.addEventListener("resize", update);
      window.addEventListener("scroll", update, true);
      return function(){
        window.removeEventListener("resize", update);
        window.removeEventListener("scroll", update, true);
      };
    }, [active, value]);

const matches = useMemo(function(){
      if (!active) return [];
      const q = filter.toLowerCase();
      return users.filter(function(u){ return (u.display_name || "").toLowerCase().includes(q); }).slice(0, 5);
    }, [users, filter, active]);

const insertMention = function(name) {
      const ta = taRef.current;
      if (!ta) return;
      const cursor = ta.selectionStart;
      const before = value.slice(0, mentionStart);
      const after = value.slice(cursor);
      const mention = name.indexOf(" ") >= 0 ? ("@\"" + name + "\"") : ("@" + name);
      const next = before + mention + " " + after;
      onChange(next);
      setActive(false);
      requestAnimationFrame(function(){
        const pos = (before + mention + " ").length;
        ta.setSelectionRange(pos, pos);
        ta.focus();
      });
    };

return (
      <div style={{ position: "relative", padding: 12 }}>
        <textarea ref={taRef} value={value} onChange={onInput} onKeyDown={onKeyDown}
          placeholder={placeholder}
          style={{ width:"100%", minHeight: 70, resize: "vertical", padding: "8px 10px",
            border: "1px solid var(--border,#E5E5E0)", borderRadius: 8, background: "var(--bg,#fff)",
            color: "var(--text,#0E0E0E)", fontFamily: "inherit", fontSize: 13, lineHeight: 1.4 }} />
        {active && matches.length > 0 && dropdownPos && (
          <div className="mm-fb-mention-list" style={{
            position: "fixed",
            left: dropdownPos.left + "px",
            bottom: dropdownPos.bottom + "px",
            width: dropdownPos.width + "px",
            right: "auto",
            top: "auto"
          }}>
            {matches.map(function(u, i){
              return (
                <button key={u.id} className={i === highlight ? "active" : ""}
                  onMouseDown={function(e){ e.preventDefault(); insertMention(u.display_name); }}>
                  @{u.display_name}<span style={{ color: "var(--text-3,#8A8A86)", marginLeft: 8, fontSize: 11 }}>{u.email}</span>
                </button>
              );
            })}
          </div>
        )}
      </div>
    );
  });

})();