UpdateItem.tsx

import { SignalUpdate } from "../types";

interface UpdateItemProps {
	update: SignalUpdate;
}

export function UpdateItem({ update }: UpdateItemProps) {
	const time = new Date(
		update.timestamp || update.receivedAt
	).toLocaleTimeString();
	const depth = "  ".repeat(update.depth || 0);

	const formatValue = (value: any): string => {
		if (value === null) return "null";
		if (value === undefined) return "undefined";
		if (typeof value === "string") return `"${value}"`;
		if (typeof value === "function") return "function()";
		if (typeof value === "object") {
			try {
				return JSON.stringify(value, null, 0);
			} catch {
				return "[Object]";
			}
		}
		return String(value);
	};

	if (update.type === "effect") {
		return (
			<div
				style={{ marginLeft: `${(update.depth || 0) * 4}px` }}
				className={`update-item ${update.type}`}
			>
				<div className="update-header">
					<span className="signal-name">
						{depth}↪️ {update.signalName}
						{update.componentNames && update.componentNames.length > 0 && (
							<ul class="component-list">
								<span class="component-name-header">Rerendered</span>
								{update.componentNames?.map((componentName, i) => (
									<li key={componentName} class="component-name">
										{componentName}
										{i < update.componentNames!.length - 1 ? ", " : ""}
									</li>
								))}
							</ul>
						)}
					</span>
					<span className="update-time">{time}</span>
				</div>
			</div>
		);
	}

	const prevValue = formatValue(update.prevValue);
	const newValue = formatValue(update.newValue);

	return (
		<div
			style={{ marginLeft: `${(update.depth || 0) * 4}px` }}
			class={`update-item ${update.type}`}
		>
			<div class="update-header">
				<span class="signal-name">
					{depth}
					{update.depth === 0 ? "🎯" : "↪️"} {update.signalName}
				</span>
				<span class="update-time">{time}</span>
			</div>
			<div class="value-change">
				<span class="value-prev">{prevValue}</span>
				<span class="value-arrow">→</span>
				<span class="value-new">{newValue}</span>
			</div>
			{update.componentNames && update.componentNames.length > 0 && (
				<ul class="component-list">
					<span class="component-name-header">Rerendered</span>
					{update.componentNames?.map((componentName, i) => (
						<li key={componentName} class="component-name">
							{componentName}
							{i < update.componentNames!.length - 1 ? ", " : ""}
						</li>
					))}
				</ul>
			)}
		</div>
	);
}