@geminilight/mindos 0.6.73 → 0.6.74

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

@@ -1,213 +0,0 @@
-'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

@@ -1,106 +0,0 @@
-'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

@@ -1,354 +0,0 @@
-'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>
-  );
-}