openclacky 1.3.1 → 1.3.3

data/lib/clacky/web/{trash.js → features/trash/view.js}

@@ -1,25 +1,17 @@
-// trash.js — File Recall & Session Recycle Bin
+// ── Trash · view — recycle-bin rendering, tabs, DOM wiring, dialogs ────────
 //
-// Two-tab panel under the "File Recall" sidebar item:
-//   Tab 1 (文件回收 / Agent Files): AI-deleted files from all projects
-//   Tab 2 (会话回收 / Sessions):     soft-deleted sessions that can be restored
+// Owns rendering of file/session cards, tab switching, toolbar wiring, and all
+// confirm/toast dialogs. Reads through TrashStore.state and drives every data
+// mutation through store actions, re-rendering on store change events.
 //
-// Each tab has its own toolbar actions (refresh, empty by age, empty all).
-// The "Clean orphans" button is file-trash-only and hidden on the session tab.
+// Augments the `Trash` facade with onPanelShow.
 //
-// Load order: after app.js modules (I18n, Modal), before app.js boot.
+// Depends on: TrashStore, I18n, Modal, Sessions.
+// ───────────────────────────────────────────────────────────────────────────
 
-const Trash = (() => {
-  // ── Private state ────────────────────────────────────────────────────
-  let _files       = [];
-  let _totals      = { count: 0, size: 0 };
-  let _sessions    = [];
-  let _sessionTotals = { count: 0, size: 0 };
-  let _activeTab   = null;  // null = no tab shown yet; set on first _switchTab
-  let _loading     = false;
-  let _wired       = false;
-
-  // ── Helpers ──────────────────────────────────────────────────────────
+const TrashView = (() => {
+  let _activeTab = null;
+  let _wired     = false;
 
   function $(id) { return document.getElementById(id); }
 
@@ -63,73 +55,30 @@ const Trash = (() => {
     if (_activeTab === tab) return;
     _activeTab = tab;
 
-    // Update tab button active states
     document.querySelectorAll(".trash-tab").forEach(btn => {
       btn.classList.toggle("active", btn.dataset.tab === tab);
     });
 
-    // Show/hide tab content panels
     const filePane    = $("trash-tab-file");
     const sessionPane = $("trash-tab-session");
     if (filePane)    filePane.style.display    = tab === "file-trash" ? "" : "none";
     if (sessionPane) sessionPane.style.display = tab === "session-trash" ? "" : "none";
 
-    // Show/hide "Clean orphans" button — only relevant for file trash
     const btnOrphans = $("btn-trash-empty-orphans");
     if (btnOrphans) btnOrphans.style.display = tab === "file-trash" ? "" : "none";
 
-    // Reload the active tab's data
     _load();
   }
 
-  // ── Data loading ─────────────────────────────────────────────────────
-
-  async function _load() {
-    if (_loading) return;
-    _loading = true;
-
+  function _load() {
     if (_activeTab === "file-trash") {
-      await _loadFiles();
+      const list = $("trash-list");
+      if (list) list.innerHTML = `<div class="creator-loading">${_t("trash.loading")}</div>`;
+      Trash.loadFiles();
     } else {
-      await _loadSessions();
-    }
-
-    _loading = false;
-  }
-
-  async function _loadFiles() {
-    const list = $("trash-list");
-    if (list) list.innerHTML =
-      `<div class="creator-loading">${_t("trash.loading")}</div>`;
-    try {
-      const res  = await fetch("/api/trash");
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Load failed");
-      _files  = data.files  || [];
-      _totals = { count: data.total_count || 0, size: data.total_size || 0 };
-      _renderFiles();
-    } catch (e) {
-      console.error("[Trash] load files failed", e);
-      if (list) list.innerHTML =
-        `<div class="creator-empty creator-error">${escapeHtml(e.message)}</div>`;
-    }
-  }
-
-  async function _loadSessions() {
-    const list = $("trash-session-list");
-    if (list) list.innerHTML =
-      `<div class="creator-loading">${_t("trash.loading")}</div>`;
-    try {
-      const res  = await fetch("/api/trash/sessions");
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Load failed");
-      _sessions      = data.sessions || [];
-      _sessionTotals = { count: data.count || 0, size: data.total_size || 0 };
-      _renderSessions();
-    } catch (e) {
-      console.error("[Trash] load sessions failed", e);
-      if (list) list.innerHTML =
-        `<div class="creator-empty creator-error">${escapeHtml(e.message)}</div>`;
+      const list = $("trash-session-list");
+      if (list) list.innerHTML = `<div class="creator-loading">${_t("trash.loading")}</div>`;
+      Trash.loadSessions();
     }
   }
 
@@ -143,31 +92,29 @@ const Trash = (() => {
     const btnAll      = $("btn-trash-empty-all");
     if (!list) return;
 
-    const orphanCount = _files.filter(f => {
-      const root = f.project_root || "";
-      return /^\/(?:var\/folders|tmp|private\/var\/folders)\b/.test(root) ||
-             /\/d\d{8}-\d+-[a-z0-9]+(?:\/|$)/.test(root);
-    }).length;
+    const files       = Trash.state.files;
+    const totals      = Trash.state.totals;
+    const orphanCount = Trash.state.orphanCount();
 
     if (summary) {
-      summary.textContent = _files.length
+      summary.textContent = files.length
         ? I18n.t("trash.summary", {
-            count: _totals.count,
-            size:  _humanBytes(_totals.size)
+            count: totals.count,
+            size:  _humanBytes(totals.size)
           }) + (orphanCount > 0 ? "  •  " + I18n.t("trash.summaryOrphans", { count: orphanCount }) : "")
         : "";
     }
-    if (btnOld)     btnOld.disabled     = _files.length === 0;
+    if (btnOld)     btnOld.disabled     = files.length === 0;
     if (btnOrphans) btnOrphans.disabled = orphanCount === 0;
-    if (btnAll)     btnAll.disabled     = _files.length === 0;
+    if (btnAll)     btnAll.disabled     = files.length === 0;
 
-    if (_files.length === 0) {
+    if (files.length === 0) {
       list.innerHTML = `<div class="creator-empty">${_t("trash.empty")}</div>`;
       return;
     }
 
     list.innerHTML = "";
-    _files.forEach(f => list.appendChild(_buildFileCard(f)));
+    files.forEach(f => list.appendChild(_buildFileCard(f)));
   }
 
   function _buildFileCard(file) {
@@ -179,18 +126,12 @@ const Trash = (() => {
     const original = file.original_path || "";
     const basename = original.split("/").pop() || original;
     const parts    = original.split("/").filter(Boolean);
-    // Show last three path segments so same-named files (index.js, package.json, …)
-    // are still distinguishable in the card title area.
     const shortPath = parts.length > 3
       ? ".../" + parts.slice(-3).join("/")
       : original;
     const sizeStr  = _humanBytes(file.file_size || 0);
     const whenStr  = _humanTime(file.deleted_at);
-    // Heuristic: if project_root lives under a temp-dir prefix or matches the
-    // Ruby Tempdir pattern (dYYYYMMDD-PID-random), the original project is gone.
-    // We mark it as an orphan so the user can bulk-clean it confidently.
-    const orphan = /^\/(?:var\/folders|tmp|private\/var\/folders)\b/.test(file.project_root || "") ||
-                   /\/d\d{8}-\d+-[a-z0-9]+(?:\/|$)/.test(file.project_root || "");
+    const orphan   = Trash.state.isOrphan(file);
 
     card.innerHTML = `
       <div class="trash-card-info">
@@ -228,7 +169,7 @@ const Trash = (() => {
     card.querySelector(".btn-trash-restore").addEventListener("click", () =>
       _restoreFile(file, card));
     card.querySelector(".btn-trash-delete").addEventListener("click", () =>
-      _deleteFile(file, card));
+      _deleteFile(file));
 
     return card;
   }
@@ -242,24 +183,27 @@ const Trash = (() => {
     const btnAll   = $("btn-trash-empty-all");
     if (!list) return;
 
+    const sessions = Trash.state.sessions;
+    const totals   = Trash.state.sessionTotals;
+
     if (summary) {
-      summary.textContent = _sessions.length
+      summary.textContent = sessions.length
         ? I18n.t("trash.summarySessions", {
-            count: _sessionTotals.count,
-            size:  _humanBytes(_sessionTotals.size)
+            count: totals.count,
+            size:  _humanBytes(totals.size)
           })
         : "";
     }
-    if (btnOld) btnOld.disabled = _sessions.length === 0;
-    if (btnAll) btnAll.disabled = _sessions.length === 0;
+    if (btnOld) btnOld.disabled = sessions.length === 0;
+    if (btnAll) btnAll.disabled = sessions.length === 0;
 
-    if (_sessions.length === 0) {
+    if (sessions.length === 0) {
       list.innerHTML = `<div class="creator-empty">${_t("trash.noSessionTrash")}</div>`;
       return;
     }
 
     list.innerHTML = "";
-    _sessions.forEach(s => list.appendChild(_buildSessionCard(s)));
+    sessions.forEach(s => list.appendChild(_buildSessionCard(s)));
   }
 
   function _buildSessionCard(session) {
@@ -268,7 +212,6 @@ const Trash = (() => {
     card.dataset.sessionId = session.session_id;
 
     const name      = session.name || session.session_id || "";
-    const shortId   = (session.session_id || "").slice(0, 8);
     const taskCount = session.total_tasks || 0;
     const sizeStr   = _humanBytes(session.file_size || 0);
     const whenStr   = _humanTime(session.deleted_at || session.created_at);
@@ -304,7 +247,7 @@ const Trash = (() => {
     card.querySelector(".btn-trash-session-restore").addEventListener("click", () =>
       _restoreSession(session, card));
     card.querySelector(".btn-trash-session-delete").addEventListener("click", () =>
-      _deleteSession(session, card));
+      _deleteSession(session));
 
     return card;
   }
@@ -314,71 +257,25 @@ const Trash = (() => {
   async function _restoreFile(file, card) {
     const btn = card.querySelector(".btn-trash-restore");
     btn.disabled = true;
-    try {
-      const res = await fetch("/api/trash/restore", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          project_root:  file.project_root,
-          original_path: file.original_path
-        })
-      });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        Modal.toast(I18n.t("trash.restoreFail", {
-          msg: data.error || res.statusText
-        }), "error");
-      } else {
-        // Optimistic update — remove from local state and re-render immediately
-        // so the UI feels instant without waiting for a full reload.
-        _files = _files.filter(f =>
-          !(f.project_root === file.project_root && f.original_path === file.original_path));
-        _totals = {
-          count: Math.max(0, _totals.count - 1),
-          size:  Math.max(0, _totals.size - (file.file_size || 0))
-        };
-        _renderFiles();
-        Modal.toast(I18n.t("trash.restoreOk", {
-          path: (file.original_path || "").split("/").pop()
-        }), "success");
-      }
-    } catch (e) {
-      Modal.toast(I18n.t("trash.restoreFail", { msg: e.message }), "error");
-    } finally {
+    const res = await Trash.restoreFile(file);
+    if (!res.ok) {
+      Modal.toast(I18n.t("trash.restoreFail", { msg: res.error }), "error");
       btn.disabled = false;
+    } else {
+      Modal.toast(I18n.t("trash.restoreOk", {
+        path: (file.original_path || "").split("/").pop()
+      }), "success");
     }
   }
 
-  async function _deleteFile(file, card) {
+  async function _deleteFile(file) {
     const basename = (file.original_path || "").split("/").pop() || file.original_path;
     const confirmed = await Modal.confirm(
       I18n.t("trash.confirmDeleteOne", { name: basename })
     );
     if (!confirmed) return;
-
-    const url = "/api/trash?" + new URLSearchParams({
-      project: file.project_root,
-      file:    file.original_path
-    }).toString();
-
-    try {
-      const res  = await fetch(url, { method: "DELETE" });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        Modal.toast(I18n.t("trash.deleteFail", { msg: data.error || res.statusText }), "error");
-        return;
-      }
-      // Optimistic update — same pattern as _restoreFile.
-      _files = _files.filter(f =>
-        !(f.project_root === file.project_root && f.original_path === file.original_path));
-      _totals = {
-        count: Math.max(0, _totals.count - 1),
-        size:  Math.max(0, _totals.size - (file.file_size || 0))
-      };
-      _renderFiles();
-    } catch (e) {
-      Modal.toast(I18n.t("trash.deleteFail", { msg: e.message }), "error");
-    }
+    const res = await Trash.deleteFile(file);
+    if (!res.ok) Modal.toast(I18n.t("trash.deleteFail", { msg: res.error }), "error");
   }
 
   // ── Session actions ──────────────────────────────────────────────────
@@ -386,149 +283,62 @@ const Trash = (() => {
   async function _restoreSession(session, card) {
     const btn = card.querySelector(".btn-trash-session-restore");
     btn.disabled = true;
-    try {
-      const res = await fetch("/api/trash/sessions/restore", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ session_id: session.session_id })
-      });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        Modal.toast(I18n.t("trash.sessionRestoreFail", {
-          msg: data.error || res.statusText
-        }), "error");
-      } else {
-        _sessions = _sessions.filter(s => s.session_id !== session.session_id);
-        _sessionTotals = {
-          count: Math.max(0, _sessionTotals.count - 1),
-          size:  Math.max(0, _sessionTotals.size - (session.file_size || 0))
-        };
-        _renderSessions();
-        // Optimistically add the restored session to the sidebar — same pattern
-        // as the WS session_restored handler, but covers the case where the WS
-        // event is lost (offline tab, slow reconnect). Sessions.add is idempotent.
-        const restored = data.session;
-        if (restored && typeof Sessions !== "undefined") {
-          Sessions.add(restored);
-          Sessions.renderList();
-        }
-        Modal.toast(I18n.t("trash.sessionRestoreOk"), "success", restored && restored.id ? {
-          action: {
-            label:   I18n.t("trash.sessionRestoreOkAction"),
-            onClick: () => Sessions.select(restored.id)
-          }
-        } : {});
-      }
-    } catch (e) {
-      Modal.toast(I18n.t("trash.sessionRestoreFail", { msg: e.message }), "error");
-    } finally {
+    const res = await Trash.restoreSession(session);
+    if (!res.ok) {
+      Modal.toast(I18n.t("trash.sessionRestoreFail", { msg: res.error }), "error");
       btn.disabled = false;
+      return;
     }
+    const restored = res.session;
+    Modal.toast(I18n.t("trash.sessionRestoreOk"), "success", restored && restored.id ? {
+      action: {
+        label:   I18n.t("trash.sessionRestoreOkAction"),
+        onClick: () => Sessions.select(restored.id)
+      }
+    } : {});
   }
 
-  async function _deleteSession(session, card) {
+  async function _deleteSession(session) {
     const name = session.name || (session.session_id || "").slice(0, 8);
     const confirmed = await Modal.confirm(
       I18n.t("trash.confirmDeleteSession", { name: name })
     );
     if (!confirmed) return;
-
-    try {
-      const res  = await fetch(`/api/trash/sessions/${encodeURIComponent(session.session_id)}`, {
-        method: "DELETE"
-      });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        Modal.toast(I18n.t("trash.deleteFail", { msg: data.error || res.statusText }), "error");
-        return;
-      }
-      _sessions = _sessions.filter(s => s.session_id !== session.session_id);
-      _renderSessions();
-    } catch (e) {
-      Modal.toast(I18n.t("trash.deleteFail", { msg: e.message }), "error");
-    }
+    const res = await Trash.deleteSession(session);
+    if (!res.ok) Modal.toast(I18n.t("trash.deleteFail", { msg: res.error }), "error");
   }
 
   // ── Bulk actions ─────────────────────────────────────────────────────
 
-  // Count locally how many entries would be wiped by a bulk operation,
-  // so the confirmation dialog can show "delete N items" instead of a vague
-  // "all eligible". daysOld=0 means "everything", otherwise filter by deleted_at.
-  function _countMatching(items, daysOld) {
-    if (!Array.isArray(items)) return 0;
-    if (!daysOld || daysOld <= 0) return items.length;
-    const cutoff = Date.now() - daysOld * 86400000;
-    return items.filter(it => {
-      const t = Date.parse(it.deleted_at || "");
-      return !isNaN(t) && t < cutoff;
-    }).length;
-  }
-
   async function _emptyBulk(daysOld, confirmKey) {
-    const isSession = _activeTab === "session-trash";
-    const matchCount = _countMatching(isSession ? _sessions : _files, daysOld);
+    const isSession  = _activeTab === "session-trash";
+    const items      = isSession ? Trash.state.sessions : Trash.state.files;
+    const matchCount = Trash.countMatching(items, daysOld);
 
     if (matchCount === 0) {
       Modal.toast(_t(daysOld > 0 ? "trash.nothingOld" : "trash.empty"), "info");
       return;
     }
 
-    const confirmed = await Modal.confirm(
-      I18n.t(confirmKey, { count: matchCount })
-    );
+    const confirmed = await Modal.confirm(I18n.t(confirmKey, { count: matchCount }));
     if (!confirmed) return;
 
-    if (isSession) return _emptySessionsBulk(daysOld);
-
-    const qs  = new URLSearchParams();
-    qs.set("days_old", String(daysOld));
-    const url = "/api/trash?" + qs.toString();
-
-    try {
-      const res  = await fetch(url, { method: "DELETE" });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        Modal.toast(I18n.t("trash.cleanFail", { msg: data.error || res.statusText }), "error");
-        return;
-      }
+    if (isSession) {
+      const res = await Trash.emptySessionsBulk(daysOld);
+      if (!res.ok) { Modal.toast(I18n.t("trash.cleanFail", { msg: res.error }), "error"); return; }
+      Modal.toast(I18n.t("trash.sessionsCleaned", { count: res.deleted_count }), "success");
+    } else {
+      const res = await Trash.emptyFilesBulk(daysOld);
+      if (!res.ok) { Modal.toast(I18n.t("trash.cleanFail", { msg: res.error }), "error"); return; }
       Modal.toast(I18n.t("trash.emptied", {
-        count: data.deleted_count || 0,
-        size:  _humanBytes(data.freed_size || 0)
-      }), "success");
-      await _loadFiles();
-    } catch (e) {
-      Modal.toast(I18n.t("trash.cleanFail", { msg: e.message }), "error");
-    }
-  }
-
-  async function _emptySessionsBulk(daysOld) {
-    const qs  = new URLSearchParams();
-    qs.set("days_old", String(daysOld));
-    const url = "/api/trash/sessions?" + qs.toString();
-
-    try {
-      const res  = await fetch(url, { method: "DELETE" });
-      const data = await res.json();
-      if (!res.ok || !data.ok) {
-        Modal.toast(I18n.t("trash.cleanFail", { msg: data.error || res.statusText }), "error");
-        return;
-      }
-      Modal.toast(I18n.t("trash.sessionsCleaned", {
-        count: data.deleted_count || 0
+        count: res.deleted_count,
+        size:  _humanBytes(res.freed_size)
       }), "success");
-      await _loadSessions();
-    } catch (e) {
-      Modal.toast(I18n.t("trash.cleanFail", { msg: e.message }), "error");
     }
   }
 
   async function _emptyOrphans() {
-    // Same heuristic as in _buildFileCard — keep both in sync if you ever change it.
-    const orphans = _files.filter(f => {
-      const root = f.project_root || "";
-      return /^\/(?:var\/folders|tmp|private\/var\/folders)\b/.test(root) ||
-             /\/d\d{8}-\d+-[a-z0-9]+(?:\/|$)/.test(root);
-    });
+    const orphans = Trash.orphans();
     if (orphans.length === 0) {
       Modal.toast(_t("trash.noOrphans"), "info");
       return;
@@ -540,29 +350,16 @@ const Trash = (() => {
 
     let deleted = 0, freed = 0, failed = 0;
     for (const f of orphans) {
-      const url = "/api/trash?" + new URLSearchParams({
-        project: f.project_root,
-        file:    f.original_path
-      }).toString();
-      try {
-        const r = await fetch(url, { method: "DELETE" });
-        const d = await r.json();
-        if (r.ok && d.ok) {
-          deleted += 1;
-          freed   += d.freed_size || 0;
-        } else {
-          failed += 1;
-        }
-      } catch (_e) {
-        failed += 1;
-      }
+      const r = await Trash.deleteOneFileRaw(f);
+      if (r.ok) { deleted += 1; freed += r.freed_size; }
+      else        failed  += 1;
     }
     Modal.toast(I18n.t("trash.orphansCleaned", {
       count:  deleted,
       size:   _humanBytes(freed),
       failed: failed
     }), failed > 0 ? "warning" : "success");
-    await _loadFiles();
+    await Trash.loadFiles();
   }
 
   // ── Event wiring ─────────────────────────────────────────────────────
@@ -571,13 +368,11 @@ const Trash = (() => {
     if (_wired) return;
     _wired = true;
 
-    // Tab switches
     const tabFile    = $("tab-file-trash");
     const tabSession = $("tab-session-trash");
     if (tabFile)    tabFile.addEventListener("click",    () => _switchTab("file-trash"));
     if (tabSession) tabSession.addEventListener("click", () => _switchTab("session-trash"));
 
-    // Toolbar buttons
     const btnRefresh = $("btn-trash-refresh");
     const btnOld     = $("btn-trash-empty-old");
     const btnOrphans = $("btn-trash-empty-orphans");
@@ -592,15 +387,29 @@ const Trash = (() => {
         ? "trash.confirmEmptySessionAll" : "trash.confirmEmptyAll"));
   }
 
-  // ── Public API ────────────────────────────────────────────────────────
+  function _subscribe() {
+    Trash.on("trash:filesChanged",    _renderFiles);
+    Trash.on("trash:sessionsChanged", _renderSessions);
+    Trash.on("trash:filesError", (e) => {
+      const list = $("trash-list");
+      if (list) list.innerHTML = `<div class="creator-empty creator-error">${escapeHtml(e.message)}</div>`;
+    });
+    Trash.on("trash:sessionsError", (e) => {
+      const list = $("trash-session-list");
+      if (list) list.innerHTML = `<div class="creator-empty creator-error">${escapeHtml(e.message)}</div>`;
+    });
+  }
 
-  return {
-    /** Called by Router when the trash panel becomes active. */
+  const viewApi = {
     onPanelShow() {
       _wire();
-      // Reset to file-trash tab on each panel show so the user always
-      // starts on the familiar "agent files" view.
+      _activeTab = null;
       _switchTab("file-trash");
-    },
+    }
   };
+
+  return { init: _subscribe, api: viewApi };
 })();
+
+Object.assign(Trash, TrashView.api);
+TrashView.init();