@walknpm/todo-cli 1.1.0 → 2.0.0

package/web/js/app.js

@@ -0,0 +1,934 @@
+// app.js — full SPA application logic for todo-cli web UI.
+// Zero dependencies — vanilla JS with ES modules.
+
+const API = "";
+
+// ─── API helpers ───────────────────────────────────────────────────────────
+
+async function api(path, opts = {}) {
+  const res = await fetch(API + "/api/" + path, {
+    method: opts.method || "GET",
+    headers: opts.body ? { "Content-Type": "application/json" } : {},
+    body: opts.body ? JSON.stringify(opts.body) : undefined,
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }));
+    throw new Error(err.error || "Request failed");
+  }
+  return res.json();
+}
+
+// ─── State ─────────────────────────────────────────────────────────────────
+
+const state = {
+  todos: [],
+  stats: {},
+  view: "dashboard",
+  filter: null,        // null | "pending" | "done" | "overdue" | "today" | "pinned"
+  search: "",
+  category: null,
+  sort: "priority",
+  activeTimer: null,
+  calendarDate: new Date(),
+  selectedTodo: null,
+};
+
+// ─── Utils ─────────────────────────────────────────────────────────────────
+
+const $ = (sel) => document.querySelector(sel);
+const $$ = (sel) => [...document.querySelectorAll(sel)];
+
+function fmtDate(d) {
+  if (!d) return "";
+  return d;
+}
+
+function fmtTime(minutes) {
+  const m = Math.round(Number(minutes) || 0);
+  if (m < 60) return m + "m";
+  const h = Math.floor(m / 60);
+  const rem = m % 60;
+  return rem ? h + "h " + rem + "m" : h + "h";
+}
+
+function dueStatus(due) {
+  if (!due) return null;
+  const today = new Date();
+  const t = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const d = new Date(due + "T00:00:00");
+  const diff = Math.round((d - t) / 86400000);
+  if (diff < 0) return "overdue";
+  if (diff === 0) return "today";
+  if (diff <= 3) return "soon";
+  return null;
+}
+
+function escapeHtml(s) {
+  return String(s ?? "").replace(/[&<>"']/g, (c) => ({
+    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
+  }[c]));
+}
+
+function toast(msg, type = "info") {
+  const el = document.createElement("div");
+  el.className = "toast " + type;
+  el.textContent = msg;
+  $("#toast-container").appendChild(el);
+  setTimeout(() => { el.style.opacity = "0"; setTimeout(() => el.remove(), 300); }, 3000);
+}
+
+// ─── Data loading ──────────────────────────────────────────────────────────
+
+async function loadData() {
+  try {
+    const [todos, stats, timer] = await Promise.all([
+      api("todos"),
+      api("stats"),
+      api("timer").catch(() => null),
+    ]);
+    state.todos = todos;
+    state.stats = stats;
+    state.activeTimer = timer;
+    updateSidebarCounts();
+    updateCategoryList();
+    updateFloatingTimer();
+  } catch (err) {
+    toast("Failed to load: " + err.message, "error");
+  }
+}
+
+// ─── Sidebar ───────────────────────────────────────────────────────────────
+
+function updateSidebarCounts() {
+  const s = state.stats;
+  $("#count-pending").textContent = s.pending || 0;
+  $("#count-done").textContent = s.done || 0;
+  $("#count-overdue").textContent = s.overdue || 0;
+  $("#count-today").textContent = s.dueToday || 0;
+  $("#count-pinned").textContent = s.pinned || 0;
+}
+
+function updateCategoryList() {
+  const cats = Object.keys(state.stats.byCategory || {}).sort();
+  const el = $("#category-list");
+  el.innerHTML = cats.map((c) => `
+    <button class="nav-item" data-category="${escapeHtml(c)}">
+      <span>📁</span>
+      <span>${escapeHtml(c)}</span>
+      <span class="badge">${state.stats.byCategory[c]}</span>
+    </button>
+  `).join("");
+  el.querySelectorAll("[data-category]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      state.category = btn.dataset.category;
+      state.view = "list";
+      state.filter = null;
+      render();
+    });
+  });
+}
+
+// ─── Views ─────────────────────────────────────────────────────────────────
+
+function render() {
+  // Update nav active state
+  $$(".nav-item").forEach((n) => n.classList.remove("active"));
+  const activeNav = document.querySelector(`[data-view="${state.view}"]`);
+  if (activeNav) activeNav.classList.add("active");
+  if (state.filter) {
+    const f = document.querySelector(`[data-filter="${state.filter}"]`);
+    if (f) f.classList.add("active");
+  }
+
+  const titles = {
+    dashboard: "Dashboard", list: "All Todos", kanban: "Kanban Board",
+    calendar: "Calendar", timeline: "Timeline",
+  };
+  let title = titles[state.view] || "Dashboard";
+  if (state.filter) title = state.filter.charAt(0).toUpperCase() + state.filter.slice(1);
+  if (state.category) title = "Category: " + state.category;
+  $("#page-title").textContent = title;
+
+  const content = $("#content");
+  switch (state.view) {
+    case "dashboard": content.innerHTML = renderDashboard(); break;
+    case "list": content.innerHTML = renderList(); break;
+    case "kanban": content.innerHTML = renderKanban(); break;
+    case "calendar": content.innerHTML = renderCalendar(); break;
+    case "timeline": content.innerHTML = renderTimeline(); break;
+  }
+  attachViewEvents();
+}
+
+// ─── Dashboard View ────────────────────────────────────────────────────────
+
+function renderDashboard() {
+  const s = state.stats;
+  const recent = [...state.todos].sort((a, b) => (b.createdAt || "").localeCompare(a.createdAt || "")).slice(0, 5);
+  const upcoming = state.todos
+    .filter((t) => !t.done && t.due)
+    .sort((a, b) => a.due.localeCompare(b.due))
+    .slice(0, 5);
+
+  return `
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-icon bg-primary">📋</div>
+        <div class="stat-info">
+          <div class="stat-value">${s.total || 0}</div>
+          <div class="stat-label">Total Todos</div>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon bg-success">✓</div>
+        <div class="stat-info">
+          <div class="stat-value">${s.done || 0}</div>
+          <div class="stat-label">Completed</div>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon bg-warning">○</div>
+        <div class="stat-info">
+          <div class="stat-value">${s.pending || 0}</div>
+          <div class="stat-label">Pending</div>
+        </div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon bg-danger">⚠</div>
+        <div class="stat-info">
+          <div class="stat-value">${s.overdue || 0}</div>
+          <div class="stat-label">Overdue</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="stat-card" style="margin-bottom:24px">
+      <div class="stat-info" style="flex:1">
+        <div style="display:flex;justify-content:space-between;align-items:center">
+          <span style="font-weight:600">Completion Rate</span>
+          <span style="font-size:20px;font-weight:700;color:var(--primary)">${s.completionRate || 0}%</span>
+        </div>
+        <div class="progress-bar"><div class="progress-fill" style="width:${s.completionRate || 0}%"></div></div>
+      </div>
+    </div>
+
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
+      <div>
+        <h3 style="margin-bottom:12px;font-size:16px">Recent Todos</h3>
+        ${recent.length ? recent.map(t => todoCardHTML(t)).join("") : '<div class="empty-state"><div class="empty-state-text">No todos yet</div></div>'}
+      </div>
+      <div>
+        <h3 style="margin-bottom:12px;font-size:16px">Upcoming Deadlines</h3>
+        ${upcoming.length ? upcoming.map(t => todoCardHTML(t)).join("") : '<div class="empty-state"><div class="empty-state-text">No upcoming deadlines</div></div>'}
+      </div>
+    </div>
+  `;
+}
+
+function todoCardHTML(t) {
+  const ds = dueStatus(t.due);
+  const dueClass = ds === "overdue" ? "overdue" : ds === "today" ? "due-today" : "";
+  return `
+    <div class="todo-item ${t.done ? "done" : ""} ${t.pinned ? "pinned" : ""}" data-id="${t.id}" onclick="window.app.showDetail(${t.id})">
+      <div class="todo-checkbox ${t.done ? "checked" : ""}" onclick="event.stopPropagation();window.app.toggleTodo(${t.id})"></div>
+      <div class="todo-content">
+        <div class="todo-title">${escapeHtml(t.title)}</div>
+        <div class="todo-meta">
+          <span class="priority-badge priority-${t.priority}">${t.priority}</span>
+          ${t.category ? `<span class="meta-item">📁 ${escapeHtml(t.category)}</span>` : ""}
+          ${t.due ? `<span class="meta-item ${dueClass}">📅 ${t.due}</span>` : ""}
+          ${t.assignee ? `<span class="meta-item">👤 ${escapeHtml(t.assignee)}</span>` : ""}
+          ${t.pinned ? '<span class="meta-item">📌</span>' : ""}
+          ${t.recurring ? '<span class="meta-item">⟳</span>' : ""}
+          ${t.timerStartedAt ? '<span class="meta-item">⏱</span>' : ""}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ─── List View ─────────────────────────────────────────────────────────────
+
+function getFilteredTodos() {
+  let todos = state.todos.slice();
+  if (state.search) {
+    const kw = state.search.toLowerCase();
+    todos = todos.filter((t) =>
+      t.title.toLowerCase().includes(kw) ||
+      t.category.toLowerCase().includes(kw) ||
+      t.note.toLowerCase().includes(kw) ||
+      t.assignee.toLowerCase().includes(kw) ||
+      t.tags.some((tag) => tag.includes(kw))
+    );
+  }
+  if (state.filter === "pending") todos = todos.filter((t) => !t.done);
+  else if (state.filter === "done") todos = todos.filter((t) => t.done);
+  else if (state.filter === "overdue") todos = todos.filter((t) => !t.done && dueStatus(t.due) === "overdue");
+  else if (state.filter === "today") todos = todos.filter((t) => !t.done && dueStatus(t.due) === "today");
+  else if (state.filter === "pinned") todos = todos.filter((t) => t.pinned);
+  if (state.category) todos = todos.filter((t) => t.category === state.category);
+  // Sort: pinned first, then by selected sort
+  todos.sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0));
+  return todos;
+}
+
+function renderList() {
+  const todos = getFilteredTodos();
+  const sorts = ["priority", "created", "due", "id", "title", "updated"];
+  return `
+    <div class="filter-bar">
+      ${["all", "pending", "done", "overdue", "today", "pinned"].map((f) => `
+        <button class="filter-chip ${(!state.filter && f === "all") || state.filter === f ? "active" : ""}" data-filter-chip="${f}">
+          ${f.charAt(0).toUpperCase() + f.slice(1)}
+        </button>
+      `).join("")}
+      <select id="sort-select" class="filter-chip" style="padding:5px 12px">
+        ${sorts.map((s) => `<option value="${s}" ${state.sort === s ? "selected" : ""}>Sort: ${s}</option>`).join("")}
+      </select>
+    </div>
+    <div class="todo-list">
+      ${todos.length ? todos.map((t) => todoItemHTML(t)).join("") : `
+        <div class="empty-state">
+          <div class="empty-state-icon">📝</div>
+          <div class="empty-state-text">No todos found. Click "New Todo" to create one.</div>
+        </div>
+      `}
+    </div>
+  `;
+}
+
+function todoItemHTML(t) {
+  const ds = dueStatus(t.due);
+  const dueClass = ds === "overdue" ? "overdue" : ds === "today" ? "due-today" : "";
+  const subtaskProgress = t.subtasks && t.subtasks.length
+    ? `<div class="todo-subtask-bar"><div class="todo-subtask-fill" style="width:${(t.subtasks.filter(s=>s.done).length/t.subtasks.length*100)}%"></div></div>`
+    : "";
+  return `
+    <div class="todo-item ${t.done ? "done" : ""} ${t.pinned ? "pinned" : ""}" data-id="${t.id}">
+      <div class="todo-checkbox ${t.done ? "checked" : ""}" data-toggle="${t.id}"></div>
+      <div class="todo-content" data-detail="${t.id}">
+        <div class="todo-title">${escapeHtml(t.title)}</div>
+        <div class="todo-meta">
+          <span class="priority-badge priority-${t.priority}">${t.priority}</span>
+          ${t.category ? `<span class="meta-item">📁 ${escapeHtml(t.category)}</span>` : ""}
+          ${t.due ? `<span class="meta-item ${dueClass}">📅 ${t.due}</span>` : ""}
+          ${t.assignee ? `<span class="meta-item">👤 ${escapeHtml(t.assignee)}</span>` : ""}
+          ${t.estimate ? `<span class="meta-item">⏱ ${fmtTime(t.estimate)}</span>` : ""}
+          ${t.timeLogged ? `<span class="meta-item">✓ ${fmtTime(t.timeLogged)}</span>` : ""}
+          ${t.tags.map((tag) => `<span class="tag">${escapeHtml(tag)}</span>`).join("")}
+          ${t.pinned ? '<span class="meta-item">📌</span>' : ""}
+          ${t.recurring ? `<span class="meta-item">⟳ ${t.recurring.interval}${t.recurring.freq.charAt(0)}</span>` : ""}
+          ${t.timerStartedAt ? '<span class="meta-item" style="color:var(--success)">⏱ running</span>' : ""}
+          ${t.subtasks && t.subtasks.length ? `<span class="meta-item">☑ ${t.subtasks.filter(s=>s.done).length}/${t.subtasks.length}</span>` : ""}
+        </div>
+        ${subtaskProgress}
+      </div>
+      <div class="todo-actions">
+        <button class="icon-btn" data-pin="${t.id}" title="Pin" style="width:30px;height:30px">${t.pinned ? "📌" : "📍"}</button>
+        <button class="icon-btn" data-timer="${t.id}" title="Timer" style="width:30px;height:30px">⏱</button>
+        <button class="icon-btn" data-edit="${t.id}" title="Edit" style="width:30px;height:30px">✏</button>
+        <button class="icon-btn" data-delete="${t.id}" title="Delete" style="width:30px;height:30px;color:var(--danger)">🗑</button>
+      </div>
+    </div>
+  `;
+}
+
+// ─── Kanban View ───────────────────────────────────────────────────────────
+
+function renderKanban() {
+  const cols = [
+    { key: "pending", title: "📋 Pending", filter: (t) => !t.done },
+    { key: "done", title: "✅ Done", filter: (t) => t.done },
+  ];
+  return `
+    <div class="kanban-board">
+      ${cols.map((col) => {
+        const items = state.todos.filter(col.filter).sort((a, b) => (b.pinned?1:0)-(a.pinned?1:0));
+        return `
+          <div class="kanban-column" data-column="${col.key}">
+            <div class="kanban-column-header">
+              <span>${col.title}</span>
+              <span class="badge">${items.length}</span>
+            </div>
+            <div class="kanban-column-body" data-drop="${col.key}">
+              ${items.map((t) => kanbanCardHTML(t)).join("") || '<div style="text-align:center;padding:20px;color:var(--text-faint)">Drop here</div>'}
+            </div>
+          </div>
+        `;
+      }).join("")}
+    </div>
+  `;
+}
+
+function kanbanCardHTML(t) {
+  const ds = dueStatus(t.due);
+  const dueClass = ds === "overdue" ? "overdue" : ds === "today" ? "due-today" : "";
+  return `
+    <div class="kanban-card" draggable="true" data-id="${t.id}" data-detail="${t.id}">
+      <div style="font-weight:500;margin-bottom:6px">${escapeHtml(t.title)}</div>
+      <div class="todo-meta">
+        <span class="priority-badge priority-${t.priority}">${t.priority}</span>
+        ${t.category ? `<span class="meta-item">📁 ${escapeHtml(t.category)}</span>` : ""}
+        ${t.due ? `<span class="meta-item ${dueClass}">📅 ${t.due}</span>` : ""}
+        ${t.pinned ? '<span class="meta-item">📌</span>' : ""}
+        ${t.subtasks && t.subtasks.length ? `<span class="meta-item">☑ ${t.subtasks.filter(s=>s.done).length}/${t.subtasks.length}</span>` : ""}
+      </div>
+    </div>
+  `;
+}
+
+// ─── Calendar View ────────────────────────────────────────────────────────
+
+function renderCalendar() {
+  const d = state.calendarDate;
+  const year = d.getFullYear();
+  const month = d.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const startWeekday = firstDay.getDay();
+  const daysInMonth = lastDay.getDate();
+  const prevMonthDays = new Date(year, month, 0).getDate();
+  const today = new Date();
+  const todayStr = today.getFullYear() + "-" + String(today.getMonth()+1).padStart(2,"0") + "-" + String(today.getDate()).padStart(2,"0");
+
+  const monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+  const dayNames = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
+
+  let cells = [];
+  for (let i = startWeekday - 1; i >= 0; i--) {
+    cells.push({ day: prevMonthDays - i, otherMonth: true, dateStr: null });
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    const dateStr = year + "-" + String(month+1).padStart(2,"0") + "-" + String(i).padStart(2,"0");
+    cells.push({ day: i, otherMonth: false, dateStr, isToday: dateStr === todayStr });
+  }
+  while (cells.length % 7 !== 0) cells.push({ day: cells.length - daysInMonth - startWeekday + 1, otherMonth: true, dateStr: null });
+
+  return `
+    <div class="calendar-header">
+      <button class="btn btn-secondary" id="cal-prev">← Prev</button>
+      <h2 style="font-size:18px">${monthNames[month]} ${year}</h2>
+      <div style="display:flex;gap:8px">
+        <button class="btn btn-secondary" id="cal-today">Today</button>
+        <button class="btn btn-secondary" id="cal-next">Next →</button>
+      </div>
+    </div>
+    <div class="calendar-grid">
+      ${dayNames.map((d) => `<div class="calendar-day-header">${d}</div>`).join("")}
+      ${cells.map((c) => {
+        if (c.otherMonth) return '<div class="calendar-day empty"></div>';
+        const events = state.todos.filter((t) => t.due === c.dateStr);
+        return `
+          <div class="calendar-day ${c.isToday ? "today" : ""}">
+            <div class="calendar-day-num">${c.day}</div>
+            ${events.map((t) => `
+              <div class="calendar-event ${t.priority} ${t.done ? "done" : ""}" data-detail="${t.id}">${escapeHtml(t.title)}</div>
+            `).join("")}
+          </div>
+        `;
+      }).join("")}
+    </div>
+  `;
+}
+
+// ─── Timeline View ─────────────────────────────────────────────────────────
+
+function renderTimeline() {
+  const todos = [...state.todos].sort((a, b) => (b.createdAt || "").localeCompare(a.createdAt || ""));
+  if (!todos.length) {
+    return '<div class="empty-state"><div class="empty-state-icon">📜</div><div class="empty-state-text">No activity yet</div></div>';
+  }
+  return `
+    <div class="timeline">
+      ${todos.map((t) => {
+        const icon = t.done ? "✓" : t.timerStartedAt ? "⏱" : t.pinned ? "📌" : "○";
+        const bg = t.done ? "bg-success" : t.timerStartedAt ? "bg-warning" : "bg-primary";
+        const date = new Date(t.createdAt).toLocaleDateString("en", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+        return `
+          <div class="timeline-item">
+            <div class="timeline-line"></div>
+            <div class="timeline-dot stat-icon ${bg}">${icon}</div>
+            <div class="timeline-content" data-detail="${t.id}">
+              <div style="font-weight:500">${escapeHtml(t.title)}</div>
+              <div class="todo-meta">
+                <span class="priority-badge priority-${t.priority}">${t.priority}</span>
+                <span class="meta-item">${date}</span>
+                ${t.category ? `<span class="meta-item">📁 ${escapeHtml(t.category)}</span>` : ""}
+                ${t.due ? `<span class="meta-item">📅 ${t.due}</span>` : ""}
+              </div>
+            </div>
+          </div>
+        `;
+      }).join("")}
+    </div>
+  `;
+}
+
+// ─── View Events ───────────────────────────────────────────────────────────
+
+function attachViewEvents() {
+  // Todo checkbox toggle
+  $$("[data-toggle]").forEach((el) => {
+    el.addEventListener("click", (e) => { e.stopPropagation(); toggleTodo(Number(el.dataset.toggle)); });
+  });
+  // Todo detail
+  $$("[data-detail]").forEach((el) => {
+    el.addEventListener("click", (e) => { e.stopPropagation(); showDetail(Number(el.dataset.detail)); });
+  });
+  // Pin
+  $$("[data-pin]").forEach((el) => {
+    el.addEventListener("click", (e) => { e.stopPropagation(); pinTodo(Number(el.dataset.pin)); });
+  });
+  // Timer
+  $$("[data-timer]").forEach((el) => {
+    el.addEventListener("click", (e) => { e.stopPropagation(); toggleTimer(Number(el.dataset.timer)); });
+  });
+  // Edit
+  $$("[data-edit]").forEach((el) => {
+    el.addEventListener("click", (e) => { e.stopPropagation(); openModal(state.todos.find((t) => t.id === Number(el.dataset.edit))); });
+  });
+  // Delete
+  $$("[data-delete]").forEach((el) => {
+    el.addEventListener("click", (e) => { e.stopPropagation(); deleteTodo(Number(el.dataset.delete)); });
+  });
+  // Filter chips
+  $$("[data-filter-chip]").forEach((el) => {
+    el.addEventListener("click", () => {
+      state.filter = el.dataset.filterChip === "all" ? null : el.dataset.filterChip;
+      state.view = "list";
+      render();
+    });
+  });
+  // Sort select
+  const sortSel = $("#sort-select");
+  if (sortSel) sortSel.addEventListener("change", () => { state.sort = sortSel.value; render(); });
+
+  // Calendar navigation
+  const calPrev = $("#cal-prev");
+  if (calPrev) calPrev.addEventListener("click", () => { state.calendarDate.setMonth(state.calendarDate.getMonth()-1); render(); });
+  const calNext = $("#cal-next");
+  if (calNext) calNext.addEventListener("click", () => { state.calendarDate.setMonth(state.calendarDate.getMonth()+1); render(); });
+  const calToday = $("#cal-today");
+  if (calToday) calToday.addEventListener("click", () => { state.calendarDate = new Date(); render(); });
+
+  // Kanban drag & drop
+  attachKanbanDnD();
+}
+
+function attachKanbanDnD() {
+  let dragId = null;
+  $$(".kanban-card").forEach((card) => {
+    card.addEventListener("dragstart", () => { dragId = Number(card.dataset.id); card.classList.add("dragging"); });
+    card.addEventListener("dragend", () => { card.classList.remove("dragging"); dragId = null; });
+  });
+  $$("[data-drop]").forEach((zone) => {
+    zone.addEventListener("dragover", (e) => { e.preventDefault(); zone.classList.add("drag-over"); });
+    zone.addEventListener("dragleave", () => { zone.classList.remove("drag-over"); });
+    zone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      zone.classList.remove("drag-over");
+      if (!dragId) return;
+      const col = zone.dataset.drop;
+      if (col === "done") completeTodo(dragId);
+      else if (col === "pending") {
+        const t = state.todos.find((x) => x.id === dragId);
+        if (t && t.done) toggleTodo(dragId);
+      }
+    });
+  });
+}
+
+// ─── Actions ───────────────────────────────────────────────────────────────
+
+async function toggleTodo(id) {
+  try {
+    await api(`todos/${id}/toggle`, { method: "POST" });
+    await loadData();
+    render();
+  } catch (err) { toast(err.message, "error"); }
+}
+
+async function completeTodo(id) {
+  try {
+    await api(`todos/${id}/complete`, { method: "POST" });
+    await loadData();
+    render();
+  } catch (err) { toast(err.message, "error"); }
+}
+
+async function pinTodo(id) {
+  try {
+    await api(`todos/${id}/pin`, { method: "POST" });
+    await loadData();
+    render();
+  } catch (err) { toast(err.message, "error"); }
+}
+
+async function deleteTodo(id) {
+  if (!confirm("Delete this todo?")) return;
+  try {
+    await api(`todos/${id}`, { method: "DELETE" });
+    toast("Deleted", "success");
+    await loadData();
+    render();
+  } catch (err) { toast(err.message, "error"); }
+}
+
+async function toggleTimer(id) {
+  try {
+    const t = state.todos.find((x) => x.id === id);
+    if (t && t.timerStartedAt) {
+      await api(`todos/${id}/timer/stop`, { method: "POST" });
+      toast("Timer stopped", "success");
+    } else {
+      await api(`todos/${id}/timer/start`, { method: "POST" });
+      toast("Timer started", "success");
+    }
+    await loadData();
+    render();
+  } catch (err) { toast(err.message, "error"); }
+}
+
+// ─── Modal (Add/Edit) ──────────────────────────────────────────────────────
+
+function openModal(todo = null) {
+  const modal = $("#modal-overlay");
+  const title = $("#modal-title");
+  const delBtn = $("#delete-btn");
+
+  if (todo) {
+    title.textContent = "Edit Todo";
+    delBtn.classList.remove("hidden");
+    $("#todo-id").value = todo.id;
+    $("#f-title").value = todo.title;
+    $("#f-priority").value = todo.priority;
+    $("#f-category").value = todo.category || "";
+    $("#f-due").value = todo.due || "";
+    $("#f-assignee").value = todo.assignee || "";
+    $("#f-estimate").value = todo.estimate || "";
+    $("#f-tags").value = todo.tags.join(", ");
+    $("#f-note").value = todo.note || "";
+    $("#f-pinned").checked = todo.pinned || false;
+    if (todo.recurring) {
+      $("#f-recur").value = todo.recurring.freq;
+      $("#f-recur-interval").value = todo.recurring.interval;
+    } else {
+      $("#f-recur").value = "";
+      $("#f-recur-interval").value = "1";
+    }
+  } else {
+    title.textContent = "New Todo";
+    delBtn.classList.add("hidden");
+    $("#todo-form").reset();
+    $("#todo-id").value = "";
+    $("#f-priority").value = "medium";
+  }
+
+  // Update datalists
+  const cats = [...new Set(state.todos.map((t) => t.category).filter(Boolean))];
+  $("#category-datalist").innerHTML = cats.map((c) => `<option value="${escapeHtml(c)}">`).join("");
+  const assignees = [...new Set(state.todos.map((t) => t.assignee).filter(Boolean))];
+  $("#assignee-datalist").innerHTML = assignees.map((a) => `<option value="${escapeHtml(a)}">`).join("");
+
+  modal.classList.remove("hidden");
+  $("#f-title").focus();
+}
+
+function closeModal() {
+  $("#modal-overlay").classList.add("hidden");
+}
+
+async function saveTodo(e) {
+  e.preventDefault();
+  const id = $("#todo-id").value;
+  const data = {
+    title: $("#f-title").value,
+    priority: $("#f-priority").value,
+    category: $("#f-category").value,
+    due: $("#f-due").value || undefined,
+    assignee: $("#f-assignee").value,
+    estimate: $("#f-estimate").value ? Number($("#f-estimate").value) : null,
+    tags: $("#f-tags").value,
+    note: $("#f-note").value,
+    pinned: $("#f-pinned").checked,
+  };
+  const recur = $("#f-recur").value;
+  try {
+    let todo;
+    if (id) {
+      todo = await api(`todos/${id}`, { method: "PATCH", body: data });
+      if (recur) {
+        await api(`todos/${id}/recurring`, { method: "POST", body: { freq: recur, interval: Number($("#f-recur-interval").value) } });
+      } else {
+        await api(`todos/${id}/recurring`, { method: "POST", body: {} });
+      }
+      toast("Updated", "success");
+    } else {
+      todo = await api("todos", { method: "POST", body: data });
+      if (recur) {
+        await api(`todos/${todo.id}/recurring`, { method: "POST", body: { freq: recur, interval: Number($("#f-recur-interval").value) } });
+      }
+      toast("Added", "success");
+    }
+    closeModal();
+    await loadData();
+    render();
+  } catch (err) { toast(err.message, "error"); }
+}
+
+// ─── Detail View ───────────────────────────────────────────────────────────
+
+function showDetail(id) {
+  const t = state.todos.find((x) => x.id === id);
+  if (!t) return;
+  state.selectedTodo = t;
+  renderDetail(t);
+  $("#detail-overlay").classList.remove("hidden");
+}
+
+function renderDetail(t) {
+  $("#detail-title-text").textContent = t.title;
+  const ds = dueStatus(t.due);
+  const dueLabel = ds === "overdue" ? " (overdue)" : ds === "today" ? " (today)" : ds === "soon" ? " (soon)" : "";
+
+  const subtasksHTML = (t.subtasks || []).map((s) => `
+    <div class="subtask-item ${s.done ? "done" : ""}">
+      <div class="subtask-checkbox ${s.done ? "checked" : ""}" data-subtask-toggle="${s.id}"></div>
+      <span class="subtask-title">${escapeHtml(s.title)}</span>
+      <button class="icon-btn" data-subtask-delete="${s.id}" style="width:24px;height:24px;color:var(--danger)">✕</button>
+    </div>
+  `).join("");
+
+  const depsHTML = (t.dependsOn || []).map((depId) => {
+    const dep = state.todos.find((x) => x.id === depId);
+    return `<div class="detail-row"><span class="detail-label"></span><span class="detail-value">${dep ? (dep.done ? "✓" : "✗") + " #" + depId + " " + escapeHtml(dep.title) : "#"+depId+" (deleted)"}</span></div>`;
+  }).join("");
+
+  $("#detail-body").innerHTML = `
+    <div class="detail-section">
+      <div class="detail-row"><span class="detail-label">Status</span><span class="detail-value">${t.done ? "✓ Done" : "○ Pending"}</span></div>
+      <div class="detail-row"><span class="detail-label">Priority</span><span class="priority-badge priority-${t.priority}">${t.priority}</span></div>
+      ${t.category ? `<div class="detail-row"><span class="detail-label">Category</span><span class="detail-value">📁 ${escapeHtml(t.category)}</span></div>` : ""}
+      ${t.due ? `<div class="detail-row"><span class="detail-label">Due</span><span class="detail-value">📅 ${t.due}${dueLabel}</span></div>` : ""}
+      ${t.assignee ? `<div class="detail-row"><span class="detail-label">Assignee</span><span class="detail-value">👤 ${escapeHtml(t.assignee)}</span></div>` : ""}
+      ${t.estimate ? `<div class="detail-row"><span class="detail-label">Estimate</span><span class="detail-value">⏱ ${fmtTime(t.estimate)}</span></div>` : ""}
+      ${t.timeLogged ? `<div class="detail-row"><span class="detail-label">Time logged</span><span class="detail-value">✓ ${fmtTime(t.timeLogged)}</span></div>` : ""}
+      ${t.recurring ? `<div class="detail-row"><span class="detail-label">Recurring</span><span class="detail-value">⟳ Every ${t.recurring.interval} ${t.recurring.freq}(s)</span></div>` : ""}
+      ${t.pinned ? '<div class="detail-row"><span class="detail-label">Pinned</span><span class="detail-value">📌 Yes</span></div>' : ""}
+      ${t.tags.length ? `<div class="detail-row"><span class="detail-label">Tags</span>${t.tags.map(tag=>`<span class="tag">${escapeHtml(tag)}</span>`).join(" ")}</div>` : ""}
+    </div>
+    ${t.note ? `<div class="detail-section"><div class="detail-section-title">Note</div><div style="white-space:pre-wrap">${escapeHtml(t.note)}</div></div>` : ""}
+    ${(t.subtasks && t.subtasks.length) || true ? `
+      <div class="detail-section">
+        <div class="detail-section-title">Subtasks</div>
+        ${subtasksHTML}
+        <div style="display:flex;gap:8px;margin-top:8px">
+          <input type="text" id="new-subtask-input" placeholder="Add subtask..." style="flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text);font-size:13px">
+          <button class="btn btn-sm btn-primary" id="add-subtask-btn">Add</button>
+        </div>
+      </div>
+    ` : ""}
+    ${depsHTML ? `<div class="detail-section"><div class="detail-section-title">Dependencies</div>${depsHTML}</div>` : ""}
+    <div class="detail-section">
+      <div class="detail-section-title">Timestamps</div>
+      <div class="detail-row"><span class="detail-label">Created</span><span class="detail-value">${new Date(t.createdAt).toLocaleString()}</span></div>
+      ${t.updatedAt ? `<div class="detail-row"><span class="detail-label">Updated</span><span class="detail-value">${new Date(t.updatedAt).toLocaleString()}</span></div>` : ""}
+      ${t.completedAt ? `<div class="detail-row"><span class="detail-label">Completed</span><span class="detail-value">${new Date(t.completedAt).toLocaleString()}</span></div>` : ""}
+    </div>
+    <div style="display:flex;gap:8px;margin-top:16px">
+      <button class="btn btn-primary" onclick="window.app.toggleTodo(${t.id});window.app.closeDetail()">${t.done ? "Reopen" : "Complete"}</button>
+      <button class="btn btn-secondary" onclick="window.app.pinTodo(${t.id});window.app.closeDetail()">${t.pinned ? "Unpin" : "Pin"}</button>
+      <button class="btn btn-secondary" onclick="window.app.toggleTimer(${t.id});window.app.closeDetail()">${t.timerStartedAt ? "Stop Timer" : "Start Timer"}</button>
+      <button class="btn btn-secondary" onclick="window.app.editFromDetail(${t.id})">Edit</button>
+      <button class="btn btn-danger" onclick="window.app.deleteFromDetail(${t.id})">Delete</button>
+    </div>
+  `;
+
+  // Attach subtask events
+  $$("[data-subtask-toggle]").forEach((el) => {
+    el.addEventListener("click", () => toggleSubtask(t.id, Number(el.dataset.subtaskToggle)));
+  });
+  $$("[data-subtask-delete]").forEach((el) => {
+    el.addEventListener("click", () => deleteSubtask(t.id, Number(el.dataset.subtaskDelete)));
+  });
+  const addBtn = $("#add-subtask-btn");
+  if (addBtn) {
+    addBtn.addEventListener("click", () => {
+      const input = $("#new-subtask-input");
+      if (input.value.trim()) addSubtask(t.id, input.value.trim());
+    });
+    $("#new-subtask-input").addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && e.target.value.trim()) addSubtask(t.id, e.target.value.trim());
+    });
+  }
+}
+
+function closeDetail() {
+  $("#detail-overlay").classList.add("hidden");
+  state.selectedTodo = null;
+}
+
+function editFromDetail(id) {
+  closeDetail();
+  const t = state.todos.find((x) => x.id === id);
+  if (t) openModal(t);
+}
+
+async function deleteFromDetail(id) {
+  closeDetail();
+  await deleteTodo(id);
+}
+
+async function addSubtask(todoId, title) {
+  try {
+    await api(`todos/${todoId}/subtasks`, { method: "POST", body: { title } });
+    await loadData();
+    const t = state.todos.find((x) => x.id === todoId);
+    if (t) renderDetail(t);
+  } catch (err) { toast(err.message, "error"); }
+}
+
+async function toggleSubtask(todoId, subId) {
+  try {
+    await api(`todos/${todoId}/subtasks/${subId}/toggle`, { method: "POST" });
+    await loadData();
+    const t = state.todos.find((x) => x.id === todoId);
+    if (t) renderDetail(t);
+  } catch (err) { toast(err.message, "error"); }
+}
+
+async function deleteSubtask(todoId, subId) {
+  try {
+    await api(`todos/${todoId}/subtasks/${subId}`, { method: "DELETE" });
+    await loadData();
+    const t = state.todos.find((x) => x.id === todoId);
+    if (t) renderDetail(t);
+  } catch (err) { toast(err.message, "error"); }
+}
+
+// ─── Floating Timer ────────────────────────────────────────────────────────
+
+function updateFloatingTimer() {
+  const el = $("#floating-timer");
+  if (state.activeTimer) {
+    el.classList.remove("hidden");
+    $("#timer-label").textContent = state.activeTimer.title;
+    updateTimerDisplay();
+  } else {
+    el.classList.add("hidden");
+  }
+}
+
+function updateTimerDisplay() {
+  if (!state.activeTimer) return;
+  const elapsed = Math.floor((Date.now() - new Date(state.activeTimer.timerStartedAt).getTime()) / 1000);
+  const h = Math.floor(elapsed / 3600);
+  const m = Math.floor((elapsed % 3600) / 60);
+  const s = elapsed % 60;
+  $("#timer-time").textContent = h > 0
+    ? String(h).padStart(2,"0") + ":" + String(m).padStart(2,"0") + ":" + String(s).padStart(2,"0")
+    : String(m).padStart(2,"0") + ":" + String(s).padStart(2,"0");
+}
+
+setInterval(() => { if (state.activeTimer) updateTimerDisplay(); }, 1000);
+
+// ─── Theme ─────────────────────────────────────────────────────────────────
+
+function toggleTheme() {
+  const html = document.documentElement;
+  const current = html.dataset.theme;
+  const next = current === "dark" ? "light" : "dark";
+  html.dataset.theme = next;
+  localStorage.setItem("todo-theme", next);
+}
+
+function loadTheme() {
+  const saved = localStorage.getItem("todo-theme");
+  if (saved) document.documentElement.dataset.theme = saved;
+}
+
+// ─── Init ──────────────────────────────────────────────────────────────────
+
+function attachGlobalEvents() {
+  // Nav items
+  $$("[data-view]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      state.view = btn.dataset.view;
+      state.filter = null;
+      state.category = null;
+      render();
+      // Close sidebar on mobile
+      $("#sidebar").classList.remove("open");
+    });
+  });
+  // Filter items
+  $$("[data-filter]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      state.filter = btn.dataset.filter;
+      state.view = "list";
+      state.category = null;
+      render();
+      $("#sidebar").classList.remove("open");
+    });
+  });
+  // Add button
+  $("#add-btn").addEventListener("click", () => openModal());
+  // Modal close
+  $$(".modal-close").forEach((btn) => btn.addEventListener("click", closeModal));
+  $("#modal-overlay").addEventListener("click", (e) => { if (e.target === e.currentTarget) closeModal(); });
+  // Form submit
+  $("#todo-form").addEventListener("submit", saveTodo);
+  // Delete button in modal
+  $("#delete-btn").addEventListener("click", async () => {
+    const id = $("#todo-id").value;
+    if (id) { closeModal(); await deleteTodo(Number(id)); }
+  });
+  // Detail close
+  $$(".modal-close-detail").forEach((btn) => btn.addEventListener("click", closeDetail));
+  $("#detail-overlay").addEventListener("click", (e) => { if (e.target === e.currentTarget) closeDetail(); });
+  // Search
+  let searchTimer;
+  $("#search-input").addEventListener("input", (e) => {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(() => {
+      state.search = e.target.value;
+      if (state.view !== "list" && state.search) { state.view = "list"; state.filter = null; }
+      render();
+    }, 200);
+  });
+  // Theme toggle
+  $("#theme-toggle").addEventListener("click", toggleTheme);
+  // Sidebar toggle (mobile)
+  $("#sidebar-toggle").addEventListener("click", () => $("#sidebar").classList.add("open"));
+  $("#sidebar-close").addEventListener("click", () => $("#sidebar").classList.remove("open"));
+  // Floating timer stop
+  $("#timer-stop").addEventListener("click", async () => {
+    if (state.activeTimer) {
+      await api(`todos/${state.activeTimer.id}/timer/stop`, { method: "POST" });
+      toast("Timer stopped", "success");
+      await loadData();
+      render();
+    }
+  });
+  // Keyboard shortcuts
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") { closeModal(); closeDetail(); }
+    if (e.key === "n" && !e.target.matches("input, textarea, select")) { e.preventDefault(); openModal(); }
+    if (e.key === "/" && !e.target.matches("input, textarea, select")) { e.preventDefault(); $("#search-input").focus(); }
+  });
+}
+
+// Expose for inline onclick handlers
+window.app = {
+  toggleTodo, completeTodo, pinTodo, deleteTodo, toggleTimer,
+  showDetail, closeDetail, editFromDetail, deleteFromDetail,
+};
+
+async function init() {
+  loadTheme();
+  attachGlobalEvents();
+  await loadData();
+  render();
+}
+
+init();