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}
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue