rspace-online/modules/rsocials/applets.ts

46 lines
1.8 KiB
TypeScript

/**
* rSocials applet definitions — Post Draft.
*/
import type { AppletDefinition, AppletLiveData } from "../../shared/applet-types";
const postDraft: AppletDefinition = {
id: "post-draft",
label: "Post Draft",
icon: "✏️",
accentColor: "#db2777",
ports: [
{ name: "content-in", type: "text", direction: "input" },
{ name: "post-out", type: "json", direction: "output" },
],
renderCompact(data: AppletLiveData): string {
const { snapshot } = data;
const platform = (snapshot.platform as string) || "social";
const content = (snapshot.content as string) || "";
const charCount = content.length;
const maxChars = (snapshot.maxChars as number) || 280;
const pct = Math.min(100, Math.round((charCount / maxChars) * 100));
const countColor = pct > 90 ? "#ef4444" : pct > 70 ? "#f59e0b" : "#94a3b8";
return `
<div>
<div style="font-size:11px;color:#94a3b8;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px">${platform}</div>
<div style="font-size:11px;color:#cbd5e1;line-height:1.4;max-height:70px;overflow:hidden">${content || "<em>Empty draft</em>"}</div>
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px">
<div style="flex:1;background:#334155;border-radius:3px;height:4px;overflow:hidden;margin-right:8px">
<div style="background:#db2777;width:${pct}%;height:100%;border-radius:3px"></div>
</div>
<span style="font-size:9px;color:${countColor}">${charCount}/${maxChars}</span>
</div>
</div>
`;
},
onInputReceived(portName, value, ctx) {
if (portName === "content-in" && typeof value === "string") {
ctx.emitOutput("post-out", { content: value, platform: "social", timestamp: Date.now() });
}
},
};
export const socialsApplets: AppletDefinition[] = [postDraft];