import Link from "next/link";
import { pathsConfig } from "~/config/paths";
interface Mention {
id: string;
meshId: string;
meshName: string;
topicName: string;
senderName: string;
snippet: string;
createdAt: string;
}
const monoStyle = { fontFamily: "var(--cm-font-mono)" } as const;
const serifStyle = { fontFamily: "var(--cm-font-serif)", fontWeight: 400 } as const;
function fmtRelative(iso: string): string {
const ms = Date.now() - new Date(iso).getTime();
if (ms < 60_000) return "now";
if (ms < 3_600_000) return `${Math.floor(ms / 60_000)}m`;
if (ms < 86_400_000) return `${Math.floor(ms / 3_600_000)}h`;
return `${Math.floor(ms / 86_400_000)}d`;
}
/**
* Highlight @mentions in clay so the reader's eye lands on the call-out.
* Matches the in-chat renderer; kept inline here to avoid pulling the
* client component into the server-rendered universe page.
*/
function renderSnippet(text: string): React.ReactNode[] {
const parts: React.ReactNode[] = [];
const re = /(^|\s)(@[A-Za-z0-9_-]+)/g;
let lastIndex = 0;
let m: RegExpExecArray | null;
let key = 0;
while ((m = re.exec(text)) !== null) {
const start = m.index + (m[1]?.length ?? 0);
if (start > lastIndex) {
parts.push({text.slice(lastIndex, start)});
}
parts.push(
{m[2]}
,
);
lastIndex = start + (m[2]?.length ?? 0);
}
if (lastIndex < text.length) {
parts.push({text.slice(lastIndex)});
}
return parts;
}
export const MentionsSection = ({ mentions }: { mentions: Mention[] }) => {
if (mentions.length === 0) return null;
return (
Recent mentions
{mentions.length} · last 7 days
{mentions.map((m) => (
-
{m.meshName}
·
#
{m.topicName}
·
{fmtRelative(m.createdAt)}
open →
{m.senderName}
{" "}
{renderSnippet(m.snippet)}
))}
);
};