ClipDeck edit와 delete — Undo 가진 CRUD-U + CRUD-D

// panel.js — inline edit + soft delete + Undo toast
let editingId = null;
const editingState = new WeakMap(); // textarea -> {originalText}

function onClipClick(event) {
  const row = event.target.closest(".row");
  if (!row) return;
  const id = row.dataset.id;
  if (event.target.classList.contains("copyBtn")) return; // Track 4 에서 처리
  if (event.target.classList.contains("deleteBtn")) return softDelete(id, row);
  if (event.target.matches(".text")) return startEdit(id, event.target);
}

function startEdit(id, p) {
  editingId = id;
  const ta = document.createElement("textarea");
  ta.value = p.textContent;
  ta.style.width = "100%";
  editingState.set(ta, { originalText: p.textContent });
  p.replaceWith(ta);
  ta.focus(); ta.select();
  ta.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); commitEdit(id, ta); }
    if (e.key === "Escape") { e.preventDefault(); cancelEdit(ta); }
  });
  ta.addEventListener("blur", () => cancelEdit(ta));
}

async function commitEdit(id, ta) {
  const newText = ta.value.trim();
  const { clips = [] } = await chrome.storage.local.get("clips");
  const next = clips.map((c) => c.id === id ? { ...c, text: newText, updatedAt: Date.now() } : c);
  editingId = null;
  await chrome.storage.local.set({ clips: next });
  // render 가 onChanged 통해 fire
}

function cancelEdit(ta) {
  const state = editingState.get(ta);
  editingId = null;
  if (!state) return;
  const p = document.createElement("p");
  p.className = "text";
  p.textContent = state.originalText;
  ta.replaceWith(p);
}

// panel.js — soft-delete and restore are requests, not direct storage writes
async function softDelete(id) {
  const response = await chrome.runtime.sendMessage({
    type: "mutateClip", action: "delete", id,
  });
  if (response?.ok) showUndoToast(id);
}

function showUndoToast(id) {
  const root = document.getElementById("toast");
  root.replaceChildren("Clip deleted. ");
  const undo = document.createElement("button");
  undo.className = "undoBtn";
  undo.textContent = "Undo";
  root.append(undo);
  root.classList.add("show");
  const timer = setTimeout(() => {
    root.classList.remove("show");
    root.replaceChildren();
  }, 5000);
  undo.addEventListener("click", async () => {
    clearTimeout(timer);
    await chrome.runtime.sendMessage({
      type: "mutateClip", action: "restore", id,
    });
    root.classList.remove("show");
    root.replaceChildren();
  }, { once: true });
}

// background.js — sole writer for edit/delete/restore plus eventual purge
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
  if (message?.type !== "mutateClip") return;
  mutateLocal(["clips"], ({ clips = [] }) => {
    const now = Date.now();
    const next = clips.map((clip) => {
      if (clip.id !== message.id) return clip;
      if (message.action === "edit") {
        return { ...clip, text: String(message.text || "").trim(), updatedAt: now };
      }
      if (message.action === "delete") return { ...clip, deletedAt: now };
      if (message.action === "restore") {
        const { deletedAt, ...restored } = clip;
        return restored;
      }
      return clip;
    });
    return { clips: next };
  })
    .then(() => sendResponse({ ok: true }))
    .catch((error) => sendResponse({ ok: false, error: error.message }));
  return true;
});

chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create("clipdeck-purge", { periodInMinutes: 1 });
});

chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name !== "clipdeck-purge") return;
  const cutoff = Date.now() - 5_000;
  void mutateLocal(["clips"], ({ clips = [] }) => ({
    clips: clips.filter((clip) => !clip.deletedAt || clip.deletedAt > cutoff),
  }));
});

// panel render filters tombstones: clips.filter((clip) => !clip.deletedAt)
// While editingId is set, defer a full-list render; run it after commit/cancel.