refactor: enforce frontend view model boundaries

packages/ui/src/EntryCard/EntryCard.tsx

@@ -13,24 +13,25 @@ type EntryCardProps = {
 	initial: string;
 	metadata: string;
 	title: string;
-	tone: "negative" | "neutral" | "positive";
+	tone: "negative"
+		| "neutral"
+		| "positive";
 	value: string;
 	valueLabel: string;
 };
 
 const EntryCard: FC<EntryCardProps> = (props) => {
-	return (
-		<Paper
-			className={classes.row}
-			style={
-				(props.color)
-					? ({
-							background: `color-mix(in srgb, var(--mantine-color-${props.color}-0) 45%, var(--wl-color-surface))`,
-						})
-					: undefined
+	const surfaceStyle = props.color
+		? {
+				background: `color-mix(in srgb, var(--mantine-color-${props.color}-0) 45%, var(--wl-color-surface))`,
 			}
-			withBorder
-		>
+		: undefined;
+
+	const valueContainerClass = props.actions ? classes.valueFooter : undefined;
+	const valueLabelClass = `${classes[props.tone]} ${props.actions ? classes.valueLabel : ""}`;
+
+	return (
+		<Paper className={classes.row} style={surfaceStyle} withBorder>
 			<Avatar
 				alt=""
 				aria-hidden="true"
@@ -40,26 +41,29 @@ const EntryCard: FC<EntryCardProps> = (props) => {
 			>
 				{props.icon ?? props.initial}
 			</Avatar>
+
 			<Stack className={classes.identity} gap={2}>
 				<Text fw={700} lineClamp={1}>
 					{props.title}
 				</Text>
+
 				<Text c="dimmed" size="sm">
 					{props.metadata}
 				</Text>
+
 				{props.details}
 			</Stack>
+
 			<Stack className={classes.value} gap={2}>
 				<Text className={classes[props.tone]} fw={700}>
 					{props.value}
 				</Text>
-				<div className={(props.actions) ? (classes.valueFooter) : undefined}>
-					<Text
-						className={`${classes[props.tone]} ${props.actions ? classes.valueLabel : ""}`}
-						size="sm"
-					>
+
+				<div className={valueContainerClass}>
+					<Text className={valueLabelClass} size="sm">
 						{props.valueLabel}
 					</Text>
+
 					{Boolean(props.actions) && (
 						<div className={classes.actions}>{props.actions}</div>
 					)}