Other renders as an option row in history; ⌘/Ctrl+Enter submits thinking
- The learner's own typed Other answer now renders INSIDE the options container in the answered card, styled exactly like its selected siblings (border-primary bg-accent) — it is an option, not a loose quote floating outside the list. Quotes keep the learner's words. - The thinking field submits with ⌘↵ on macOS, Ctrl↵ elsewhere (metaKey || ctrlKey — the Gmail convention, same handler on every platform). Plain Enter stays a newline: the field is for dumping. A quiet "⌘/Ctrl + ↵ submits" hint sits next to Submit for discoverability (text mode keeps Enter-to-submit, no hint).
This commit is contained in:
@@ -41,9 +41,9 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
<MessageResponse>{answer.questionText}</MessageResponse>
|
||||
</div>
|
||||
|
||||
{answer.options && answer.options.length > 0 && (
|
||||
{((answer.options?.length ?? 0) > 0 || answer.other) && (
|
||||
<div className="flex flex-col gap-1.5 text-sm">
|
||||
{answer.options.map((opt) => {
|
||||
{answer.options?.map((opt) => {
|
||||
const sel = selectedIdx.has(opt.index);
|
||||
const key = isQuiz && correctIdx.has(opt.index);
|
||||
return (
|
||||
@@ -70,10 +70,20 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* The learner's own typed option is an OPTION — same container,
|
||||
same selected styling as its siblings, not a loose quote
|
||||
floating outside the list. Quotes keep the learner's words. */}
|
||||
{answer.other && (
|
||||
<div
|
||||
data-testid="answered-other"
|
||||
className="flex items-start gap-2 rounded-lg border border-primary bg-accent px-3 py-1.5"
|
||||
>
|
||||
<span>“{answer.other}”</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{answer.other && <div className="mt-2 text-sm">“{answer.other}”</div>}
|
||||
{answer.text && <div className="mt-2 whitespace-pre-wrap text-sm">“{answer.text}”</div>}
|
||||
{answer.dontKnow && isQuiz && <div className="mt-2 text-sm text-muted-foreground">Answered “I don't know”.</div>}
|
||||
|
||||
|
||||
@@ -412,6 +412,14 @@ function QuestionDockForm({
|
||||
<textarea
|
||||
value={thinking}
|
||||
onChange={(e) => setThinking(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
// ⌘↵ on macOS, Ctrl↵ elsewhere — the Gmail convention; plain
|
||||
// Enter stays a newline (this field is for dumping).
|
||||
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
placeholder="Why this answer? What are you unsure about? Say as much as you like — the teacher reads all of this."
|
||||
rows={1}
|
||||
className={cn(
|
||||
@@ -422,11 +430,16 @@ function QuestionDockForm({
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<div className="flex items-center justify-end p-1">
|
||||
<div className="flex items-center justify-between gap-2 p-1">
|
||||
{qd.mode !== "text" && (
|
||||
<span aria-hidden className="pl-1.5 text-[10px] text-muted-foreground">
|
||||
⌘/Ctrl + ↵ submits
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!canSubmit}
|
||||
className="h-9 rounded-[10px] px-3.5 text-sm font-medium"
|
||||
className="ml-auto h-9 rounded-[10px] px-3.5 text-sm font-medium"
|
||||
>
|
||||
Submit answer
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user