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:
parent
4ceb9011a3
commit
b6d72fff95
|
|
@ -503,8 +503,18 @@ function SessionTodoRow({
|
|||
autoFocus={draft.isNew && !draft.title}
|
||||
onChange={(e) => onChangeLocal({ title: e.target.value })}
|
||||
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 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -527,20 +537,6 @@ function SessionTodoRow({
|
|||
</Button>
|
||||
</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 ? (
|
||||
<MDEditor
|
||||
value={draft.details}
|
||||
|
|
@ -552,11 +548,7 @@ function SessionTodoRow({
|
|||
<div className="max-h-40 overflow-y-auto rounded-md border p-2">
|
||||
<MarkdownPreview source={draft.details} />
|
||||
</div>
|
||||
) : (
|
||||
<p className="rounded-md border border-dashed p-3 text-center text-xs text-muted-foreground">
|
||||
No details yet.
|
||||
</p>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue