From f966f02909a127eb0ae3ba7269a5bafbd2668428 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Wed, 25 Mar 2026 20:03:52 -0700 Subject: [PATCH] feat(spaces,rsocials): invite-based member adds + clickable campaign content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Space invites: Convert both username-add and email-invite (existing user) paths from direct-add to invite flow — creates space_invite via EncryptID, sends invite email with Accept button, dispatches space_invite notification with Accept/Decline buttons in the notification bell. No one gets forcefully added to a space anymore. rSocials content linking: All generated campaign content now links through to actual editable content. Draft post cards in thread gallery are clickable (thread editor or campaign view). Campaign manager post cards expand on click and thread badges link to thread editor. Wizard success screen shows individual thread links. CampaignPost schema gains threadId field, stored on commit so posts maintain their thread association. Also includes canvas social media tools, social shape components (folk-social-thread, folk-social-campaign, folk-social-newsletter), and MI context-aware suggestion registry. Co-Authored-By: Claude Opus 4.6 --- lib/canvas-tools.ts | 107 +++++ lib/folk-social-campaign.ts | 395 ++++++++++++++++++ lib/folk-social-newsletter.ts | 354 ++++++++++++++++ lib/folk-social-thread.ts | 394 +++++++++++++++++ lib/index.ts | 3 + lib/mi-suggestions.ts | 113 +++++ .../components/folk-campaign-manager.ts | 67 ++- .../components/folk-campaign-wizard.ts | 7 +- .../components/folk-thread-gallery.ts | 9 +- modules/rsocials/mod.ts | 11 +- modules/rsocials/schemas.ts | 1 + server/notification-service.ts | 1 + server/spaces.ts | 189 ++++----- shared/components/rstack-notification-bell.ts | 93 ++++- shared/components/rstack-space-settings.ts | 27 +- 15 files changed, 1646 insertions(+), 125 deletions(-) create mode 100644 lib/folk-social-campaign.ts create mode 100644 lib/folk-social-newsletter.ts create mode 100644 lib/folk-social-thread.ts create mode 100644 lib/mi-suggestions.ts diff --git a/lib/canvas-tools.ts b/lib/canvas-tools.ts index 8e6579d..a4d8dad 100644 --- a/lib/canvas-tools.ts +++ b/lib/canvas-tools.ts @@ -281,6 +281,113 @@ const registry: CanvasToolDefinition[] = [ }, ]; +// ── Social Media / Campaign Tools ── +registry.push( + { + declaration: { + name: "create_social_post", + description: "Create a social media post card for scheduling across platforms.", + parameters: { + type: "object", + properties: { + platform: { type: "string", description: "Target platform", enum: ["x", "linkedin", "instagram", "youtube", "threads", "bluesky", "tiktok", "facebook"] }, + content: { type: "string", description: "Post text content" }, + postType: { type: "string", description: "Format", enum: ["text", "image", "video", "carousel", "thread", "article"] }, + scheduledAt: { type: "string", description: "ISO datetime to schedule" }, + hashtags: { type: "string", description: "Comma-separated hashtags" }, + }, + required: ["platform", "content"], + }, + }, + tagName: "folk-social-post", + buildProps: (args) => ({ + platform: args.platform || "x", + content: args.content, + postType: args.postType || "text", + scheduledAt: args.scheduledAt || "", + hashtags: args.hashtags ? args.hashtags.split(",").map((t: string) => t.trim()).filter(Boolean) : [], + status: "draft", + }), + actionLabel: (args) => `Created ${args.platform || "social"} post`, + }, + { + declaration: { + name: "create_social_thread", + description: "Create a tweet thread card on the canvas. Use when the user wants to draft a multi-tweet thread.", + parameters: { + type: "object", + properties: { + title: { type: "string", description: "Thread title" }, + platform: { type: "string", description: "Target platform", enum: ["x", "bluesky", "threads"] }, + tweetsJson: { type: "string", description: "JSON array of tweet strings" }, + status: { type: "string", description: "Thread status", enum: ["draft", "ready", "published"] }, + }, + required: ["title"], + }, + }, + tagName: "folk-social-thread", + buildProps: (args) => { + let tweets: string[] = []; + try { tweets = JSON.parse(args.tweetsJson || "[]"); } catch { tweets = []; } + return { + title: args.title, + platform: args.platform || "x", + tweets, + status: args.status || "draft", + }; + }, + actionLabel: (args) => `Created thread: ${args.title}`, + }, + { + declaration: { + name: "create_campaign_card", + description: "Create a campaign dashboard card on the canvas. Use when the user wants to plan or track a social media campaign.", + parameters: { + type: "object", + properties: { + title: { type: "string", description: "Campaign title" }, + description: { type: "string", description: "Campaign description" }, + platforms: { type: "string", description: "Comma-separated platform names" }, + duration: { type: "string", description: "Campaign duration (e.g. '4 weeks')" }, + }, + required: ["title"], + }, + }, + tagName: "folk-social-campaign", + buildProps: (args) => ({ + title: args.title, + description: args.description || "", + platforms: args.platforms ? args.platforms.split(",").map((p: string) => p.trim().toLowerCase()).filter(Boolean) : [], + duration: args.duration || "", + }), + actionLabel: (args) => `Created campaign: ${args.title}`, + }, + { + declaration: { + name: "create_newsletter_card", + description: "Create a newsletter/email campaign card on the canvas. Use when the user wants to draft or schedule an email newsletter.", + parameters: { + type: "object", + properties: { + subject: { type: "string", description: "Email subject line" }, + listName: { type: "string", description: "Mailing list name" }, + status: { type: "string", description: "Newsletter status", enum: ["draft", "scheduled", "sent"] }, + scheduledAt: { type: "string", description: "ISO datetime to schedule" }, + }, + required: ["subject"], + }, + }, + tagName: "folk-social-newsletter", + buildProps: (args) => ({ + subject: args.subject, + listName: args.listName || "", + status: args.status || "draft", + scheduledAt: args.scheduledAt || "", + }), + actionLabel: (args) => `Created newsletter: ${args.subject}`, + }, +); + // ── Design Agent Tool ── registry.push({ declaration: { diff --git a/lib/folk-social-campaign.ts b/lib/folk-social-campaign.ts new file mode 100644 index 0000000..da61643 --- /dev/null +++ b/lib/folk-social-campaign.ts @@ -0,0 +1,395 @@ +import { FolkShape } from "./folk-shape"; +import { css, html } from "./tags"; + +const PLATFORM_ICONS: Record = { + x: "𝕏", linkedin: "in", instagram: "📷", youtube: "▶", + threads: "@", bluesky: "🩷", tiktok: "♫", facebook: "f", +}; + +const styles = css` + :host { + background: var(--rs-bg-surface, #fff); + color: var(--rs-text-primary, #1e293b); + border-radius: 12px; + box-shadow: var(--rs-shadow-sm); + min-width: 280px; + min-height: 140px; + overflow: hidden; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + } + + :host(:hover) { + box-shadow: var(--rs-shadow-md); + } + + .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + cursor: move; + color: white; + border-radius: 12px 12px 0 0; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + } + + .header-left { + display: flex; + align-items: center; + gap: 8px; + } + + .header-icon { + font-size: 18px; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.2); + border-radius: 6px; + } + + .header-title { + font-size: 13px; + font-weight: 600; + letter-spacing: 0.3px; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .header-actions { + display: flex; + gap: 4px; + } + + .header-actions button { + background: rgba(255, 255, 255, 0.2); + border: none; + color: white; + width: 24px; + height: 24px; + border-radius: 4px; + cursor: pointer; + font-size: 12px; + display: flex; + align-items: center; + justify-content: center; + } + + .header-actions button:hover { + background: rgba(255, 255, 255, 0.3); + } + + .body { + padding: 12px 14px; + } + + .description { + font-size: 13px; + line-height: 1.4; + color: var(--rs-text-secondary); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: 10px; + } + + .platform-row { + display: flex; + gap: 6px; + margin-bottom: 10px; + flex-wrap: wrap; + } + + .platform-chip { + font-size: 12px; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + background: var(--rs-bg-surface-raised); + border-radius: 6px; + border: 1px solid var(--rs-border); + } + + .progress-section { + margin-bottom: 10px; + } + + .progress-label { + font-size: 10px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--rs-text-muted); + margin-bottom: 4px; + } + + .progress-bar { + height: 6px; + background: var(--rs-bg-surface-raised); + border-radius: 3px; + overflow: hidden; + } + + .progress-fill { + height: 100%; + background: linear-gradient(90deg, #6366f1, #8b5cf6); + border-radius: 3px; + transition: width 0.3s ease; + } + + .stats-row { + display: flex; + gap: 12px; + } + + .stat { + display: flex; + align-items: center; + gap: 4px; + font-size: 11px; + color: var(--rs-text-muted); + } + + .stat-count { + font-weight: 600; + color: var(--rs-text-primary); + } + + .stat-dot { + width: 6px; + height: 6px; + border-radius: 50%; + } + + .stat-dot.draft { background: #94a3b8; } + .stat-dot.scheduled { background: #3b82f6; } + .stat-dot.published { background: #22c55e; } + + .footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 14px; + background: var(--rs-bg-surface-raised); + border-top: 1px solid var(--rs-border); + border-radius: 0 0 12px 12px; + } + + .duration-label { + font-size: 11px; + color: var(--rs-text-muted); + font-weight: 500; + } + + .open-link { + font-size: 11px; + color: var(--rs-primary); + cursor: pointer; + text-decoration: none; + font-weight: 500; + } + + .open-link:hover { + text-decoration: underline; + } +`; + +declare global { + interface HTMLElementTagNameMap { + "folk-social-campaign": FolkSocialCampaign; + } +} + +export class FolkSocialCampaign extends FolkShape { + static override tagName = "folk-social-campaign"; + + static { + const sheet = new CSSStyleSheet(); + const parentRules = Array.from(FolkShape.styles.cssRules).map((r) => r.cssText).join("\n"); + const childRules = Array.from(styles.cssRules).map((r) => r.cssText).join("\n"); + sheet.replaceSync(`${parentRules}\n${childRules}`); + this.styles = sheet; + } + + #campaignId = ""; + #title = "Untitled Campaign"; + #description = ""; + #platforms: string[] = []; + #phases: { name: string; label: string; days: string }[] = []; + #postCount = 0; + #draftCount = 0; + #scheduledCount = 0; + #publishedCount = 0; + #duration = ""; + #spaceSlug = ""; + + get campaignId() { return this.#campaignId; } + set campaignId(v: string) { this.#campaignId = v; this.#dispatchChange(); } + + get title() { return this.#title; } + set title(v: string) { this.#title = v; this.requestUpdate("title"); this.#dispatchChange(); } + + get description() { return this.#description; } + set description(v: string) { this.#description = v; this.requestUpdate("description"); this.#dispatchChange(); } + + get platforms(): string[] { return this.#platforms; } + set platforms(v: string[]) { this.#platforms = v; this.requestUpdate("platforms"); this.#dispatchChange(); } + + get phases() { return this.#phases; } + set phases(v: { name: string; label: string; days: string }[]) { this.#phases = v; this.requestUpdate("phases"); this.#dispatchChange(); } + + get postCount() { return this.#postCount; } + set postCount(v: number) { this.#postCount = v; this.requestUpdate("postCount"); this.#dispatchChange(); } + + get draftCount() { return this.#draftCount; } + set draftCount(v: number) { this.#draftCount = v; this.requestUpdate("draftCount"); this.#dispatchChange(); } + + get scheduledCount() { return this.#scheduledCount; } + set scheduledCount(v: number) { this.#scheduledCount = v; this.requestUpdate("scheduledCount"); this.#dispatchChange(); } + + get publishedCount() { return this.#publishedCount; } + set publishedCount(v: number) { this.#publishedCount = v; this.requestUpdate("publishedCount"); this.#dispatchChange(); } + + get duration() { return this.#duration; } + set duration(v: string) { this.#duration = v; this.requestUpdate("duration"); this.#dispatchChange(); } + + get spaceSlug() { return this.#spaceSlug; } + set spaceSlug(v: string) { this.#spaceSlug = v; this.#dispatchChange(); } + + #dispatchChange() { + this.dispatchEvent(new CustomEvent("content-change", { detail: this.toJSON() })); + } + + override createRenderRoot() { + const root = super.createRenderRoot(); + + const titleAttr = this.getAttribute("title"); + if (titleAttr) this.#title = titleAttr; + + const total = this.#postCount || 1; + const publishedPct = Math.round((this.#publishedCount / total) * 100); + + const escTitle = this.#escapeHtml(this.#title); + const escDesc = this.#escapeHtml(this.#description || "No description"); + + const platformChips = this.#platforms + .map((p) => `${PLATFORM_ICONS[p] || p[0]?.toUpperCase() || "?"}`) + .join(""); + + const wrapper = document.createElement("div"); + wrapper.style.position = "relative"; + wrapper.style.height = "100%"; + + wrapper.innerHTML = html` +
+
+ 📢 + ${escTitle} +
+
+ +
+
+
+
${escDesc}
+
${platformChips || 'No platforms'}
+
+
Phase Progress
+
+
+
+
${this.#draftCount} draft
+
${this.#scheduledCount} sched
+
${this.#publishedCount} pub
+
+
+
+ ${this.#escapeHtml(this.#duration || "No duration set")} + Open Campaign → +
+ `; + + const slot = root.querySelector("slot"); + const containerDiv = slot?.parentElement as HTMLElement; + if (containerDiv) containerDiv.replaceWith(wrapper); + + const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement; + closeBtn.addEventListener("click", (e) => { + e.stopPropagation(); + this.dispatchEvent(new CustomEvent("close")); + }); + + const openLink = wrapper.querySelector(".open-link") as HTMLElement; + openLink.addEventListener("click", (e) => { + e.stopPropagation(); + this.dispatchEvent(new CustomEvent("navigate-to-module", { + bubbles: true, composed: true, + detail: { path: `/${this.#spaceSlug}/rsocials/campaigns?id=${this.#campaignId}` }, + })); + }); + + return root; + } + + #escapeHtml(text: string): string { + const div = document.createElement("div"); + div.textContent = text; + return div.innerHTML; + } + + static override fromData(data: Record): FolkSocialCampaign { + const shape = FolkShape.fromData(data) as FolkSocialCampaign; + if (data.campaignId) shape.campaignId = data.campaignId; + if (data.title) shape.title = data.title; + if (data.description !== undefined) shape.description = data.description; + if (Array.isArray(data.platforms)) shape.platforms = data.platforms; + if (Array.isArray(data.phases)) shape.phases = data.phases; + if (typeof data.postCount === "number") shape.postCount = data.postCount; + if (typeof data.draftCount === "number") shape.draftCount = data.draftCount; + if (typeof data.scheduledCount === "number") shape.scheduledCount = data.scheduledCount; + if (typeof data.publishedCount === "number") shape.publishedCount = data.publishedCount; + if (data.duration !== undefined) shape.duration = data.duration; + if (data.spaceSlug) shape.spaceSlug = data.spaceSlug; + return shape; + } + + override applyData(data: Record): void { + super.applyData(data); + if (data.campaignId !== undefined && data.campaignId !== this.campaignId) this.campaignId = data.campaignId; + if (data.title !== undefined && data.title !== this.title) this.title = data.title; + if (data.description !== undefined && data.description !== this.description) this.description = data.description; + if (Array.isArray(data.platforms) && JSON.stringify(data.platforms) !== JSON.stringify(this.platforms)) this.platforms = data.platforms; + if (Array.isArray(data.phases) && JSON.stringify(data.phases) !== JSON.stringify(this.phases)) this.phases = data.phases; + if (typeof data.postCount === "number" && data.postCount !== this.postCount) this.postCount = data.postCount; + if (typeof data.draftCount === "number" && data.draftCount !== this.draftCount) this.draftCount = data.draftCount; + if (typeof data.scheduledCount === "number" && data.scheduledCount !== this.scheduledCount) this.scheduledCount = data.scheduledCount; + if (typeof data.publishedCount === "number" && data.publishedCount !== this.publishedCount) this.publishedCount = data.publishedCount; + if (data.duration !== undefined && data.duration !== this.duration) this.duration = data.duration; + if (data.spaceSlug !== undefined && data.spaceSlug !== this.spaceSlug) this.spaceSlug = data.spaceSlug; + } + + override toJSON() { + return { + ...super.toJSON(), + type: "folk-social-campaign", + campaignId: this.#campaignId, + title: this.#title, + description: this.#description, + platforms: this.#platforms, + phases: this.#phases, + postCount: this.#postCount, + draftCount: this.#draftCount, + scheduledCount: this.#scheduledCount, + publishedCount: this.#publishedCount, + duration: this.#duration, + spaceSlug: this.#spaceSlug, + }; + } +} diff --git a/lib/folk-social-newsletter.ts b/lib/folk-social-newsletter.ts new file mode 100644 index 0000000..f524956 --- /dev/null +++ b/lib/folk-social-newsletter.ts @@ -0,0 +1,354 @@ +import { FolkShape } from "./folk-shape"; +import { css, html } from "./tags"; + +const styles = css` + :host { + background: var(--rs-bg-surface, #fff); + color: var(--rs-text-primary, #1e293b); + border-radius: 12px; + box-shadow: var(--rs-shadow-sm); + min-width: 260px; + min-height: 120px; + overflow: hidden; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + } + + :host(:hover) { + box-shadow: var(--rs-shadow-md); + } + + .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + cursor: move; + color: white; + border-radius: 12px 12px 0 0; + background: linear-gradient(135deg, #7c3aed, #a855f7); + } + + .header-left { + display: flex; + align-items: center; + gap: 8px; + } + + .header-icon { + font-size: 18px; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.2); + border-radius: 6px; + } + + .header-label { + font-size: 13px; + font-weight: 600; + letter-spacing: 0.3px; + } + + .header-actions { + display: flex; + gap: 4px; + } + + .header-actions button { + background: rgba(255, 255, 255, 0.2); + border: none; + color: white; + width: 24px; + height: 24px; + border-radius: 4px; + cursor: pointer; + font-size: 12px; + display: flex; + align-items: center; + justify-content: center; + } + + .header-actions button:hover { + background: rgba(255, 255, 255, 0.3); + } + + .body { + padding: 12px 14px; + } + + .subject-line { + font-size: 14px; + font-weight: 600; + color: var(--rs-text-primary); + margin-bottom: 8px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .list-row { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 8px; + } + + .list-name { + font-size: 12px; + color: var(--rs-text-secondary); + } + + .subscriber-badge { + font-size: 10px; + font-weight: 600; + padding: 2px 8px; + border-radius: 10px; + background: rgba(124, 58, 237, 0.1); + color: #7c3aed; + } + + .body-preview { + font-size: 13px; + line-height: 1.4; + color: var(--rs-text-secondary); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 14px; + background: var(--rs-bg-surface-raised); + border-top: 1px solid var(--rs-border); + border-radius: 0 0 12px 12px; + } + + .status-badge { + font-size: 10px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 3px 8px; + border-radius: 10px; + } + + .status-badge.draft { + background: var(--rs-bg-surface-raised); + color: var(--rs-text-muted); + } + + .status-badge.scheduled { + background: rgba(59, 130, 246, 0.15); + color: #2563eb; + } + + .status-badge.sent { + background: rgba(34, 197, 94, 0.15); + color: var(--rs-success); + } + + .schedule-info { + display: flex; + align-items: center; + gap: 4px; + font-size: 11px; + color: var(--rs-text-muted); + } +`; + +declare global { + interface HTMLElementTagNameMap { + "folk-social-newsletter": FolkSocialNewsletter; + } +} + +export class FolkSocialNewsletter extends FolkShape { + static override tagName = "folk-social-newsletter"; + + static { + const sheet = new CSSStyleSheet(); + const parentRules = Array.from(FolkShape.styles.cssRules).map((r) => r.cssText).join("\n"); + const childRules = Array.from(styles.cssRules).map((r) => r.cssText).join("\n"); + sheet.replaceSync(`${parentRules}\n${childRules}`); + this.styles = sheet; + } + + #newsletterId = ""; + #subject = "Untitled Newsletter"; + #listName = ""; + #subscriberCount = 0; + #status: "draft" | "scheduled" | "sent" = "draft"; + #scheduledAt = ""; + #bodyPreview = ""; + #spaceSlug = ""; + + #subjectEl: HTMLElement | null = null; + #statusBadgeEl: HTMLElement | null = null; + #scheduleInfoEl: HTMLElement | null = null; + + get newsletterId() { return this.#newsletterId; } + set newsletterId(v: string) { this.#newsletterId = v; this.#dispatchChange(); } + + get subject() { return this.#subject; } + set subject(v: string) { + this.#subject = v; + if (this.#subjectEl) this.#subjectEl.textContent = v; + this.requestUpdate("subject"); + this.#dispatchChange(); + } + + get listName() { return this.#listName; } + set listName(v: string) { this.#listName = v; this.requestUpdate("listName"); this.#dispatchChange(); } + + get subscriberCount() { return this.#subscriberCount; } + set subscriberCount(v: number) { this.#subscriberCount = v; this.requestUpdate("subscriberCount"); this.#dispatchChange(); } + + get status() { return this.#status; } + set status(v: "draft" | "scheduled" | "sent") { + this.#status = v; + if (this.#statusBadgeEl) { + this.#statusBadgeEl.className = `status-badge ${v}`; + this.#statusBadgeEl.textContent = v; + } + this.requestUpdate("status"); + this.#dispatchChange(); + } + + get scheduledAt() { return this.#scheduledAt; } + set scheduledAt(v: string) { + this.#scheduledAt = v; + if (this.#scheduleInfoEl) this.#scheduleInfoEl.textContent = this.#formatSchedule(v); + this.requestUpdate("scheduledAt"); + this.#dispatchChange(); + } + + get bodyPreview() { return this.#bodyPreview; } + set bodyPreview(v: string) { this.#bodyPreview = v; this.requestUpdate("bodyPreview"); this.#dispatchChange(); } + + get spaceSlug() { return this.#spaceSlug; } + set spaceSlug(v: string) { this.#spaceSlug = v; this.#dispatchChange(); } + + #dispatchChange() { + this.dispatchEvent(new CustomEvent("content-change", { detail: this.toJSON() })); + } + + override createRenderRoot() { + const root = super.createRenderRoot(); + + const subjectAttr = this.getAttribute("subject"); + if (subjectAttr) this.#subject = subjectAttr; + const statusAttr = this.getAttribute("status") as any; + if (statusAttr) this.#status = statusAttr; + + const escSubject = this.#escapeHtml(this.#subject); + const escListName = this.#escapeHtml(this.#listName || "No list"); + const escPreview = this.#escapeHtml(this.#bodyPreview || "No content preview"); + + const wrapper = document.createElement("div"); + wrapper.style.position = "relative"; + wrapper.style.height = "100%"; + + wrapper.innerHTML = html` +
+
+ 📧 + Newsletter +
+
+ +
+
+
+
${escSubject}
+
+ ${escListName} + ${this.#subscriberCount} subscribers +
+
${escPreview}
+
+
+ ${this.#status} + ${this.#formatSchedule(this.#scheduledAt)} +
+ `; + + const slot = root.querySelector("slot"); + const containerDiv = slot?.parentElement as HTMLElement; + if (containerDiv) containerDiv.replaceWith(wrapper); + + this.#subjectEl = wrapper.querySelector(".subject-line"); + this.#statusBadgeEl = wrapper.querySelector(".status-badge"); + this.#scheduleInfoEl = wrapper.querySelector(".schedule-info"); + + const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement; + closeBtn.addEventListener("click", (e) => { + e.stopPropagation(); + this.dispatchEvent(new CustomEvent("close")); + }); + + return root; + } + + #formatSchedule(dateStr: string): string { + if (!dateStr) return "Not scheduled"; + try { + const date = new Date(dateStr); + if (isNaN(date.getTime())) return dateStr; + return date.toLocaleDateString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); + } catch { + return dateStr; + } + } + + #escapeHtml(text: string): string { + const div = document.createElement("div"); + div.textContent = text; + return div.innerHTML; + } + + static override fromData(data: Record): FolkSocialNewsletter { + const shape = FolkShape.fromData(data) as FolkSocialNewsletter; + if (data.newsletterId) shape.newsletterId = data.newsletterId; + if (data.subject) shape.subject = data.subject; + if (data.listName !== undefined) shape.listName = data.listName; + if (typeof data.subscriberCount === "number") shape.subscriberCount = data.subscriberCount; + if (data.status) shape.status = data.status; + if (data.scheduledAt !== undefined) shape.scheduledAt = data.scheduledAt; + if (data.bodyPreview !== undefined) shape.bodyPreview = data.bodyPreview; + if (data.spaceSlug) shape.spaceSlug = data.spaceSlug; + return shape; + } + + override applyData(data: Record): void { + super.applyData(data); + if (data.newsletterId !== undefined && data.newsletterId !== this.newsletterId) this.newsletterId = data.newsletterId; + if (data.subject !== undefined && data.subject !== this.subject) this.subject = data.subject; + if (data.listName !== undefined && data.listName !== this.listName) this.listName = data.listName; + if (typeof data.subscriberCount === "number" && data.subscriberCount !== this.subscriberCount) this.subscriberCount = data.subscriberCount; + if (data.status !== undefined && data.status !== this.status) this.status = data.status; + if (data.scheduledAt !== undefined && data.scheduledAt !== this.scheduledAt) this.scheduledAt = data.scheduledAt; + if (data.bodyPreview !== undefined && data.bodyPreview !== this.bodyPreview) this.bodyPreview = data.bodyPreview; + if (data.spaceSlug !== undefined && data.spaceSlug !== this.spaceSlug) this.spaceSlug = data.spaceSlug; + } + + override toJSON() { + return { + ...super.toJSON(), + type: "folk-social-newsletter", + newsletterId: this.#newsletterId, + subject: this.#subject, + listName: this.#listName, + subscriberCount: this.#subscriberCount, + status: this.#status, + scheduledAt: this.#scheduledAt, + bodyPreview: this.#bodyPreview, + spaceSlug: this.#spaceSlug, + }; + } +} diff --git a/lib/folk-social-thread.ts b/lib/folk-social-thread.ts new file mode 100644 index 0000000..3289310 --- /dev/null +++ b/lib/folk-social-thread.ts @@ -0,0 +1,394 @@ +import { FolkShape } from "./folk-shape"; +import { css, html } from "./tags"; +import type { SocialPlatform } from "./folk-social-post"; + +const PLATFORM_COLORS: Record = { + x: "#000000", + linkedin: "#0A66C2", + instagram: "#E4405F", + youtube: "#FF0000", + threads: "#000000", + bluesky: "#0085FF", + tiktok: "#010101", + facebook: "#1877F2", +}; + +const styles = css` + :host { + background: var(--rs-bg-surface, #fff); + color: var(--rs-text-primary, #1e293b); + border-radius: 12px; + box-shadow: var(--rs-shadow-sm); + min-width: 260px; + min-height: 120px; + overflow: hidden; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + } + + :host(:hover) { + box-shadow: var(--rs-shadow-md); + } + + .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 14px; + cursor: move; + color: white; + border-radius: 12px 12px 0 0; + } + + .header-left { + display: flex; + align-items: center; + gap: 8px; + } + + .header-icon { + font-size: 18px; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.2); + border-radius: 6px; + } + + .header-title { + font-size: 13px; + font-weight: 600; + letter-spacing: 0.3px; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .header-actions { + display: flex; + gap: 4px; + } + + .header-actions button { + background: rgba(255, 255, 255, 0.2); + border: none; + color: white; + width: 24px; + height: 24px; + border-radius: 4px; + cursor: pointer; + font-size: 12px; + display: flex; + align-items: center; + justify-content: center; + } + + .header-actions button:hover { + background: rgba(255, 255, 255, 0.3); + } + + .body { + padding: 12px 14px; + } + + .tweet-count { + display: inline-block; + font-size: 10px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 2px 8px; + border-radius: 10px; + background: var(--rs-bg-surface-raised); + color: var(--rs-text-muted); + margin-bottom: 8px; + } + + .tweet-preview { + font-size: 13px; + line-height: 1.5; + color: var(--rs-text-primary); + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: 8px; + } + + .cover-image { + width: 100%; + height: 80px; + border-radius: 8px; + overflow: hidden; + margin-bottom: 8px; + border: 1px solid var(--rs-border); + } + + .cover-image img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 14px; + background: var(--rs-bg-surface-raised); + border-top: 1px solid var(--rs-border); + border-radius: 0 0 12px 12px; + } + + .open-link { + font-size: 11px; + color: var(--rs-primary); + cursor: pointer; + text-decoration: none; + font-weight: 500; + } + + .open-link:hover { + text-decoration: underline; + } + + .status-badge { + font-size: 10px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 3px 8px; + border-radius: 10px; + } + + .status-badge.draft { + background: var(--rs-bg-surface-raised); + color: var(--rs-text-muted); + } + + .status-badge.ready { + background: rgba(59, 130, 246, 0.15); + color: #2563eb; + } + + .status-badge.published { + background: rgba(34, 197, 94, 0.15); + color: var(--rs-success); + } +`; + +declare global { + interface HTMLElementTagNameMap { + "folk-social-thread": FolkSocialThread; + } +} + +export class FolkSocialThread extends FolkShape { + static override tagName = "folk-social-thread"; + + static { + const sheet = new CSSStyleSheet(); + const parentRules = Array.from(FolkShape.styles.cssRules) + .map((r) => r.cssText) + .join("\n"); + const childRules = Array.from(styles.cssRules) + .map((r) => r.cssText) + .join("\n"); + sheet.replaceSync(`${parentRules}\n${childRules}`); + this.styles = sheet; + } + + #threadId = ""; + #title = "Untitled Thread"; + #tweets: string[] = []; + #platform: SocialPlatform = "x"; + #status: "draft" | "ready" | "published" = "draft"; + #imageUrl = ""; + #spaceSlug = ""; + + #tweetCountEl: HTMLElement | null = null; + #tweetPreviewEl: HTMLElement | null = null; + #statusBadgeEl: HTMLElement | null = null; + #coverImageEl: HTMLElement | null = null; + + get threadId() { return this.#threadId; } + set threadId(v: string) { this.#threadId = v; this.#dispatchChange(); } + + get title() { return this.#title; } + set title(v: string) { + this.#title = v; + this.requestUpdate("title"); + this.#dispatchChange(); + } + + get tweets(): string[] { return this.#tweets; } + set tweets(v: string[]) { + this.#tweets = v; + if (this.#tweetCountEl) this.#tweetCountEl.textContent = `${v.length} tweet${v.length !== 1 ? "s" : ""}`; + if (this.#tweetPreviewEl) this.#tweetPreviewEl.textContent = v[0] || "No tweets yet..."; + this.requestUpdate("tweets"); + this.#dispatchChange(); + } + + get platform(): SocialPlatform { return this.#platform; } + set platform(v: SocialPlatform) { + this.#platform = v; + this.requestUpdate("platform"); + this.#dispatchChange(); + } + + get status() { return this.#status; } + set status(v: "draft" | "ready" | "published") { + this.#status = v; + if (this.#statusBadgeEl) { + this.#statusBadgeEl.className = `status-badge ${v}`; + this.#statusBadgeEl.textContent = v; + } + this.requestUpdate("status"); + this.#dispatchChange(); + } + + get imageUrl() { return this.#imageUrl; } + set imageUrl(v: string) { + this.#imageUrl = v; + this.#renderCoverImage(); + this.requestUpdate("imageUrl"); + this.#dispatchChange(); + } + + get spaceSlug() { return this.#spaceSlug; } + set spaceSlug(v: string) { this.#spaceSlug = v; this.#dispatchChange(); } + + #dispatchChange() { + this.dispatchEvent(new CustomEvent("content-change", { detail: this.toJSON() })); + } + + override createRenderRoot() { + const root = super.createRenderRoot(); + + const threadIdAttr = this.getAttribute("thread-id"); + if (threadIdAttr) this.#threadId = threadIdAttr; + const titleAttr = this.getAttribute("title"); + if (titleAttr) this.#title = titleAttr; + const platformAttr = this.getAttribute("platform") as SocialPlatform; + if (platformAttr && platformAttr in PLATFORM_COLORS) this.#platform = platformAttr; + const statusAttr = this.getAttribute("status") as any; + if (statusAttr) this.#status = statusAttr; + + const color = PLATFORM_COLORS[this.#platform] || "#000"; + + const wrapper = document.createElement("div"); + wrapper.style.position = "relative"; + wrapper.style.height = "100%"; + + const escTitle = this.#escapeHtml(this.#title); + const tweetCount = this.#tweets.length; + const firstTweet = this.#escapeHtml(this.#tweets[0] || "No tweets yet..."); + + wrapper.innerHTML = html` +
+
+ 🧵 + ${escTitle} +
+
+ +
+
+
+ ${tweetCount} tweet${tweetCount !== 1 ? "s" : ""} +
${firstTweet}
+
+ ${this.#imageUrl ? `Thread cover` : ""} +
+
+
+ ${this.#status} + Open Editor → +
+ `; + + const slot = root.querySelector("slot"); + const containerDiv = slot?.parentElement as HTMLElement; + if (containerDiv) containerDiv.replaceWith(wrapper); + + this.#tweetCountEl = wrapper.querySelector(".tweet-count"); + this.#tweetPreviewEl = wrapper.querySelector(".tweet-preview"); + this.#statusBadgeEl = wrapper.querySelector(".status-badge"); + this.#coverImageEl = wrapper.querySelector(".cover-image"); + + const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement; + closeBtn.addEventListener("click", (e) => { + e.stopPropagation(); + this.dispatchEvent(new CustomEvent("close")); + }); + + const openLink = wrapper.querySelector(".open-link") as HTMLElement; + openLink.addEventListener("click", (e) => { + e.stopPropagation(); + this.dispatchEvent(new CustomEvent("navigate-to-module", { + bubbles: true, + composed: true, + detail: { path: `/${this.#spaceSlug}/rsocials/thread-editor?id=${this.#threadId}` }, + })); + }); + + return root; + } + + #renderCoverImage() { + if (!this.#coverImageEl) return; + if (this.#imageUrl) { + this.#coverImageEl.style.display = "block"; + this.#coverImageEl.innerHTML = `Thread cover`; + } else { + this.#coverImageEl.style.display = "none"; + this.#coverImageEl.innerHTML = ""; + } + } + + #escapeHtml(text: string): string { + const div = document.createElement("div"); + div.textContent = text; + return div.innerHTML; + } + + static override fromData(data: Record): FolkSocialThread { + const shape = FolkShape.fromData(data) as FolkSocialThread; + if (data.threadId) shape.threadId = data.threadId; + if (data.title) shape.title = data.title; + if (Array.isArray(data.tweets)) shape.tweets = data.tweets; + if (data.platform) shape.platform = data.platform; + if (data.status) shape.status = data.status; + if (data.imageUrl !== undefined) shape.imageUrl = data.imageUrl; + if (data.spaceSlug) shape.spaceSlug = data.spaceSlug; + return shape; + } + + override applyData(data: Record): void { + super.applyData(data); + if (data.threadId !== undefined && data.threadId !== this.threadId) this.threadId = data.threadId; + if (data.title !== undefined && data.title !== this.title) this.title = data.title; + if (Array.isArray(data.tweets) && JSON.stringify(data.tweets) !== JSON.stringify(this.tweets)) this.tweets = data.tweets; + if (data.platform !== undefined && data.platform !== this.platform) this.platform = data.platform; + if (data.status !== undefined && data.status !== this.status) this.status = data.status; + if (data.imageUrl !== undefined && data.imageUrl !== this.imageUrl) this.imageUrl = data.imageUrl; + if (data.spaceSlug !== undefined && data.spaceSlug !== this.spaceSlug) this.spaceSlug = data.spaceSlug; + } + + override toJSON() { + return { + ...super.toJSON(), + type: "folk-social-thread", + threadId: this.#threadId, + title: this.#title, + tweets: this.#tweets, + platform: this.#platform, + status: this.#status, + imageUrl: this.#imageUrl, + spaceSlug: this.#spaceSlug, + }; + } +} diff --git a/lib/index.ts b/lib/index.ts index e6011ed..1284ff5 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -72,6 +72,9 @@ export * from "./folk-transaction-builder"; // Social Media / Campaign Shapes export * from "./folk-social-post"; +export * from "./folk-social-thread"; +export * from "./folk-social-campaign"; +export * from "./folk-social-newsletter"; // Decision/Choice Shapes export * from "./folk-choice-vote"; diff --git a/lib/mi-suggestions.ts b/lib/mi-suggestions.ts new file mode 100644 index 0000000..ce78557 --- /dev/null +++ b/lib/mi-suggestions.ts @@ -0,0 +1,113 @@ +/** + * MI Context-Aware Suggestions — client-side suggestion registry. + * + * Maps module IDs to suggested prompts. When the MI panel opens, + * it reads the current module context and returns matching chips. + * No server call needed for static suggestions. + */ + +export interface MiSuggestion { + label: string; + icon: string; + prompt: string; + autoSend?: boolean; +} + +const MODULE_SUGGESTIONS: Record = { + rspace: [ + { label: "Add a note", icon: "📝", prompt: "Add a markdown note to the canvas", autoSend: true }, + { label: "Generate an image", icon: "🎨", prompt: "Generate an image", autoSend: false }, + { label: "Arrange my shapes", icon: "📐", prompt: "Arrange all shapes on the canvas into a grid", autoSend: true }, + { label: "What's on this canvas?", icon: "🔍", prompt: "Summarize what's on this canvas", autoSend: true }, + ], + rnotes: [ + { label: "Create a notebook", icon: "📓", prompt: "Create a new notebook", autoSend: true }, + { label: "Summarize my notes", icon: "📋", prompt: "Summarize my recent notes", autoSend: true }, + { label: "Import from Obsidian", icon: "⬇", prompt: "How do I import notes from Obsidian?", autoSend: true }, + ], + rcal: [ + { label: "Create an event", icon: "📅", prompt: "Create a calendar event", autoSend: false }, + { label: "What's this week?", icon: "🗓", prompt: "What's on my calendar this week?", autoSend: true }, + { label: "Import a calendar", icon: "⬇", prompt: "How do I import an ICS calendar?", autoSend: true }, + ], + rtasks: [ + { label: "Create a task", icon: "✅", prompt: "Create a task", autoSend: false }, + { label: "Show open tasks", icon: "📋", prompt: "Show my open tasks", autoSend: true }, + { label: "Set up a project", icon: "🏗", prompt: "Help me set up a project board", autoSend: true }, + ], + rflows: [ + { label: "Create a flow", icon: "💧", prompt: "Create a new funding flow", autoSend: false }, + { label: "How do flows work?", icon: "❓", prompt: "How do community funding flows work?", autoSend: true }, + ], + rvote: [ + { label: "Create a proposal", icon: "🗳", prompt: "Create a governance proposal", autoSend: false }, + { label: "Start a vote", icon: "✋", prompt: "Start a governance vote", autoSend: false }, + ], + rchat: [ + { label: "Start a discussion", icon: "💬", prompt: "Start a new discussion thread", autoSend: false }, + { label: "Create a channel", icon: "📢", prompt: "Create a new chat channel", autoSend: false }, + ], + rcrm: [ + { label: "Add a contact", icon: "👤", prompt: "Add a new contact", autoSend: false }, + { label: "Show my pipeline", icon: "📊", prompt: "Show my CRM pipeline", autoSend: true }, + ], + rsocials: [ + { label: "Create a campaign", icon: "📣", prompt: "Create a social media campaign", autoSend: false }, + { label: "Draft a post", icon: "✏", prompt: "Draft a social media post", autoSend: false }, + ], + rwallet: [ + { label: "Check my balance", icon: "💰", prompt: "Check my wallet balance", autoSend: true }, + { label: "How do tokens work?", icon: "🪙", prompt: "How do CRDT tokens work?", autoSend: true }, + ], + rmaps: [ + { label: "Share my location", icon: "📍", prompt: "How do I share my location?", autoSend: true }, + { label: "Find nearby places", icon: "🔍", prompt: "Find interesting places nearby", autoSend: true }, + ], + rphotos: [ + { label: "Upload photos", icon: "📷", prompt: "How do I upload photos?", autoSend: true }, + { label: "Create an album", icon: "🖼", prompt: "Create a new photo album", autoSend: false }, + ], + rfiles: [ + { label: "Upload a file", icon: "📁", prompt: "How do I upload files?", autoSend: true }, + { label: "Browse files", icon: "🗂", prompt: "Show my recent files", autoSend: true }, + ], +}; + +const GENERIC_SUGGESTIONS: MiSuggestion[] = [ + { label: "What can I do here?", icon: "✨", prompt: "What can I do in this space?", autoSend: true }, + { label: "Set up this space", icon: "🏗", prompt: "Help me set up this space", autoSend: true }, + { label: "Show me around", icon: "🧭", prompt: "Give me a tour of the available rApps", autoSend: true }, +]; + +const CANVAS_SUGGESTIONS: MiSuggestion[] = [ + { label: "Summarize selected", icon: "📋", prompt: "Summarize the selected shapes", autoSend: true }, + { label: "Connect these", icon: "🔗", prompt: "Connect the selected shapes", autoSend: true }, + { label: "Arrange in grid", icon: "📐", prompt: "Arrange the selected shapes in a grid", autoSend: true }, +]; + +export function getContextSuggestions(ctx: { + module: string; + hasShapes: boolean; + hasSelectedShapes: boolean; +}): MiSuggestion[] { + const suggestions: MiSuggestion[] = []; + + // Canvas selection suggestions take priority + if (ctx.hasSelectedShapes) { + suggestions.push(...CANVAS_SUGGESTIONS); + } + + // Module-specific suggestions + const moduleSuggestions = MODULE_SUGGESTIONS[ctx.module]; + if (moduleSuggestions) { + suggestions.push(...moduleSuggestions); + } + + // Always add generic suggestions if we have room + if (suggestions.length < 6) { + const remaining = 6 - suggestions.length; + suggestions.push(...GENERIC_SUGGESTIONS.slice(0, remaining)); + } + + return suggestions; +} diff --git a/modules/rsocials/components/folk-campaign-manager.ts b/modules/rsocials/components/folk-campaign-manager.ts index d93c5f7..852d365 100644 --- a/modules/rsocials/components/folk-campaign-manager.ts +++ b/modules/rsocials/components/folk-campaign-manager.ts @@ -117,13 +117,19 @@ export class FolkCampaignManager extends HTMLElement { const statusClass = post.status === 'scheduled' ? 'status--scheduled' : 'status--draft'; const date = new Date(post.scheduledAt); const dateStr = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }); - const contentPreview = post.content.length > 180 ? this.esc(post.content.substring(0, 180)) + '...' : this.esc(post.content); + const isLong = post.content.length > 180; + const contentPreview = isLong ? this.esc(post.content.substring(0, 180)) + '...' : this.esc(post.content); + const fullContent = this.esc(post.content); const tags = post.hashtags.map(h => `#${this.esc(h)}`).join(' '); - // Thread badge + // Thread badge — links to thread editor if threadId exists let threadBadge = ''; if (post.threadPosts && post.threadPosts.length > 0) { - threadBadge = `🧵 ${post.threadPosts.length}-post thread`; + if (post.threadId) { + threadBadge = `🧵 ${post.threadPosts.length}-post thread — Edit`; + } else { + threadBadge = `🧵 ${post.threadPosts.length}-post thread`; + } } // Email subject for newsletter @@ -141,8 +147,14 @@ export class FolkCampaignManager extends HTMLElement { threadExpansion = ``; } + // "Open Thread" link for posts with created threads + let threadLink = ''; + if (post.threadId && !(post.threadPosts && post.threadPosts.length > 0)) { + threadLink = `Open Thread`; + } + return ` -
+
${icon}
@@ -153,9 +165,10 @@ export class FolkCampaignManager extends HTMLElement {
${emailLine}
Step ${post.stepNumber}
-

${contentPreview.replace(/\n/g, '
')}

+

${contentPreview.replace(/\n/g, '
')}

${threadBadge} ${threadExpansion} + ${threadLink}
${tags}
`; } @@ -269,6 +282,17 @@ export class FolkCampaignManager extends HTMLElement { transition: background 0.15s; } .thread-badge:hover { background: rgba(96,165,250,0.25); } + .thread-badge--link { border: 1px solid rgba(96,165,250,0.3); text-decoration: none; } + .thread-badge--link:hover { border-color: #60a5fa; } + .post { cursor: pointer; } + .post__content[data-collapsed="false"] { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; } + .post__thread-link { + display: inline-block; font-size: 0.7rem; color: #14b8a6; text-decoration: none; + padding: 2px 8px; border-radius: 4px; margin-bottom: 0.4rem; + background: rgba(20,184,166,0.1); border: 1px solid rgba(20,184,166,0.2); + transition: background 0.15s, border-color 0.15s; + } + .post__thread-link:hover { background: rgba(20,184,166,0.2); border-color: #14b8a6; } .thread-expansion { margin: 0.4rem 0; padding: 0.5rem; background: var(--rs-input-bg, #0f172a); border-radius: 6px; border: 1px solid var(--rs-input-border, #334155); } .thread-expansion[hidden] { display: none; } .thread-post { font-size: 0.75rem; color: var(--rs-text-secondary, #94a3b8); padding: 0.3rem 0; border-bottom: 1px solid rgba(51,65,85,0.5); line-height: 1.4; } @@ -531,15 +555,42 @@ export class FolkCampaignManager extends HTMLElement { }); }); - // ── Thread badge toggles ── - this.shadowRoot.querySelectorAll('.thread-badge').forEach(badge => { - badge.addEventListener('click', () => { + // ── Thread badge toggles (skip linked badges — they navigate) ── + this.shadowRoot.querySelectorAll('.thread-badge:not(.thread-badge--link)').forEach(badge => { + badge.addEventListener('click', (e) => { + e.stopPropagation(); const postId = (badge as HTMLElement).dataset.postId; if (!postId) return; const expansion = this.shadowRoot!.getElementById(`thread-${postId}`); if (expansion) expansion.hidden = !expansion.hidden; }); }); + + // ── Linked thread badges (stop post card click from firing) ── + this.shadowRoot.querySelectorAll('.thread-badge--link').forEach(badge => { + badge.addEventListener('click', (e) => e.stopPropagation()); + }); + + // ── Thread link buttons (stop post card click) ── + this.shadowRoot.querySelectorAll('.post__thread-link').forEach(link => { + link.addEventListener('click', (e) => e.stopPropagation()); + }); + + // ── Post card click → toggle content expand ── + this.shadowRoot.querySelectorAll('.post').forEach(post => { + post.addEventListener('click', () => { + const content = post.querySelector('.post__content') as HTMLElement; + if (!content) return; + const collapsed = content.dataset.collapsed === 'true'; + if (collapsed) { + content.innerHTML = (content.dataset.full || '').replace(/\n/g, '
'); + content.dataset.collapsed = 'false'; + } else { + content.innerHTML = (content.dataset.preview || '').replace(/\n/g, '
'); + content.dataset.collapsed = 'true'; + } + }); + }); } private async handleGenerate() { diff --git a/modules/rsocials/components/folk-campaign-wizard.ts b/modules/rsocials/components/folk-campaign-wizard.ts index 3635771..09dbbe3 100644 --- a/modules/rsocials/components/folk-campaign-wizard.ts +++ b/modules/rsocials/components/folk-campaign-wizard.ts @@ -585,7 +585,12 @@ export class FolkCampaignWizard extends HTMLElement {
\u2705

Campaign Activated!

Your campaign has been committed successfully.

- ${result.threadIds?.length ? `

${result.threadIds.length} thread(s) created

` : ''} + ${result.threads?.length ? `
+

${result.threads.length} thread(s) created:

+
+ ${result.threads.map((t: any) => `\u270F\uFE0F ${t.title || t.id}`).join('')} +
+
` : result.threadIds?.length ? `

${result.threadIds.length} thread(s) created

` : ''} ${result.newsletters?.length ? `

${result.newsletters.length} newsletter draft(s)

` : ''}
View Campaign diff --git a/modules/rsocials/components/folk-thread-gallery.ts b/modules/rsocials/components/folk-thread-gallery.ts index cfa9507..0fc7e9c 100644 --- a/modules/rsocials/components/folk-thread-gallery.ts +++ b/modules/rsocials/components/folk-thread-gallery.ts @@ -19,6 +19,7 @@ interface DraftPostCard { scheduledAt: string; status: string; hashtags: string[]; + threadId?: string; } export class FolkThreadGallery extends HTMLElement { @@ -107,6 +108,7 @@ export class FolkThreadGallery extends HTMLElement { scheduledAt: post.scheduledAt, status: post.status, hashtags: post.hashtags || [], + threadId: post.threadId, }); } } @@ -154,7 +156,10 @@ export class FolkThreadGallery extends HTMLElement { const statusBadge = p.status === 'scheduled' ? 'Scheduled' : 'Draft'; - return `
+ const href = p.threadId + ? `${this.basePath}thread-editor/${this.esc(p.threadId)}/edit` + : `${this.basePath}campaign`; + return `
${statusBadge} ${this.esc(p.campaignTitle)} @@ -165,7 +170,7 @@ export class FolkThreadGallery extends HTMLElement { ${p.hashtags.length ? `${p.hashtags.slice(0, 3).join(' ')}` : ''} ${schedDate ? `${schedDate}` : ''}
-
`; + `; }).join('')} ${threads.map(t => { const initial = (t.name || '?').charAt(0).toUpperCase(); diff --git a/modules/rsocials/mod.ts b/modules/rsocials/mod.ts index ccf224c..337bf65 100644 --- a/modules/rsocials/mod.ts +++ b/modules/rsocials/mod.ts @@ -1570,14 +1570,16 @@ routes.post("/api/campaign/wizard/:id/commit", async (c) => { // 2. Create ThreadData entries for posts with threadPosts const threadIds: string[] = []; + const threadInfos: { id: string; title: string }[] = []; for (const post of campaign.posts) { if (post.threadPosts && post.threadPosts.length > 0) { const threadId = `thread-${now}-${Math.random().toString(36).substring(2, 6)}`; + const threadTitle = `${campaign.title} — ${post.phaseLabel} (${post.platform})`; const threadData: ThreadData = { id: threadId, name: post.phaseLabel || 'Campaign Thread', handle: '@campaign', - title: `${campaign.title} — ${post.phaseLabel} (${post.platform})`, + title: threadTitle, tweets: post.threadPosts, imageUrl: null, tweetImages: null, @@ -1588,7 +1590,13 @@ routes.post("/api/campaign/wizard/:id/commit", async (c) => { if (!d.threads) d.threads = {} as any; (d.threads as any)[threadId] = threadData; }); + // Link the campaign post back to the created thread + _syncServer!.changeDoc(docId, `wizard ${id} link post ${post.id} → thread ${threadId}`, (d) => { + const cp = d.campaigns?.[campaign.id]?.posts?.find((p: any) => p.id === post.id); + if (cp) (cp as any).threadId = threadId; + }); threadIds.push(threadId); + threadInfos.push({ id: threadId, title: threadTitle }); } } @@ -1726,6 +1734,7 @@ routes.post("/api/campaign/wizard/:id/commit", async (c) => { ok: true, campaignId: campaign.id, threadIds, + threads: threadInfos, workflowId: wfId, newsletters: newsletterResults, }); diff --git a/modules/rsocials/schemas.ts b/modules/rsocials/schemas.ts index 42c8f9c..bcf278a 100644 --- a/modules/rsocials/schemas.ts +++ b/modules/rsocials/schemas.ts @@ -37,6 +37,7 @@ export interface CampaignPost { phase: number; phaseLabel: string; threadPosts?: string[]; + threadId?: string; emailSubject?: string; emailHtml?: string; } diff --git a/server/notification-service.ts b/server/notification-service.ts index 7c09837..1fef34c 100644 --- a/server/notification-service.ts +++ b/server/notification-service.ts @@ -130,6 +130,7 @@ export async function notify(opts: NotifyOptions): Promise { spaceSlug: stored.spaceSlug, actorUsername: stored.actorUsername, actionUrl: stored.actionUrl, + metadata: stored.metadata, createdAt: stored.createdAt, }, unreadCount, diff --git a/server/spaces.ts b/server/spaces.ts index 0ff8556..8549923 100644 --- a/server/spaces.ts +++ b/server/spaces.ts @@ -2156,7 +2156,7 @@ spaces.post("/:slug/invite", async (c) => { } if (identityRes.status === 409) { - // Existing user — resolve email to DID, then direct-add + // Existing user — create invite (don't direct-add) const emailLookupRes = await fetch( `${ENCRYPTID_URL}/api/internal/user-by-email?email=${encodeURIComponent(body.email)}`, ); @@ -2167,70 +2167,62 @@ spaces.post("/:slug/invite", async (c) => { id: string; did: string; username: string; displayName: string; }; - // Add to Automerge doc - setMember(slug, existingUser.did, role as any, existingUser.displayName || existingUser.username); - - // Sync to EncryptID PostgreSQL - try { - await fetch(`${ENCRYPTID_URL}/api/spaces/${slug}/members`, { - method: "POST", - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${token}`, - }, - body: JSON.stringify({ userDID: existingUser.did, role }), - }); - } catch (e) { - console.error("Failed to sync member to EncryptID:", e); + // Create space invite via EncryptID + const inviteRes = await fetch(`${ENCRYPTID_URL}/api/spaces/${slug}/invites`, { + method: "POST", + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${token}`, + }, + body: JSON.stringify({ email: body.email, role }), + }); + if (!inviteRes.ok) { + const invErr = await inviteRes.json().catch(() => ({})) as Record; + return c.json({ error: (invErr.error as string) || "Failed to create invite" }, 500); } + const invite = await inviteRes.json() as { id: string; token: string; role: string }; - // In-app notification + const acceptUrl = `https://${slug}.rspace.online?inviteToken=${invite.token}`; + const inviterName = claims.username || "an admin"; + + // In-app notification with accept action notify({ userDid: existingUser.did, category: "space", - eventType: "member_joined", - title: `You were added to "${slug}"`, - body: `You were added as ${role} by ${claims.username || "an admin"}.`, + eventType: "space_invite", + title: `${inviterName} invited you to "${slug}"`, + body: `You've been invited to join as ${role}. Accept to get access.`, spaceSlug: slug, actorDid: claims.sub, actorUsername: claims.username, - actionUrl: `https://${slug}.rspace.online`, - metadata: { role }, + actionUrl: acceptUrl, + metadata: { inviteToken: invite.token, role }, }).catch(() => {}); - // Sync space email alias with new member - fetch(`${ENCRYPTID_URL}/api/internal/spaces/${slug}/alias/sync`, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ userDid: existingUser.did, role }), - }).catch(() => {}); - - // Send "you've been added" email + // Send invite email if (inviteTransport) { try { - const spaceUrl = `https://${slug}.rspace.online`; - const inviterName = claims.username || "an admin"; await inviteTransport.sendMail({ from: process.env.SMTP_FROM || "rSpace ", to: body.email, - subject: `${inviterName} added you to "${slug}" on rSpace`, + subject: `${inviterName} invited you to "${slug}" on rSpace`, html: `
-

You've been added to ${slug}

-

${inviterName} added you to the ${slug} space as a ${role}.

-

You now have access to all the collaborative tools in this space — notes, maps, voting, calendar, and more.

+

You're invited to ${slug}

+

${inviterName} invited you to join the ${slug} space as a ${role}.

+

Accept the invitation to get access to all the collaborative tools — notes, maps, voting, calendar, and more.

- Open ${slug} + Accept Invitation

-

rSpace — collaborative knowledge work

+

This invite expires in 7 days. — rSpace

`, }); } catch (emailErr: any) { - console.error("Direct-add email notification failed:", emailErr.message); + console.error("Invite email notification failed:", emailErr.message); } } - return c.json({ ok: true, type: "direct-add", username: existingUser.username }); + return c.json({ ok: true, type: "invite", inviteToken: invite.token }); } // Other error from identity invite @@ -2243,7 +2235,7 @@ spaces.post("/:slug/invite", async (c) => { } }); -// ── Add member by username (direct add, no invite needed) ── +// ── Add member by username (sends invite, requires acceptance) ── spaces.post("/:slug/members/add", async (c) => { const { slug } = c.req.param(); @@ -2288,73 +2280,76 @@ spaces.post("/:slug/members/add", async (c) => { if (!user.did) return c.json({ error: "User has no DID" }, 400); - // Add to Automerge doc - setMember(slug, user.did, role as any, user.displayName || user.username); - - // Also add to PostgreSQL via EncryptID - try { - await fetch(`${ENCRYPTID_URL}/api/spaces/${slug}/members`, { - method: "POST", - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${token}`, - }, - body: JSON.stringify({ userDID: user.did, role }), - }); - } catch (e) { - console.error("Failed to sync member to EncryptID:", e); - } - - // Notify the new member - notify({ - userDid: user.did, - category: 'space', - eventType: 'member_joined', - title: `You were added to "${slug}"`, - body: `You were added as ${role} by ${claims.username || "an admin"}.`, - spaceSlug: slug, - actorDid: claims.sub, - actorUsername: claims.username, - actionUrl: `https://${slug}.rspace.online`, - metadata: { role }, - }).catch(() => {}); - - // Sync space email alias with new member - fetch(`${ENCRYPTID_URL}/api/internal/spaces/${slug}/alias/sync`, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ userDid: user.did, role }), - }).catch(() => {}); - - // Send email notification (non-fatal) - if (inviteTransport && user.id) { + // Look up user's email for the invite + let targetEmail: string | null = null; + if (user.id) { try { const emailRes = await fetch(`${ENCRYPTID_URL}/api/internal/user-email/${user.id}`); if (emailRes.ok) { const emailData = await emailRes.json() as { recoveryEmail: string | null; profileEmail: string | null; }; - const targetEmail = emailData.recoveryEmail || emailData.profileEmail; - if (targetEmail) { - const spaceUrl = `https://${slug}.rspace.online`; - await inviteTransport.sendMail({ - from: process.env.SMTP_FROM || "rSpace ", - to: targetEmail, - subject: `You've been added to "${slug}" on rSpace`, - html: [ - `

You've been added to ${slug} as a ${role}.

`, - `

Open Space

`, - `

rSpace — collaborative knowledge work

`, - ].join("\n"), - }); - } + targetEmail = emailData.recoveryEmail || emailData.profileEmail; } + } catch {} + } + + // Create space invite via EncryptID + const inviteRes = await fetch(`${ENCRYPTID_URL}/api/spaces/${slug}/invites`, { + method: "POST", + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${token}`, + }, + body: JSON.stringify({ email: targetEmail || undefined, role }), + }); + if (!inviteRes.ok) { + const invErr = await inviteRes.json().catch(() => ({})) as Record; + return c.json({ error: (invErr.error as string) || "Failed to create invite" }, 500); + } + const invite = await inviteRes.json() as { id: string; token: string; role: string }; + + const acceptUrl = `https://${slug}.rspace.online?inviteToken=${invite.token}`; + const inviterName = claims.username || "an admin"; + + // In-app notification with accept action + notify({ + userDid: user.did, + category: 'space', + eventType: 'space_invite', + title: `${inviterName} invited you to "${slug}"`, + body: `You've been invited to join as ${role}. Accept to get access.`, + spaceSlug: slug, + actorDid: claims.sub, + actorUsername: claims.username, + actionUrl: acceptUrl, + metadata: { inviteToken: invite.token, role }, + }).catch(() => {}); + + // Send invite email (non-fatal) + if (inviteTransport && targetEmail) { + try { + await inviteTransport.sendMail({ + from: process.env.SMTP_FROM || "rSpace ", + to: targetEmail, + subject: `${inviterName} invited you to "${slug}" on rSpace`, + html: ` +
+

You're invited to ${slug}

+

${inviterName} invited you to join the ${slug} space as a ${role}.

+

Accept the invitation to get access to all the collaborative tools — notes, maps, voting, calendar, and more.

+

+ Accept Invitation +

+

This invite expires in 7 days. — rSpace

+
`, + }); } catch (emailErr: any) { - console.error("Member-add email notification failed:", emailErr.message); + console.error("Invite email notification failed:", emailErr.message); } } - return c.json({ ok: true, did: user.did, username: user.username, role }); + return c.json({ ok: true, type: "invite", inviteToken: invite.token, username: user.username }); }); // ── Accept invite via token ── diff --git a/shared/components/rstack-notification-bell.ts b/shared/components/rstack-notification-bell.ts index 83ca47f..d60dac1 100644 --- a/shared/components/rstack-notification-bell.ts +++ b/shared/components/rstack-notification-bell.ts @@ -19,6 +19,7 @@ interface NotificationItem { spaceSlug: string | null; actorUsername: string | null; actionUrl: string | null; + metadata: Record; createdAt: string; read: boolean; } @@ -211,6 +212,32 @@ export class RStackNotificationBell extends HTMLElement { } } + async #acceptInvite(notifId: string, spaceSlug: string, inviteToken: string) { + const token = this.#getToken(); + if (!token) return; + + try { + const res = await fetch(`/api/spaces/${spaceSlug}/invite/accept`, { + method: "POST", + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ inviteToken }), + }); + if (res.ok) { + await this.#markRead(notifId); + // Navigate to the space + window.location.href = `https://${spaceSlug}.rspace.online`; + } else { + const err = await res.json().catch(() => ({ error: "Failed to accept" })); + console.error("[invite] accept failed:", (err as any).error); + } + } catch (e) { + console.error("[invite] accept error:", e); + } + } + // ── Push subscription ── async #checkPushState() { @@ -346,20 +373,28 @@ export class RStackNotificationBell extends HTMLElement { } else if (this.#notifications.length === 0) { body = `
No notifications yet
`; } else { - body = this.#notifications.map(n => ` -
+ body = this.#notifications.map(n => { + const isInvite = n.eventType === "space_invite" && n.metadata?.inviteToken && !n.read; + const inviteButtons = isInvite ? ` +
+ + +
` : ""; + return ` +
${this.#categoryIcon(n.category)}
${n.title}
${n.body ? `
${n.body}
` : ""} + ${inviteButtons}
${n.actorUsername ? `${n.actorUsername}` : ""} ${this.#timeAgo(n.createdAt)}
-
- `).join(""); +
`; + }).join(""); } panelHTML = `
${header}${body}
`; @@ -410,11 +445,13 @@ export class RStackNotificationBell extends HTMLElement { this.#subscribePush(); }); - // Notification item clicks (mark read + navigate) + // Notification item clicks (mark read + navigate, skip for invites) this.#shadow.querySelectorAll(".notif-item").forEach((el) => { const id = (el as HTMLElement).dataset.id!; + const noNav = (el as HTMLElement).dataset.noNav === "true"; el.addEventListener("click", (e) => { e.stopPropagation(); + if (noNav) return; // invite items handle via buttons this.#markRead(id); const n = this.#notifications.find(n => n.id === id); if (n?.actionUrl) { @@ -423,6 +460,24 @@ export class RStackNotificationBell extends HTMLElement { }); }); + // Accept invite buttons + this.#shadow.querySelectorAll(".notif-accept").forEach((btn) => { + const el = btn as HTMLElement; + btn.addEventListener("click", (e) => { + e.stopPropagation(); + this.#acceptInvite(el.dataset.accept!, el.dataset.space!, el.dataset.token!); + }); + }); + + // Decline invite buttons + this.#shadow.querySelectorAll(".notif-decline").forEach((btn) => { + const id = (btn as HTMLElement).dataset.decline!; + btn.addEventListener("click", (e) => { + e.stopPropagation(); + this.#dismiss(id); + }); + }); + // Dismiss buttons this.#shadow.querySelectorAll(".notif-dismiss").forEach((btn) => { const id = (btn as HTMLElement).dataset.dismiss!; @@ -608,6 +663,34 @@ const STYLES = ` font-weight: 500; } +.notif-actions { + display: flex; + gap: 8px; + margin-top: 6px; +} + +.notif-accept, .notif-decline { + padding: 4px 12px; + border-radius: 6px; + font-size: 0.75rem; + font-weight: 600; + cursor: pointer; + border: none; + transition: opacity 0.15s; +} +.notif-accept { + background: linear-gradient(135deg, #14b8a6, #0d9488); + color: white; +} +.notif-decline { + background: none; + border: 1px solid var(--rs-border, rgba(255,255,255,0.15)); + color: var(--rs-text-muted, #94a3b8); +} +.notif-accept:hover, .notif-decline:hover { + opacity: 0.85; +} + .notif-dismiss { flex-shrink: 0; background: none; diff --git a/shared/components/rstack-space-settings.ts b/shared/components/rstack-space-settings.ts index f54dd3d..67c4fe2 100644 --- a/shared/components/rstack-space-settings.ts +++ b/shared/components/rstack-space-settings.ts @@ -481,8 +481,9 @@ export class RStackSpaceSettings extends HTMLElement { - +
+
` : `
@@ -690,6 +691,7 @@ export class RStackSpaceSettings extends HTMLElement { const token = getToken(); if (!token) return; + const username = input.value; try { const res = await fetch(`/api/spaces/${this._space}/members/add`, { method: "POST", @@ -697,15 +699,24 @@ export class RStackSpaceSettings extends HTMLElement { "Content-Type": "application/json", "Authorization": `Bearer ${token}`, }, - body: JSON.stringify({ username: input.value, role: roleSelect.value }), + body: JSON.stringify({ username, role: roleSelect.value }), }); if (res.ok) { input.value = ""; this._lookupResult = null; + this._lookupError = ""; + this._render(); + // Show invite-sent feedback briefly + const feedbackEl = sr.getElementById("username-invite-feedback"); + if (feedbackEl) { + feedbackEl.textContent = `Invite sent to ${username}`; + feedbackEl.style.color = "#14b8a6"; + setTimeout(() => { feedbackEl.textContent = ""; }, 3000); + } this._loadData(); } else { const err = await res.json(); - this._lookupError = err.error || "Failed to add member"; + this._lookupError = err.error || "Failed to invite member"; this._render(); } } catch { @@ -734,16 +745,10 @@ export class RStackSpaceSettings extends HTMLElement { body: JSON.stringify({ email: input.value, role: roleSelect.value }), }); if (res.ok) { - const data = await res.json() as { type?: string; username?: string }; input.value = ""; if (feedback) { - if (data.type === "direct-add") { - feedback.textContent = `${data.username || "User"} added`; - feedback.style.color = "#14b8a6"; - } else { - feedback.textContent = "Invite sent"; - feedback.style.color = "#14b8a6"; - } + feedback.textContent = "Invite sent"; + feedback.style.color = "#14b8a6"; setTimeout(() => { feedback.textContent = ""; }, 3000); } this._loadData();