486 lines
12 KiB
TypeScript
486 lines
12 KiB
TypeScript
/**
|
|
* <rstack-comment-bell> — Comment button with dropdown panel.
|
|
*
|
|
* Shows a chat-bubble icon in the header bar. Badge displays the count
|
|
* of unresolved comment pins on the current canvas. Clicking toggles a
|
|
* dropdown panel showing all comment threads, sorted by most recent
|
|
* message. Includes a "New Comment" button to enter pin-placement mode.
|
|
*
|
|
* Data source: `window.__communitySync?.doc?.commentPins`
|
|
* Listens for `comment-pins-changed` on `window` (re-dispatched by canvas).
|
|
* Polls every 5s as fallback (sync may appear after component mounts).
|
|
*/
|
|
|
|
const POLL_INTERVAL = 5_000;
|
|
|
|
interface CommentMessage {
|
|
text: string;
|
|
createdBy: string;
|
|
createdByName?: string;
|
|
createdAt: number;
|
|
}
|
|
|
|
interface CommentPinData {
|
|
messages: CommentMessage[];
|
|
anchor?: { x: number; y: number };
|
|
resolved?: boolean;
|
|
createdBy?: string;
|
|
createdByName?: string;
|
|
createdAt?: number;
|
|
}
|
|
|
|
export class RStackCommentBell extends HTMLElement {
|
|
#shadow: ShadowRoot;
|
|
#count = 0;
|
|
#open = false;
|
|
#pollTimer: ReturnType<typeof setInterval> | null = null;
|
|
#syncRef: any = null;
|
|
|
|
constructor() {
|
|
super();
|
|
this.#shadow = this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.#render();
|
|
this.#syncRef = (window as any).__communitySync || null;
|
|
this.#refreshCount();
|
|
this.#pollTimer = setInterval(() => this.#refreshCount(), POLL_INTERVAL);
|
|
window.addEventListener("comment-pins-changed", this.#onPinsChanged);
|
|
document.addEventListener("community-sync-ready", this.#onSyncReady);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.#pollTimer) clearInterval(this.#pollTimer);
|
|
window.removeEventListener("comment-pins-changed", this.#onPinsChanged);
|
|
document.removeEventListener("community-sync-ready", this.#onSyncReady);
|
|
}
|
|
|
|
#onSyncReady = (e: Event) => {
|
|
const sync = (e as CustomEvent).detail?.sync;
|
|
if (sync) {
|
|
this.#syncRef = sync;
|
|
this.#refreshCount();
|
|
}
|
|
};
|
|
|
|
#onPinsChanged = () => {
|
|
this.#refreshCount();
|
|
if (this.#open) this.#render();
|
|
};
|
|
|
|
#refreshCount() {
|
|
const sync = this.#syncRef || (window as any).__communitySync;
|
|
if (sync && !this.#syncRef) this.#syncRef = sync;
|
|
const pins = sync?.doc?.commentPins;
|
|
if (!pins) {
|
|
if (this.#count !== 0) {
|
|
this.#count = 0;
|
|
this.#updateBadge();
|
|
}
|
|
return;
|
|
}
|
|
const newCount = Object.values(pins).filter(
|
|
(p: any) => !p.resolved
|
|
).length;
|
|
if (newCount !== this.#count) {
|
|
this.#count = newCount;
|
|
this.#updateBadge();
|
|
}
|
|
}
|
|
|
|
#togglePanel() {
|
|
this.#open = !this.#open;
|
|
this.#render();
|
|
}
|
|
|
|
#getPins(): [string, CommentPinData][] {
|
|
const sync = this.#syncRef || (window as any).__communitySync;
|
|
const pins = sync?.doc?.commentPins;
|
|
if (!pins) return [];
|
|
|
|
const entries = Object.entries(pins) as [string, CommentPinData][];
|
|
// Sort by most recent message timestamp, descending
|
|
entries.sort((a, b) => {
|
|
const aTime = this.#latestMessageTime(a[1]);
|
|
const bTime = this.#latestMessageTime(b[1]);
|
|
return bTime - aTime;
|
|
});
|
|
return entries.slice(0, 50);
|
|
}
|
|
|
|
#latestMessageTime(pin: CommentPinData): number {
|
|
if (!pin.messages || pin.messages.length === 0) return pin.createdAt || 0;
|
|
return Math.max(...pin.messages.map(m => m.createdAt || 0));
|
|
}
|
|
|
|
#timeAgo(ts: number): string {
|
|
if (!ts) return "";
|
|
const diff = Date.now() - ts;
|
|
const mins = Math.floor(diff / 60_000);
|
|
if (mins < 1) return "just now";
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs < 24) return `${hrs}h ago`;
|
|
const days = Math.floor(hrs / 24);
|
|
return `${days}d ago`;
|
|
}
|
|
|
|
#esc(s: string): string {
|
|
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
}
|
|
|
|
#truncate(s: string, max = 80): string {
|
|
if (s.length <= max) return s;
|
|
return s.slice(0, max) + "\u2026";
|
|
}
|
|
|
|
#render() {
|
|
const badge = this.#count > 0
|
|
? `<span class="badge">${this.#count > 99 ? "99+" : this.#count}</span>`
|
|
: "";
|
|
|
|
let panelHTML = "";
|
|
if (this.#open) {
|
|
const pins = this.#getPins();
|
|
const header = `
|
|
<div class="panel-header">
|
|
<span class="panel-title">Comments</span>
|
|
<button class="new-comment-btn" data-action="new-comment">+ New Comment</button>
|
|
</div>
|
|
`;
|
|
|
|
let body: string;
|
|
if (pins.length === 0) {
|
|
body = `<div class="panel-empty">No comments yet</div>`;
|
|
} else {
|
|
body = pins.map(([pinId, pin]) => {
|
|
const lastMsg = pin.messages?.[pin.messages.length - 1];
|
|
const authorName = lastMsg?.createdByName || pin.createdByName || "Unknown";
|
|
const initial = authorName.charAt(0).toUpperCase();
|
|
const text = lastMsg?.text || "(no message)";
|
|
const time = this.#timeAgo(this.#latestMessageTime(pin));
|
|
const threadCount = (pin.messages?.length || 0);
|
|
const resolvedBadge = pin.resolved
|
|
? `<span class="resolved-badge">Resolved</span>`
|
|
: `<span class="open-badge">Open</span>`;
|
|
|
|
return `
|
|
<div class="comment-item ${pin.resolved ? "resolved" : ""}" data-pin-id="${this.#esc(pinId)}">
|
|
<div class="comment-avatar">${initial}</div>
|
|
<div class="comment-content">
|
|
<div class="comment-top">
|
|
<span class="comment-author">${this.#esc(authorName)}</span>
|
|
${resolvedBadge}
|
|
</div>
|
|
<div class="comment-text">${this.#esc(this.#truncate(text))}</div>
|
|
<div class="comment-meta">
|
|
${threadCount > 1 ? `<span class="thread-count">${threadCount} messages</span>` : ""}
|
|
<span class="comment-time">${time}</span>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}).join("");
|
|
}
|
|
|
|
panelHTML = `<div class="panel">${header}<div class="panel-body">${body}</div></div>`;
|
|
}
|
|
|
|
this.#shadow.innerHTML = `
|
|
<style>${STYLES}</style>
|
|
<div class="bell-wrapper">
|
|
<button class="comment-btn" id="comment-toggle" aria-label="Comments" title="Comments">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>
|
|
</svg>
|
|
${badge}
|
|
</button>
|
|
${panelHTML}
|
|
</div>
|
|
`;
|
|
|
|
// Toggle button
|
|
this.#shadow.getElementById("comment-toggle")?.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
this.#togglePanel();
|
|
});
|
|
|
|
// Close on outside click
|
|
if (this.#open) {
|
|
const closeHandler = () => {
|
|
if (this.#open) {
|
|
this.#open = false;
|
|
this.#render();
|
|
}
|
|
};
|
|
document.addEventListener("pointerdown", closeHandler, { once: true });
|
|
|
|
// Stop propagation from panel clicks
|
|
this.#shadow.querySelector(".panel")?.addEventListener("pointerdown", (e) => e.stopPropagation());
|
|
}
|
|
|
|
// New Comment button
|
|
this.#shadow.querySelector('[data-action="new-comment"]')?.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
this.#open = false;
|
|
this.#render();
|
|
window.dispatchEvent(new CustomEvent("comment-pin-activate"));
|
|
});
|
|
|
|
// Comment item clicks — focus the pin on canvas
|
|
this.#shadow.querySelectorAll(".comment-item").forEach((el) => {
|
|
el.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
const pinId = (el as HTMLElement).dataset.pinId;
|
|
if (pinId) {
|
|
this.#open = false;
|
|
this.#render();
|
|
window.dispatchEvent(new CustomEvent("comment-pin-focus", { detail: { pinId } }));
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/** Lightweight badge update when panel is closed. */
|
|
#updateBadge() {
|
|
if (this.#open) {
|
|
this.#render();
|
|
return;
|
|
}
|
|
const badge = this.#shadow.querySelector(".badge") as HTMLElement | null;
|
|
if (!badge && this.#count > 0) {
|
|
// Need full re-render to add badge
|
|
this.#render();
|
|
return;
|
|
}
|
|
if (badge) {
|
|
if (this.#count > 0) {
|
|
badge.textContent = this.#count > 99 ? "99+" : String(this.#count);
|
|
badge.style.display = "";
|
|
} else {
|
|
badge.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
static define(tag = "rstack-comment-bell") {
|
|
if (!customElements.get(tag)) customElements.define(tag, RStackCommentBell);
|
|
}
|
|
}
|
|
|
|
const STYLES = `
|
|
:host {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bell-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.comment-btn {
|
|
position: relative;
|
|
background: none;
|
|
border: none;
|
|
color: var(--rs-text-muted, #94a3b8);
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
.comment-btn:hover, .comment-btn:active {
|
|
color: var(--rs-text-primary, #e2e8f0);
|
|
background: var(--rs-bg-hover, rgba(255,255,255,0.05));
|
|
}
|
|
|
|
.badge {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
border-radius: 8px;
|
|
background: #ef4444;
|
|
color: white;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
line-height: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.panel {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
margin-top: 8px;
|
|
width: 380px;
|
|
max-height: 480px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 10px;
|
|
background: var(--rs-bg-surface, #1e293b);
|
|
border: 1px solid var(--rs-border, rgba(255,255,255,0.1));
|
|
box-shadow: var(--rs-shadow-lg, 0 8px 30px rgba(0,0,0,0.3));
|
|
z-index: 200;
|
|
animation: dropDown 0.15s ease;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
@keyframes dropDown {
|
|
from { opacity: 0; transform: translateY(-6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--rs-border, rgba(255,255,255,0.1));
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--rs-text-primary, #e2e8f0);
|
|
}
|
|
|
|
.new-comment-btn {
|
|
background: linear-gradient(135deg, #14b8a6, #0d9488);
|
|
border: none;
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
padding: 5px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.new-comment-btn:hover, .new-comment-btn:active {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.panel-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
.panel-empty {
|
|
padding: 32px 16px;
|
|
text-align: center;
|
|
color: var(--rs-text-muted, #94a3b8);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.comment-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 10px 16px;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
border-bottom: 1px solid var(--rs-border, rgba(255,255,255,0.06));
|
|
}
|
|
.comment-item:hover, .comment-item:active {
|
|
background: var(--rs-bg-hover, rgba(255,255,255,0.05));
|
|
}
|
|
.comment-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.comment-item.resolved {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.comment-avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: rgba(20,184,166,0.15);
|
|
color: #14b8a6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 0.75rem;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.comment-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.comment-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.comment-author {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--rs-text-primary, #e2e8f0);
|
|
}
|
|
|
|
.resolved-badge, .open-badge {
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
padding: 1px 5px;
|
|
border-radius: 9999px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.resolved-badge {
|
|
background: rgba(148,163,184,0.15);
|
|
color: #94a3b8;
|
|
}
|
|
.open-badge {
|
|
background: rgba(20,184,166,0.15);
|
|
color: #14b8a6;
|
|
}
|
|
|
|
.comment-text {
|
|
font-size: 0.78rem;
|
|
color: var(--rs-text-secondary, #cbd5e1);
|
|
line-height: 1.35;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comment-meta {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 3px;
|
|
font-size: 0.68rem;
|
|
color: var(--rs-text-muted, #64748b);
|
|
}
|
|
|
|
.thread-count {
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.comment-btn { display: none; }
|
|
.panel {
|
|
position: fixed;
|
|
top: 60px;
|
|
right: 8px;
|
|
left: 8px;
|
|
width: auto;
|
|
max-height: calc(100vh - 80px);
|
|
}
|
|
}
|
|
`;
|