amosblomqvist
d19df86b13
Owner round (2026-10-05): the same act (a human thinking in text) had two visual languages — the quiz cards' quote block vs the practice container with a collapsing chevron and raw pre-wrap text that read oversized. - components/thinking-block.tsx: the quiz quote-block recipe verbatim (rail + uppercase label + lh-prose at foreground/90) carried by a faint user-side shell — ml-auto, max-w-[95%] mirroring the user bubble's geometry, px-4/py-3 rhythm. Never collapsible. Rails reuse the existing vocabulary: primary = committed register, muted = working register. - ThinkingCard becomes the practice adapter: 'Your solution' (primary) / 'Your thinking' (muted) — one component, two registers. - The reading channel LIFTS out of the answered card: chronologically prior to the question, it renders above it as its own user-side block under the plain 'Your thinking' label; the in-card inset and the 'while reading' phrasing are gone. - lh-card-enter (globals.css): the one-shot 150ms fade+rise mount, the app's motion register; honors reduced-motion.
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** The unified user-thinking block (owner round, 2026-10-05): ONE visual
|
|
* language for every surface where the learner's own thinking renders —
|
|
* practice thinking traces (nudge / commit), the reading channel lifted
|
|
* above the answered card. The recipe is the quiz cards' quote block
|
|
* verbatim (rail + uppercase label + prose), carried by a faint shell
|
|
* so it still reads user-side at a glance — right-aligned, message
|
|
* width, never collapsible (they arrive open; collapsing bought
|
|
* nothing and cost the chevron-on-the-right weirdness).
|
|
*
|
|
* Rails reuse the existing vocabulary: primary for the committed
|
|
* register (the quiz answer thinking, practice commits), muted for the
|
|
* working register (nudges, reading thoughts). */
|
|
|
|
export function ThinkingBlock({
|
|
label,
|
|
text,
|
|
rail = "muted",
|
|
testId,
|
|
dataCommit,
|
|
}: {
|
|
label: string;
|
|
text: string;
|
|
rail?: "primary" | "muted";
|
|
testId?: string;
|
|
/** The practice marker's register flag (commit vs nudge). */
|
|
dataCommit?: boolean;
|
|
}) {
|
|
return (
|
|
<div
|
|
data-testid={testId}
|
|
data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"}
|
|
className="lh-card-enter ml-auto max-w-[95%] rounded-2xl border border-border/60 bg-muted/40 px-4 py-3"
|
|
>
|
|
<div className={cn("border-l-2 pl-3", rail === "primary" ? "border-primary/40" : "border-muted-foreground/30")}>
|
|
<span className="mb-0.5 block text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
{label}
|
|
</span>
|
|
<span className="lh-prose block whitespace-pre-wrap text-foreground/90">{text}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|