mirror of
https://github.com/bretzel-app/crumbs.git
synced 2026-10-12 20:06:57 +02:00
feat: nested checklist UI — indentation, parent labels, drag-to-indent
Checklist component changes: - Import logic from checklist utility module - Tab/Shift+Tab indent/outdent with sibling adoption - Indented rendering (pl-8) for child items in active section - Done section groups checked children under read-only parent labels - Enter on child creates sibling at same indent level - Backspace on parent orphans children to top-level - Directional lock drag: horizontal = indent/outdent, vertical = reorder (uses window capture-phase listeners + pending indent applied after DnD finalize to avoid corrupting svelte-dnd-action internal state) - flushSync for state updates from window event listeners Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
committed by
Fred Cabassut
Fred Cabassut
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
9fb8acc719
commit
2306883503
@@ -3,14 +3,10 @@
|
||||
import Plus from 'lucide-svelte/icons/plus';
|
||||
import GripVertical from 'lucide-svelte/icons/grip-vertical';
|
||||
import ChevronRight from 'lucide-svelte/icons/chevron-right';
|
||||
import { onDestroy, flushSync } from 'svelte';
|
||||
import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
interface ChecklistItem {
|
||||
id: string;
|
||||
text: string;
|
||||
checked: boolean;
|
||||
}
|
||||
import { type ChecklistItem, generateId, parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem } from '$lib/utils/checklist.js';
|
||||
|
||||
interface Props {
|
||||
content: string;
|
||||
@@ -40,25 +36,43 @@
|
||||
let doneItems = $derived(items.filter((i) => i.checked));
|
||||
let doneCount = $derived(doneItems.length);
|
||||
|
||||
function generateId(): string {
|
||||
return crypto.randomUUID();
|
||||
interface DoneSectionGroup {
|
||||
parentLabel: ChecklistItem | null;
|
||||
children: ChecklistItem[];
|
||||
}
|
||||
|
||||
function parseChecklist(text: string): ChecklistItem[] {
|
||||
if (!text.trim()) return [{ id: generateId(), text: '', checked: false }];
|
||||
const lines = text.split('\n');
|
||||
return lines.map((line) => {
|
||||
if (line.startsWith('- [x] ')) return { id: generateId(), text: line.slice(6), checked: true };
|
||||
if (line.startsWith('- [ ] ')) return { id: generateId(), text: line.slice(6), checked: false };
|
||||
return { id: generateId(), text: line, checked: false };
|
||||
});
|
||||
}
|
||||
let doneSectionGroups = $derived.by(() => {
|
||||
const groups: DoneSectionGroup[] = [];
|
||||
const childrenByParent = new Map<string, ChecklistItem[]>();
|
||||
const topLevelDone: ChecklistItem[] = [];
|
||||
|
||||
function serializeChecklist(list: ChecklistItem[]): string {
|
||||
return list
|
||||
.map((item) => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
|
||||
.join('\n');
|
||||
}
|
||||
for (const item of doneItems) {
|
||||
if (item.parentId) {
|
||||
const siblings = childrenByParent.get(item.parentId) ?? [];
|
||||
siblings.push(item);
|
||||
childrenByParent.set(item.parentId, siblings);
|
||||
} else {
|
||||
topLevelDone.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
for (const item of topLevelDone) {
|
||||
const doneChildren = childrenByParent.get(item.id) ?? [];
|
||||
groups.push({ parentLabel: null, children: [item, ...doneChildren] });
|
||||
childrenByParent.delete(item.id);
|
||||
}
|
||||
|
||||
for (const [parentId, children] of childrenByParent) {
|
||||
const parent = items.find((i) => i.id === parentId);
|
||||
if (parent) {
|
||||
groups.push({ parentLabel: parent, children });
|
||||
} else {
|
||||
groups.push({ parentLabel: null, children });
|
||||
}
|
||||
}
|
||||
|
||||
return groups;
|
||||
});
|
||||
|
||||
function emitChange() {
|
||||
const serialized = serializeChecklist(items);
|
||||
@@ -67,11 +81,8 @@
|
||||
}
|
||||
|
||||
function toggleItem(id: string) {
|
||||
const item = items.find((i) => i.id === id);
|
||||
if (item) {
|
||||
item.checked = !item.checked;
|
||||
emitChange();
|
||||
}
|
||||
items = toggleItemWithCascade(id, items);
|
||||
emitChange();
|
||||
}
|
||||
|
||||
function updateText(id: string, text: string) {
|
||||
@@ -83,13 +94,16 @@
|
||||
}
|
||||
|
||||
function addItem(afterIndex: number) {
|
||||
const newItem = { id: generateId(), text: '', checked: false };
|
||||
const afterItem = items[afterIndex];
|
||||
const newItem: ChecklistItem = {
|
||||
id: generateId(),
|
||||
text: '',
|
||||
checked: false,
|
||||
parentId: afterItem?.parentId ?? null
|
||||
};
|
||||
items.splice(afterIndex + 1, 0, newItem);
|
||||
items = [...items];
|
||||
emitChange();
|
||||
// Focus by unique ID — positional indexing breaks when checked items
|
||||
// are interleaved in items[] (e.g. reopened notes) because the DOM
|
||||
// only renders active items as inputs
|
||||
const newId = newItem.id;
|
||||
setTimeout(() => {
|
||||
document.querySelector<HTMLInputElement>(`[data-item-id="${newId}"]`)?.focus();
|
||||
@@ -97,7 +111,11 @@
|
||||
}
|
||||
|
||||
function removeItem(id: string) {
|
||||
if (items.length <= 1) return;
|
||||
if (items.length <= 1) {
|
||||
if (items[0].parentId) items[0].parentId = null;
|
||||
return;
|
||||
}
|
||||
items = items.map((i) => (i.parentId === id ? { ...i, parentId: null } : i));
|
||||
const index = items.findIndex((i) => i.id === id);
|
||||
items.splice(index, 1);
|
||||
items = [...items];
|
||||
@@ -124,30 +142,131 @@
|
||||
e.preventDefault();
|
||||
inputs[target].focus();
|
||||
}
|
||||
} else if (e.key === 'Tab' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
items = indentItem(id, items, activeItems);
|
||||
emitChange();
|
||||
} else if (e.key === 'Tab' && e.shiftKey) {
|
||||
e.preventDefault();
|
||||
items = outdentItem(id, items);
|
||||
emitChange();
|
||||
}
|
||||
}
|
||||
|
||||
// --- Directional lock drag handle ---
|
||||
// Instead of blocking DnD events (which corrupts its internal state),
|
||||
// we detect horizontal intent and store the pending operation. DnD runs
|
||||
// its full course unimpeded. After DnD finalizes, we apply the indent.
|
||||
let dragStartX = 0;
|
||||
let dragStartY = 0;
|
||||
let pendingIndent: { id: string; direction: 'indent' | 'outdent' } | null = null;
|
||||
let directionLocked = false;
|
||||
const LOCK_THRESHOLD = 10;
|
||||
const INDENT_THRESHOLD = 32;
|
||||
|
||||
function windowPointerMove(e: PointerEvent) {
|
||||
if (directionLocked) return;
|
||||
|
||||
const dx = Math.abs(e.clientX - dragStartX);
|
||||
const dy = Math.abs(e.clientY - dragStartY);
|
||||
if (dx >= LOCK_THRESHOLD || dy >= LOCK_THRESHOLD) {
|
||||
directionLocked = true;
|
||||
if (dx <= dy) {
|
||||
// Vertical — DnD handles it, we're done
|
||||
removeWindowListeners();
|
||||
}
|
||||
// Horizontal — keep listening for pointerup to measure total dx
|
||||
}
|
||||
}
|
||||
|
||||
function windowPointerUp(e: PointerEvent) {
|
||||
const dx = e.clientX - dragStartX;
|
||||
if (Math.abs(dx) > INDENT_THRESHOLD && directionLocked && currentDragItemId) {
|
||||
pendingIndent = {
|
||||
id: currentDragItemId,
|
||||
direction: dx > 0 ? 'indent' : 'outdent'
|
||||
};
|
||||
}
|
||||
removeWindowListeners();
|
||||
directionLocked = false;
|
||||
}
|
||||
|
||||
function addWindowListeners() {
|
||||
window.addEventListener('pointermove', windowPointerMove, { capture: true });
|
||||
window.addEventListener('pointerup', windowPointerUp, { capture: true });
|
||||
}
|
||||
|
||||
function removeWindowListeners() {
|
||||
window.removeEventListener('pointermove', windowPointerMove, { capture: true });
|
||||
window.removeEventListener('pointerup', windowPointerUp, { capture: true });
|
||||
}
|
||||
|
||||
let currentDragItemId = '';
|
||||
function handleDragPointerDown(e: PointerEvent, id: string) {
|
||||
dragStartX = e.clientX;
|
||||
dragStartY = e.clientY;
|
||||
directionLocked = false;
|
||||
pendingIndent = null;
|
||||
currentDragItemId = id;
|
||||
addWindowListeners();
|
||||
}
|
||||
|
||||
onDestroy(removeWindowListeners);
|
||||
|
||||
// --- DnD handlers ---
|
||||
function recomputeParentIds(reorderedItems: ChecklistItem[]): ChecklistItem[] {
|
||||
let lastTopLevelId: string | null = null;
|
||||
return reorderedItems.map((item) => {
|
||||
if (item.parentId === null) {
|
||||
lastTopLevelId = item.id;
|
||||
return item;
|
||||
}
|
||||
return { ...item, parentId: lastTopLevelId };
|
||||
});
|
||||
}
|
||||
|
||||
function handleDndConsider(e: CustomEvent<DndEvent<ChecklistItem>>) {
|
||||
// Merge reordered active items with done items
|
||||
items = [...e.detail.items, ...items.filter((i) => i.checked)];
|
||||
}
|
||||
|
||||
function handleDndFinalize(e: CustomEvent<DndEvent<ChecklistItem>>) {
|
||||
items = [...e.detail.items, ...items.filter((i) => i.checked)];
|
||||
const reorderedActive = recomputeParentIds(e.detail.items);
|
||||
items = [...reorderedActive, ...items.filter((i) => i.checked)];
|
||||
emitChange();
|
||||
|
||||
// Apply pending indent/outdent from horizontal drag (after DnD fully cleans up)
|
||||
if (pendingIndent && pendingIndent.id) {
|
||||
const { id, direction } = pendingIndent;
|
||||
pendingIndent = null;
|
||||
if (direction === 'indent') {
|
||||
items = indentItem(id, items, activeItems);
|
||||
} else {
|
||||
items = outdentItem(id, items);
|
||||
}
|
||||
emitChange();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-0.5" data-testid="checklist">
|
||||
<section
|
||||
use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: {} }}
|
||||
use:dragHandleZone={{ items: activeItems, flipDurationMs, dropTargetStyle: { outline: 'none' } }}
|
||||
onconsider={handleDndConsider}
|
||||
onfinalize={handleDndFinalize}
|
||||
class="space-y-0.5"
|
||||
>
|
||||
{#each activeItems as item (item.id)}
|
||||
<div class="group flex items-center gap-2 py-1.5" animate:flip={{ duration: flipDurationMs }}>
|
||||
<div use:dragHandle aria-label="drag handle" class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150" data-testid="checklist-drag-handle">
|
||||
<div class="group flex items-center gap-2 py-1.5 outline-none {item.parentId ? 'pl-8' : ''}"
|
||||
data-testid={item.parentId ? 'checklist-child-row' : undefined}
|
||||
animate:flip={{ duration: flipDurationMs }}>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div use:dragHandle
|
||||
aria-label="drag handle"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
onpointerdown={(e) => handleDragPointerDown(e, item.id)}
|
||||
class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150 touch-none outline-none"
|
||||
data-testid="checklist-drag-handle">
|
||||
<GripVertical class="h-4 w-4 text-[var(--text-muted)]" />
|
||||
</div>
|
||||
<input
|
||||
@@ -200,29 +319,38 @@
|
||||
</button>
|
||||
|
||||
{#if doneExpanded}
|
||||
<div class="mt-1 space-y-0.5 pl-5" data-testid="checklist-done-section">
|
||||
{#each doneItems as item (item.id)}
|
||||
<div class="group flex items-center gap-2 py-1.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checked}
|
||||
onchange={() => toggleItem(item.id)}
|
||||
class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
|
||||
data-testid="checklist-done-checkbox"
|
||||
/>
|
||||
<span class="flex-1 text-sm text-[var(--text-muted)] line-through">{item.text}</span>
|
||||
<button
|
||||
onclick={() => removeItem(item.id)}
|
||||
class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
|
||||
aria-label="Remove item"
|
||||
data-testid="checklist-done-remove"
|
||||
>
|
||||
<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-1 space-y-0.5" data-testid="checklist-done-section">
|
||||
{#each doneSectionGroups as group}
|
||||
{#if group.parentLabel}
|
||||
<div class="flex items-center gap-2 py-1.5 pl-5" data-testid="checklist-done-parent-label">
|
||||
<input type="checkbox" disabled class="h-4 w-4 rounded border-[var(--border-subtle)] opacity-50" />
|
||||
<span class="text-sm text-[var(--text-muted)]">{group.parentLabel.text}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#each group.children as item (item.id)}
|
||||
<div class="group flex items-center gap-2 py-1.5 {item.parentId ? 'pl-10' : 'pl-5'}">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checked}
|
||||
onchange={() => toggleItem(item.id)}
|
||||
class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]"
|
||||
data-testid="checklist-done-checkbox"
|
||||
/>
|
||||
<span class="flex-1 text-sm text-[var(--text-muted)] line-through">{item.text}</span>
|
||||
<button
|
||||
onclick={() => removeItem(item.id)}
|
||||
class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
|
||||
aria-label="Remove item"
|
||||
data-testid="checklist-done-remove"
|
||||
>
|
||||
<XIcon class="h-4 w-4 text-[var(--text-muted)]" />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user