@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/renderers/timeline/TimelineRenderer.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { RendererContext } from '@/lib/renderers/registry';
+
+// ─── Parser ───────────────────────────────────────────────────────────────────
+
+interface TimelineEntry {
+  heading: string;
+  date: Date | null;
+  body: string; // raw markdown lines joined
+  tags: string[];
+}
+
+// Detect date-like H2 headings: ## 2025-01-15, ## Jan 2025, ## 2025/01/15, etc.
+const DATE_RE = /(\d{4}[-/]\d{1,2}(?:[-/]\d{1,2})?|[A-Za-z]+ \d{4}|\d{4}年\d{1,2}月(?:\d{1,2}日)?)/;
+
+function parseDate(s: string): Date | null {
+  const m = DATE_RE.exec(s);
+  if (!m) return null;
+  const d = new Date(m[1].replace(/[/年月]/g, '-').replace('日', ''));
+  return isNaN(d.getTime()) ? null : d;
+}
+
+// Extract #tag or **tag** markers from body text
+function extractTags(body: string): string[] {
+  const tags: string[] = [];
+  const hashTags = body.match(/#([\w\u4e00-\u9fff]+)/g);
+  if (hashTags) tags.push(...hashTags.map(t => t.slice(1)));
+  return [...new Set(tags)];
+}
+
+function parseTimeline(content: string): TimelineEntry[] {
+  const lines = content.split('\n');
+  const entries: TimelineEntry[] = [];
+  let current: TimelineEntry | null = null;
+  let bodyLines: string[] = [];
+
+  const flush = () => {
+    if (!current) return;
+    const body = bodyLines.join('\n').trim();
+    current.body = body;
+    current.tags = extractTags(body);
+    entries.push(current);
+    current = null;
+    bodyLines = [];
+  };
+
+  for (const line of lines) {
+    // H1 is the document title — skip
+    if (/^# /.test(line)) continue;
+
+    // H2 = timeline entry
+    if (/^## /.test(line)) {
+      flush();
+      const heading = line.slice(3).trim();
+      current = { heading, date: parseDate(heading), body: '', tags: [] };
+      continue;
+    }
+
+    if (current) bodyLines.push(line);
+  }
+  flush();
+
+  return entries;
+}
+
+// ─── Markdown inline renderer (no extra dep) ──────────────────────────────────
+
+function renderInline(text: string): string {
+  return text
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/`(.+?)`/g, '<code class="font-display" style="font-size:0.85em;padding:1px 5px;border-radius:4px;background:var(--muted)">$1</code>')
+    .replace(/\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g, (_, target, alias) =>
+      `<span style="color:var(--amber);cursor:pointer" title="${target}">${alias ?? target}</span>`)
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color:var(--amber)">$1</a>');
+}
+
+function renderBody(body: string): string {
+  const lines = body.split('\n');
+  const out: string[] = [];
+  let inList = false;
+
+  const closeList = () => { if (inList) { out.push('</ul>'); inList = false; } };
+
+  for (const raw of lines) {
+    const line = raw.trimEnd();
+    if (!line) { closeList(); out.push('<br/>'); continue; }
+
+    if (/^### /.test(line)) { closeList(); out.push(`<h3 style="font-size:0.8rem;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;margin:.9em 0 .3em">${renderInline(line.slice(4))}</h3>`); continue; }
+    if (/^- /.test(line) || /^\* /.test(line)) {
+      if (!inList) { out.push('<ul style="margin:.3em 0;padding-left:1.2em;list-style:disc">'); inList = true; }
+      out.push(`<li style="margin:.15em 0;font-size:.82rem;color:var(--foreground)">${renderInline(line.slice(2))}</li>`);
+      continue;
+    }
+    if (/^\d+\. /.test(line)) {
+      if (!inList) { out.push('<ol style="margin:.3em 0;padding-left:1.2em">'); inList = true; }
+      out.push(`<li style="margin:.15em 0;font-size:.82rem;color:var(--foreground)">${renderInline(line.replace(/^\d+\. /, ''))}</li>`);
+      continue;
+    }
+    closeList();
+    out.push(`<p style="margin:.25em 0;font-size:.82rem;line-height:1.6;color:var(--foreground)">${renderInline(line)}</p>`);
+  }
+  closeList();
+  return out.join('');
+}
+
+// ─── Tag color ────────────────────────────────────────────────────────────────
+
+const TAG_PALETTE = [
+  { bg: 'rgba(200,135,58,0.12)', text: 'var(--amber)' },
+  { bg: 'rgba(122,173,128,0.12)', text: 'var(--success)' },
+  { bg: 'rgba(138,180,216,0.12)', text: 'var(--tool-read)' },
+  { bg: 'rgba(200,160,216,0.12)', text: 'var(--tool-search)' },
+];
+function tagColor(tag: string) {
+  let h = 0;
+  for (let i = 0; i < tag.length; i++) h = (h * 31 + tag.charCodeAt(i)) & 0xffff;
+  return TAG_PALETTE[h % TAG_PALETTE.length];
+}
+
+function formatDate(d: Date): string {
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function TimelineRenderer({ content }: RendererContext) {
+  const entries = useMemo(() => parseTimeline(content), [content]);
+
+  if (entries.length === 0) {
+    return (
+      <div className="font-display" style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontSize: 13 }}>
+        No timeline entries found. Add <code style={{ background: 'var(--muted)', padding: '1px 6px', borderRadius: 4 }}>## 2025-01-15</code> headings to create entries.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ maxWidth: 720, margin: '0 auto', padding: '1.5rem 0' }}>
+      {/* count pill */}
+      <div style={{ marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span className="font-display" style={{ fontSize: 11, color: 'var(--muted-foreground)' }}>
+          {entries.length} {entries.length === 1 ? 'entry' : 'entries'}
+        </span>
+      </div>
+
+      {/* timeline */}
+      <div style={{ position: 'relative', paddingLeft: 28 }}>
+        {/* vertical line */}
+        <div style={{ position: 'absolute', left: 6, top: 8, bottom: 8, width: 1, background: 'var(--border)' }} />
+
+        {entries.map((entry, idx) => (
+          <div key={idx} style={{ position: 'relative', marginBottom: '1.5rem' }}>
+            {/* dot */}
+            <div style={{
+              position: 'absolute',
+              left: -22,
+              top: 10,
+              width: 9,
+              height: 9,
+              borderRadius: '50%',
+              background: entry.date ? 'var(--amber)' : 'var(--border)',
+              outline: entry.date ? '2px solid var(--amber-dim)' : 'none',
+              zIndex: 1,
+            }} />
+
+            {/* card */}
+            <div style={{
+              background: 'var(--card)',
+              border: '1px solid var(--border)',
+              borderRadius: 10,
+              padding: '14px 18px',
+              transition: 'border-color .15s',
+            }}>
+              {/* header */}
+              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 8 }}>
+                <span style={{ fontWeight: 600, fontSize: '0.9rem', color: 'var(--foreground)' }}>
+                  {entry.heading}
+                </span>
+                {entry.date && (
+                  <span className="font-display" style={{ fontSize: '0.7rem', color: 'var(--muted-foreground)', opacity: 0.7, flexShrink: 0 }}>
+                    {formatDate(entry.date)}
+                  </span>
+                )}
+              </div>
+
+              {/* body */}
+              {entry.body && (
+                <div dangerouslySetInnerHTML={{ __html: renderBody(entry.body) }} />
+              )}
+
+              {/* tags */}
+              {entry.tags.length > 0 && (
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 10 }}>
+                  {entry.tags.map(tag => {
+                    const c = tagColor(tag);
+                    return (
+                      <span key={tag} className="font-display" style={{ fontSize: '0.68rem', padding: '1px 8px', borderRadius: 999, background: c.bg, color: c.text }}>
+                        #{tag}
+                      </span>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/_standalone/components/renderers/todo/FilterBar.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { Filter, X } from 'lucide-react';
+import type { Priority, FilterState } from '@/lib/parsing/parse-todos';
+import { PRIORITY_STYLES } from '@/lib/parsing/parse-todos';
+
+export default function FilterBar({ filters, onFilterChange, allTags, allPriorities, counts }: {
+  filters: FilterState;
+  onFilterChange: (f: FilterState) => void;
+  allTags: string[];
+  allPriorities: Priority[];
+  counts: { todo: number; inProgress: number; done: number; total: number };
+}) {
+  const hasFilters = filters.priority !== 'all' || filters.tag !== 'all' || filters.status !== 'all';
+
+  if (allTags.length === 0 && allPriorities.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 mb-4">
+      <Filter size={12} className="text-muted-foreground shrink-0" />
+
+      {/* Status filter */}
+      <div className="flex items-center rounded-lg border border-border overflow-hidden text-xs">
+        <button
+          onClick={() => onFilterChange({ ...filters, status: 'all' })}
+          className={`px-2.5 py-1 transition-colors ${filters.status === 'all' ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:bg-muted/50'}`}
+        >
+          All {counts.total}
+        </button>
+        <button
+          onClick={() => onFilterChange({ ...filters, status: 'todo' })}
+          className={`px-2.5 py-1 transition-colors border-l border-border ${filters.status === 'todo' ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:bg-muted/50'}`}
+        >
+          Todo {counts.todo}
+        </button>
+        <button
+          onClick={() => onFilterChange({ ...filters, status: 'in-progress' })}
+          className={`px-2.5 py-1 transition-colors border-l border-border ${filters.status === 'in-progress' ? 'bg-[var(--amber)]/10 text-[var(--amber)] font-medium' : 'text-muted-foreground hover:bg-muted/50'}`}
+        >
+          In Progress {counts.inProgress}
+        </button>
+        <button
+          onClick={() => onFilterChange({ ...filters, status: 'done' })}
+          className={`px-2.5 py-1 transition-colors border-l border-border ${filters.status === 'done' ? 'bg-emerald-500/10 text-emerald-500 font-medium' : 'text-muted-foreground hover:bg-muted/50'}`}
+        >
+          Done {counts.done}
+        </button>
+      </div>
+
+      {/* Priority filter */}
+      {allPriorities.length > 0 && (
+        <div className="flex items-center gap-1">
+          {allPriorities.map(p => {
+            if (!p) return null;
+            const s = PRIORITY_STYLES[p];
+            const active = filters.priority === p;
+            return (
+              <button
+                key={p}
+                onClick={() => onFilterChange({ ...filters, priority: active ? 'all' : p })}
+                className={`px-2 py-0.5 rounded text-xs font-mono font-medium border transition-colors ${
+                  active
+                    ? `${s.bg} ${s.text} ${s.border}`
+                    : 'border-transparent text-muted-foreground hover:bg-muted'
+                }`}
+              >
+                {p}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Tag filter */}
+      {allTags.length > 0 && (
+        <div className="flex items-center gap-1">
+          {allTags.map(tag => {
+            const active = filters.tag === tag;
+            return (
+              <button
+                key={tag}
+                onClick={() => onFilterChange({ ...filters, tag: active ? 'all' : tag })}
+                className={`px-2 py-0.5 rounded-full text-xs transition-colors ${
+                  active
+                    ? 'bg-[var(--amber)]/15 text-[var(--amber)]'
+                    : 'text-muted-foreground hover:bg-muted'
+                }`}
+              >
+                #{tag}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {hasFilters && (
+        <button
+          onClick={() => onFilterChange({ priority: 'all', tag: 'all', status: 'all' })}
+          className="flex items-center gap-1 px-2 py-0.5 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        >
+          <X size={10} /> Clear
+        </button>
+      )}
+    </div>
+  );
+}

package/_standalone/components/renderers/todo/SectionCard.tsx

@@ -0,0 +1,354 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import {
+  CheckSquare, Square, ChevronDown, ChevronRight, Plus, Trash2,
+  Circle, Clock, Calendar,
+} from 'lucide-react';
+import type { TodoStatus, Priority, TodoItem, SectionMeta, FilterState } from '@/lib/parsing/parse-todos';
+import {
+  cycleStatus, dateUrgency, countByStatus, countTotal,
+  sectionStyle, matchesFilter, hasMatchingDescendant,
+  PRIORITY_STYLES, DATE_STYLES,
+} from '@/lib/parsing/parse-todos';
+
+// ─── Badge & icon components ─────────────────────────────────────────────────
+
+function PriorityBadge({ priority }: { priority: Priority }) {
+  if (!priority) return null;
+  const s = PRIORITY_STYLES[priority];
+  return (
+    <span className={`inline-flex items-center px-1.5 py-0 rounded text-[10px] font-mono font-semibold leading-4 border shrink-0 ${s.bg} ${s.text} ${s.border}`}>
+      {priority}
+    </span>
+  );
+}
+
+function DueDateBadge({ dateStr, status }: { dateStr: string | null; status: TodoStatus }) {
+  if (!dateStr || status === 'done') return null;
+  const urgency = dateUrgency(dateStr);
+  if (!urgency) return null;
+  const s = DATE_STYLES[urgency];
+  return (
+    <span className={`inline-flex items-center gap-0.5 px-1.5 py-0 rounded text-[10px] leading-4 shrink-0 ${s.text} ${s.bg}`}>
+      <Calendar size={9} />
+      {dateStr}
+    </span>
+  );
+}
+
+function TagBadge({ tag }: { tag: string }) {
+  return (
+    <span className="inline-flex items-center px-1.5 py-0 rounded-full text-[10px] leading-4 text-muted-foreground bg-muted/60 shrink-0">
+      #{tag}
+    </span>
+  );
+}
+
+function StatusIcon({ status, onClick }: { status: TodoStatus; onClick: () => void }) {
+  return (
+    <button onClick={onClick} className="shrink-0 transition-colors" title="Click to cycle status">
+      {status === 'done' && (
+        <CheckSquare size={15} style={{ color: 'var(--amber)' }} />
+      )}
+      {status === 'in-progress' && (
+        <Circle size={15} className="text-[var(--amber)] fill-[var(--amber)]/20" />
+      )}
+      {status === 'todo' && (
+        <Square size={15} style={{ color: 'var(--muted-foreground)' }} />
+      )}
+    </button>
+  );
+}
+
+// ─── Inline editable text ────────────────────────────────────────────────────
+
+function InlineText({
+  text,
+  status,
+  onRename,
+}: {
+  text: string;
+  status: TodoStatus;
+  onRename: (newText: string) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(text);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => { setValue(text); }, [text]);
+  useEffect(() => { if (editing) inputRef.current?.select(); }, [editing]);
+
+  function commit() {
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== text) onRename(trimmed);
+    else setValue(text);
+    setEditing(false);
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        onBlur={commit}
+        onKeyDown={e => {
+          if (e.key === 'Enter') commit();
+          if (e.key === 'Escape') { setValue(text); setEditing(false); }
+        }}
+        className="flex-1 bg-transparent border-b text-sm leading-relaxed outline-none min-w-0"
+        style={{ borderColor: 'var(--amber)', color: 'var(--foreground)' }}
+        onClick={e => e.stopPropagation()}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={`flex-1 text-sm leading-relaxed cursor-text min-w-0 ${
+        status === 'done'
+          ? 'line-through text-muted-foreground'
+          : 'text-foreground'
+      }`}
+      onDoubleClick={() => setEditing(true)}
+      title="Double-click to edit"
+    >
+      {text}
+    </span>
+  );
+}
+
+// ─── Add item input ──────────────────────────────────────────────────────────
+
+function AddItemRow({ onAdd }: { onAdd: (text: string) => void }) {
+  const [active, setActive] = useState(false);
+  const [value, setValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => { if (active) inputRef.current?.focus(); }, [active]);
+
+  function commit() {
+    const trimmed = value.trim();
+    if (trimmed) onAdd(trimmed);
+    setValue('');
+    setActive(false);
+  }
+
+  if (!active) {
+    return (
+      <button
+        onClick={() => setActive(true)}
+        className="flex items-center gap-1.5 w-full px-3 py-1.5 rounded-lg text-xs transition-colors hover:bg-muted/60 mt-1"
+        style={{ color: 'var(--muted-foreground)' }}
+      >
+        <Plus size={12} />
+        <span>Add item</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 mt-1">
+      <span className="w-[13px] shrink-0" />
+      <span className="shrink-0" style={{ color: 'var(--muted-foreground)' }}>
+        <Square size={15} />
+      </span>
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        onBlur={commit}
+        onKeyDown={e => {
+          if (e.key === 'Enter') commit();
+          if (e.key === 'Escape') { setValue(''); setActive(false); }
+        }}
+        placeholder="New item… (supports `P0` `03-28` #tag)"
+        className="flex-1 bg-transparent border-b text-sm outline-none"
+        style={{ borderColor: 'var(--amber)', color: 'var(--foreground)' }}
+      />
+    </div>
+  );
+}
+
+// ─── Todo item row (recursive) ───────────────────────────────────────────────
+
+function TodoItemRow({
+  item,
+  depth,
+  filters,
+  onCycleStatus,
+  onRename,
+  onDelete,
+}: {
+  item: TodoItem;
+  depth: number;
+  filters: FilterState;
+  onCycleStatus: (lineIndex: number, newStatus: TodoStatus) => void;
+  onRename: (lineIndex: number, newText: string) => void;
+  onDelete: (lineIndex: number) => void;
+}) {
+  const [open, setOpen] = useState(true);
+  const hasChildren = item.children.length > 0;
+  const selfMatch = matchesFilter(item, filters);
+  const childMatch = item.children.some(c => hasMatchingDescendant(c, filters));
+  const noFilter = filters.status === 'all' && filters.priority === 'all' && filters.tag === 'all';
+
+  if (!noFilter && !selfMatch && !childMatch) return null;
+
+  const urgency = dateUrgency(item.meta.dueDate);
+
+  return (
+    <div>
+      <div
+        className={`group flex items-center gap-2 py-1.5 px-2 rounded-lg transition-colors hover:bg-muted/60 ${
+          item.status === 'done' ? 'opacity-45' : ''
+        } ${urgency === 'overdue' && item.status !== 'done' ? 'bg-error/[0.03]' : ''}`}
+        style={{ paddingLeft: `${8 + depth * 20}px` }}
+      >
+        {hasChildren ? (
+          <button
+            onClick={() => setOpen(v => !v)}
+            className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {open ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
+          </button>
+        ) : (
+          <span className="w-[13px] shrink-0" />
+        )}
+
+        <StatusIcon
+          status={item.status}
+          onClick={() => onCycleStatus(item.lineIndex, cycleStatus(item.status))}
+        />
+
+        <InlineText
+          text={item.text}
+          status={item.status}
+          onRename={(newText) => onRename(item.lineIndex, newText)}
+        />
+
+        <div className="flex items-center gap-1 shrink-0">
+          <PriorityBadge priority={item.meta.priority} />
+          <DueDateBadge dateStr={item.meta.dueDate} status={item.status} />
+          {item.meta.tags.map(tag => <TagBadge key={tag} tag={tag} />)}
+        </div>
+
+        <button
+          onClick={() => onDelete(item.lineIndex)}
+          className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded hover:bg-destructive/10"
+          style={{ color: 'var(--muted-foreground)' }}
+          title="Delete item"
+        >
+          <Trash2 size={12} />
+        </button>
+      </div>
+
+      {hasChildren && open && (
+        <div>
+          {item.children.map(child => (
+            <TodoItemRow
+              key={child.id}
+              item={child}
+              depth={depth + 1}
+              filters={filters}
+              onCycleStatus={onCycleStatus}
+              onRename={onRename}
+              onDelete={onDelete}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Section card ────────────────────────────────────────────────────────────
+
+export default function SectionCard({
+  name,
+  meta,
+  filters,
+  defaultCollapsed,
+  onCycleStatus,
+  onRename,
+  onDelete,
+  onAdd,
+}: {
+  name: string;
+  meta: SectionMeta;
+  filters: FilterState;
+  defaultCollapsed?: boolean;
+  onCycleStatus: (lineIndex: number, newStatus: TodoStatus) => void;
+  onRename: (lineIndex: number, newText: string) => void;
+  onDelete: (lineIndex: number) => void;
+  onAdd: (afterLineIndex: number, text: string) => void;
+}) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed ?? false);
+  const style = sectionStyle(name);
+  const { items, lastLineIndex } = meta;
+  const done = countByStatus(items, 'done');
+  const inProgress = countByStatus(items, 'in-progress');
+  const total = countTotal(items);
+  const isDoneSection = name.includes('Done');
+
+  return (
+    <div className="border border-border rounded-xl overflow-hidden bg-card">
+      <button
+        onClick={() => setCollapsed(v => !v)}
+        className="w-full flex items-center justify-between px-4 py-3 hover:bg-muted/40 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <span className={`w-2 h-2 rounded-full shrink-0 ${style.dot}`} />
+          <span className={`text-xs font-semibold uppercase tracking-wider ${style.label} font-display`}>
+            {name}
+          </span>
+          <span className="text-xs text-muted-foreground tabular-nums">
+            {done}/{total}
+          </span>
+          {inProgress > 0 && (
+            <span className="flex items-center gap-0.5 text-[10px] text-[var(--amber)]">
+              <Clock size={9} /> {inProgress}
+            </span>
+          )}
+        </div>
+        {collapsed
+          ? <ChevronRight size={14} className="text-muted-foreground" />
+          : <ChevronDown size={14} className="text-muted-foreground" />
+        }
+      </button>
+
+      <div className="h-0.5 bg-muted mx-4">
+        <div
+          className="h-full rounded-full transition-all duration-500"
+          style={{
+            width: total ? `${(done / total) * 100}%` : '0%',
+            background: isDoneSection ? 'var(--success, #22c55e)' : 'var(--amber)',
+          }}
+        />
+      </div>
+
+      {!collapsed && (
+        <div className="px-2 py-2">
+          {items.map(item => (
+            <TodoItemRow
+              key={item.id}
+              item={item}
+              depth={0}
+              filters={filters}
+              onCycleStatus={onCycleStatus}
+              onRename={onRename}
+              onDelete={onDelete}
+            />
+          ))}
+          {items.length === 0 && (
+            <p className="text-xs text-muted-foreground px-4 py-2">No items</p>
+          )}
+          {!isDoneSection && (
+            <AddItemRow onAdd={(text) => onAdd(lastLineIndex, text)} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}