compact todo groups: ride the "+" on the last visible row
In compact layout the add-to-do menu no longer takes a row of its own — it now renders inline on the last visible to-do, saving one line per group. A compact group is guaranteed to have at least one visible to-do (CategoryLane hides it otherwise), so there's always a row to attach it to; a defensive fallback keeps the "+" reachable in the off chance that invariant ever changes. Non-compact layout (popover, AI add, archive, progress pie) is unchanged.
This commit is contained in:
Brian Fertig
parent
171ec92b74
commit
938f59d10d
|
|
@ -6,6 +6,7 @@ import { CSS } from "@dnd-kit/utilities";
|
|||
import { useTheme } from "next-themes";
|
||||
import {
|
||||
Archive,
|
||||
ChevronRight,
|
||||
ClipboardList,
|
||||
GripVertical,
|
||||
MoreVertical,
|
||||
|
|
@ -94,6 +95,7 @@ export function GroupCard({ group }: { group: GroupDTO }) {
|
|||
const [todoAiOpen, setTodoAiOpen] = useState(false);
|
||||
const [todoCreateOpen, setTodoCreateOpen] = useState(false);
|
||||
const [statusUpdateOpen, setStatusUpdateOpen] = useState(false);
|
||||
const [expandedWhileComplete, setExpandedWhileComplete] = useState(false);
|
||||
|
||||
const {
|
||||
attributes,
|
||||
|
|
@ -143,6 +145,26 @@ export function GroupCard({ group }: { group: GroupDTO }) {
|
|||
// from the list entirely rather than shown crossed-out.
|
||||
const visibleTodos = compact ? group.todos.filter((t) => !t.completed) : group.todos;
|
||||
|
||||
// In the default view, a fully-checked-off group collapses down to just
|
||||
// its header (title, notes icon, kebab menu) with a disclosure triangle
|
||||
// in place of the drag-grip dots, so a board full of "done" groups
|
||||
// doesn't stay as visually loud as one still full of open work. The
|
||||
// triangle re-expands it back to the normal full card. Compact already
|
||||
// hides finished groups outright (see CategoryLane), so this only
|
||||
// applies to the default view.
|
||||
const showDisclosure = !compact && canArchive;
|
||||
// Reset back to collapsed each time the group freshly becomes fully
|
||||
// done, rather than remembering a stale expanded choice from its last
|
||||
// completion cycle. Adjusting state during render (comparing against
|
||||
// last render's value) instead of in a useEffect avoids an extra render
|
||||
// pass -- see https://react.dev/learn/you-might-not-need-an-effect.
|
||||
const [wasComplete, setWasComplete] = useState(canArchive);
|
||||
if (canArchive !== wasComplete) {
|
||||
setWasComplete(canArchive);
|
||||
if (canArchive) setExpandedWhileComplete(false);
|
||||
}
|
||||
const isCollapsed = showDisclosure && !expandedWhileComplete;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
|
|
@ -168,9 +190,26 @@ export function GroupCard({ group }: { group: GroupDTO }) {
|
|||
className="group flex min-w-0 flex-1 cursor-grab touch-none items-start gap-1 rounded-md outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
|
||||
aria-label={`Drag to move ${group.title}`}
|
||||
>
|
||||
<span className="mt-1 flex shrink-0 items-center justify-center text-muted-foreground/60 group-hover:text-muted-foreground">
|
||||
<GripVertical className="size-4" />
|
||||
</span>
|
||||
{showDisclosure ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpandedWhileComplete((v) => !v);
|
||||
}}
|
||||
className="mt-1 flex shrink-0 items-center justify-center text-muted-foreground/60 hover:text-foreground"
|
||||
aria-label={expandedWhileComplete ? `Collapse ${group.title}` : `Expand ${group.title}`}
|
||||
aria-expanded={expandedWhileComplete}
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn("size-4 transition-transform", expandedWhileComplete && "rotate-90")}
|
||||
/>
|
||||
</button>
|
||||
) : (
|
||||
<span className="mt-1 flex shrink-0 items-center justify-center text-muted-foreground/60 group-hover:text-muted-foreground">
|
||||
<GripVertical className="size-4" />
|
||||
</span>
|
||||
)}
|
||||
<h3 className="min-w-0 flex-1 truncate pt-1 text-sm font-semibold">{group.title}</h3>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center">
|
||||
|
|
@ -207,111 +246,116 @@ export function GroupCard({ group }: { group: GroupDTO }) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="mt-1 space-y-1">
|
||||
{visibleTodos.map((todo, index) => {
|
||||
const todoButton = (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingTodo(todo)}
|
||||
style={todo.completed ? undefined : { color: todoTextColor }}
|
||||
className={cn(
|
||||
"flex min-w-0 flex-1 items-center gap-1 text-left text-sm hover:underline",
|
||||
todo.completed && "text-muted-foreground line-through"
|
||||
)}
|
||||
>
|
||||
<span className="min-w-0 truncate">{todo.title}</span>
|
||||
{todo.details && (
|
||||
<StickyNote className="size-3 shrink-0 text-muted-foreground/70" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<ul className="mt-1 space-y-1">
|
||||
{visibleTodos.map((todo, index) => {
|
||||
const todoButton = (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingTodo(todo)}
|
||||
style={todo.completed ? undefined : { color: todoTextColor }}
|
||||
className={cn(
|
||||
"flex min-w-0 flex-1 items-center gap-1 text-left text-sm hover:underline",
|
||||
todo.completed && "text-muted-foreground line-through"
|
||||
)}
|
||||
>
|
||||
<span className="min-w-0 truncate">{todo.title}</span>
|
||||
{todo.details && (
|
||||
<StickyNote className="size-3 shrink-0 text-muted-foreground/70" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
// In compact, the "+" rides along on the last visible row
|
||||
// instead of taking a row of its own -- one less line per
|
||||
// group. (A compact group always has at least one unchecked
|
||||
// to-do -- CategoryLane hides it otherwise -- so there's always
|
||||
// a last row to put it on.)
|
||||
const isLastRow = compact && index === visibleTodos.length - 1;
|
||||
// In compact, the "+" rides along on the last visible row
|
||||
// instead of taking a row of its own -- one less line per
|
||||
// group. (A compact group always has at least one unchecked
|
||||
// to-do -- CategoryLane hides it otherwise -- so there's
|
||||
// always a last row to put it on.)
|
||||
const isLastRow = compact && index === visibleTodos.length - 1;
|
||||
|
||||
return (
|
||||
<li key={todo.id} className="flex items-start gap-2 py-0.5">
|
||||
<TodoCheckbox
|
||||
checked={todo.completed}
|
||||
onCheckedChange={(checked) =>
|
||||
toggleTodoDone(todo.id, group.id, group.categoryId, checked)
|
||||
}
|
||||
accentColor={borderColor}
|
||||
isDark={isDark}
|
||||
className="mt-0.5"
|
||||
aria-label={`Mark "${todo.title}" ${todo.completed ? "incomplete" : "complete"}`}
|
||||
/>
|
||||
{todo.details ? (
|
||||
<MouseFollowTooltip content={todo.details}>{todoButton}</MouseFollowTooltip>
|
||||
) : (
|
||||
todoButton
|
||||
)}
|
||||
{isLastRow && (
|
||||
return (
|
||||
<li key={todo.id} className="flex items-start gap-2 py-0.5">
|
||||
<TodoCheckbox
|
||||
checked={todo.completed}
|
||||
onCheckedChange={(checked) =>
|
||||
toggleTodoDone(todo.id, group.id, group.categoryId, checked)
|
||||
}
|
||||
accentColor={borderColor}
|
||||
isDark={isDark}
|
||||
className="mt-0.5"
|
||||
aria-label={`Mark "${todo.title}" ${todo.completed ? "incomplete" : "complete"}`}
|
||||
/>
|
||||
{todo.details ? (
|
||||
<MouseFollowTooltip content={todo.details}>{todoButton}</MouseFollowTooltip>
|
||||
) : (
|
||||
todoButton
|
||||
)}
|
||||
{isLastRow && (
|
||||
<AddTodoMenu
|
||||
group={group}
|
||||
aiConfigured={aiConfigured}
|
||||
onAddClick={() => setTodoCreateOpen(true)}
|
||||
onAiClick={() => setTodoAiOpen(true)}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
{compact ? (
|
||||
// Defensive fallback -- shouldn't normally happen, since
|
||||
// CategoryLane already hides a compact group with zero
|
||||
// visible to-dos, but keeps the "+" reachable if that ever
|
||||
// changes.
|
||||
visibleTodos.length === 0 && (
|
||||
<div className="mt-1 flex justify-end">
|
||||
<AddTodoMenu
|
||||
group={group}
|
||||
aiConfigured={aiConfigured}
|
||||
onAddClick={() => setTodoCreateOpen(true)}
|
||||
onAiClick={() => setTodoAiOpen(true)}
|
||||
aiConfigured={aiConfigured}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<div className="mt-1">
|
||||
<TodoCreatePopover groupId={group.id} categoryId={group.categoryId} />
|
||||
</div>
|
||||
|
||||
{aiConfigured && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start gap-2 text-muted-foreground"
|
||||
onClick={() => setTodoAiOpen(true)}
|
||||
>
|
||||
<Sparkles className="size-3.5" />
|
||||
Add using AI
|
||||
</Button>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
{compact ? (
|
||||
// Defensive fallback -- shouldn't normally happen, since
|
||||
// CategoryLane already hides a compact group with zero visible
|
||||
// to-dos, but keeps the "+" reachable if that ever changes.
|
||||
visibleTodos.length === 0 && (
|
||||
<div className="mt-1 flex justify-end">
|
||||
<AddTodoMenu
|
||||
group={group}
|
||||
onAddClick={() => setTodoCreateOpen(true)}
|
||||
onAiClick={() => setTodoAiOpen(true)}
|
||||
aiConfigured={aiConfigured}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<div className="mt-1">
|
||||
<TodoCreatePopover groupId={group.id} categoryId={group.categoryId} />
|
||||
</div>
|
||||
{canArchive && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start gap-2 text-muted-foreground"
|
||||
onClick={() => archiveGroup(group.id, group.categoryId)}
|
||||
>
|
||||
<Archive className="size-3.5" />
|
||||
Archive
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{aiConfigured && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start gap-2 text-muted-foreground"
|
||||
onClick={() => setTodoAiOpen(true)}
|
||||
>
|
||||
<Sparkles className="size-3.5" />
|
||||
Add using AI
|
||||
</Button>
|
||||
<TodoProgressPie
|
||||
completed={completedCount}
|
||||
total={group.todos.length}
|
||||
accentColor={pieAccentColor}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{canArchive && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start gap-2 text-muted-foreground"
|
||||
onClick={() => archiveGroup(group.id, group.categoryId)}
|
||||
>
|
||||
<Archive className="size-3.5" />
|
||||
Archive
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<TodoProgressPie
|
||||
completed={completedCount}
|
||||
total={group.todos.length}
|
||||
accentColor={pieAccentColor}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue