Refactor todo details toggle to inline icon button

- Replace the separate "Details" label and edit/preview button row with
  a compact icon button beside the title input
- Remove the "No details yet" placeholder to keep the row compact when
  details are not being edited
- Pin the title input to a fixed width so it no longer stretches to fill
  the row
This commit is contained in:
Brian Fertig 2026-09-29 07:31:29 -06:00
parent 4ceb9011a3
commit b6d72fff95
1 changed files with 12 additions and 20 deletions

View File

@ -503,8 +503,18 @@ function SessionTodoRow({
autoFocus={draft.isNew && !draft.title} autoFocus={draft.isNew && !draft.title}
onChange={(e) => onChangeLocal({ title: e.target.value })} onChange={(e) => onChangeLocal({ title: e.target.value })}
style={draft.completed ? undefined : { color: todoTextColor }} style={draft.completed ? undefined : { color: todoTextColor }}
className={cn("flex-1", draft.completed && "text-muted-foreground line-through")} className={cn("w-40 shrink-0", draft.completed && "text-muted-foreground line-through")}
/> />
<Button
type="button"
variant="ghost"
size="icon"
className="shrink-0"
onClick={() => setEditingDetails((v) => !v)}
aria-label={`${editingDetails ? "Preview" : "Edit"} details for "${draft.title || "new to-do"}"`}
>
<Pencil className="size-4" />
</Button>
{onCollapse && ( {onCollapse && (
<Button <Button
variant="ghost" variant="ghost"
@ -527,20 +537,6 @@ function SessionTodoRow({
</Button> </Button>
</div> </div>
<div className="flex items-center justify-between">
<Label className="text-xs text-muted-foreground">Details</Label>
<Button
type="button"
variant="ghost"
size="sm"
className="h-6 gap-1 px-2 text-xs text-muted-foreground"
onClick={() => setEditingDetails((v) => !v)}
>
<Pencil className="size-3" />
{editingDetails ? "Preview" : "Edit"}
</Button>
</div>
{editingDetails ? ( {editingDetails ? (
<MDEditor <MDEditor
value={draft.details} value={draft.details}
@ -552,11 +548,7 @@ function SessionTodoRow({
<div className="max-h-40 overflow-y-auto rounded-md border p-2"> <div className="max-h-40 overflow-y-auto rounded-md border p-2">
<MarkdownPreview source={draft.details} /> <MarkdownPreview source={draft.details} />
</div> </div>
) : ( ) : null}
<p className="rounded-md border border-dashed p-3 text-center text-xs text-muted-foreground">
No details yet.
</p>
)}
</div> </div>
); );
} }