agkan 2.13.0 → 2.14.1

package/dist/board/client/board.js

@@ -149,115 +149,6 @@
     document.addEventListener("dragend", stopAutoScroll);
   }
 
-  // src/board/client/addTaskModal.ts
-  function openAddModal(elements, status) {
-    elements.addStatus.value = status;
-    elements.addTitle.value = "";
-    elements.addBody.value = "";
-    elements.addPriority.value = "";
-    elements.addModal.classList.add("show");
-    elements.addTitle.focus();
-  }
-  async function submitAddTask(elements) {
-    const title = elements.addTitle.value.trim();
-    if (!title) {
-      elements.addTitle.focus();
-      return;
-    }
-    const status = elements.addStatus.value;
-    elements.addModal.classList.remove("show");
-    try {
-      const res = await fetch("/api/tasks", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          title,
-          body: elements.addBody.value.trim() || null,
-          status,
-          priority: elements.addPriority.value || null
-        })
-      });
-      if (!res.ok) throw new Error("Server error");
-      location.reload();
-    } catch {
-      showToast("Failed to add task");
-    }
-  }
-  function initAddTaskModal() {
-    const elements = {
-      addModal: document.getElementById("add-modal"),
-      addTitle: document.getElementById("add-title"),
-      addBody: document.getElementById("add-body"),
-      addPriority: document.getElementById("add-priority"),
-      addStatus: document.getElementById("add-status")
-    };
-    document.querySelectorAll(".add-btn").forEach((btn) => {
-      btn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        openAddModal(elements, btn.dataset.status);
-      });
-    });
-    document.getElementById("add-cancel")?.addEventListener("click", () => {
-      elements.addModal.classList.remove("show");
-    });
-    elements.addModal.addEventListener("click", (e) => {
-      if (e.target === elements.addModal) elements.addModal.classList.remove("show");
-    });
-    elements.addTitle.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" && !e.isComposing) {
-        e.preventDefault();
-        document.getElementById("add-submit").click();
-      }
-    });
-    document.getElementById("add-submit")?.addEventListener("click", () => submitAddTask(elements));
-  }
-
-  // src/board/client/contextMenu.ts
-  async function deleteCard(card) {
-    const taskId = card.dataset.id;
-    const status = card.dataset.status;
-    if (!confirm("Delete task #" + taskId + "?")) return;
-    card.remove();
-    updateCount(status);
-    try {
-      const res = await fetch("/api/tasks/" + taskId, { method: "DELETE" });
-      if (!res.ok) throw new Error("Server error");
-    } catch {
-      location.reload();
-      showToast("Failed to delete task");
-    }
-  }
-  function initContextMenu() {
-    const ctxMenu = document.getElementById("context-menu");
-    let ctxTargetCard = null;
-    document.addEventListener("contextmenu", (e) => {
-      const card = e.target.closest(".card");
-      if (!card) {
-        ctxMenu.style.display = "none";
-        return;
-      }
-      e.preventDefault();
-      ctxTargetCard = card;
-      ctxMenu.style.left = e.clientX + "px";
-      ctxMenu.style.top = e.clientY + "px";
-      ctxMenu.style.display = "block";
-    });
-    document.addEventListener("click", (e) => {
-      if (!e.target.closest("#context-menu")) {
-        ctxMenu.style.display = "none";
-        ctxTargetCard = null;
-      }
-    });
-    document.getElementById("ctx-delete")?.addEventListener("click", async (e) => {
-      e.stopPropagation();
-      ctxMenu.style.display = "none";
-      if (!ctxTargetCard) return;
-      const card = ctxTargetCard;
-      ctxTargetCard = null;
-      await deleteCard(card);
-    });
-  }
-
   // src/board/client/tags.ts
   var allAvailableTags = [];
   var _getDetailTaskId = null;
@@ -455,11 +346,13 @@
   var _renderDetailPanel = null;
   var _showUpdateWarning = null;
   var _getDetailTaskId2 = null;
+  var _setActiveCard = null;
   function registerDetailPanelCallbacks(callbacks) {
     _openTaskDetail = callbacks.openTaskDetail;
     _renderDetailPanel = callbacks.renderDetailPanel;
     _showUpdateWarning = callbacks.showUpdateWarning;
     _getDetailTaskId2 = callbacks.getDetailTaskId;
+    _setActiveCard = callbacks.setActiveCard;
   }
   function attachCardListeners(body) {
     body.querySelectorAll(".card").forEach((card) => {
@@ -470,10 +363,52 @@
       });
     });
   }
+  function applyIncrementalCardUpdate(body, newHtml) {
+    const template = document.createElement("div");
+    template.innerHTML = newHtml;
+    const newCards = Array.from(template.querySelectorAll(".card"));
+    const existingCards = /* @__PURE__ */ new Map();
+    body.querySelectorAll(".card").forEach((card) => {
+      const id = card.dataset.id;
+      if (id) existingCards.set(id, card);
+    });
+    const newCardIds = /* @__PURE__ */ new Set();
+    newCards.forEach((card) => {
+      const id = card.dataset.id;
+      if (id) newCardIds.add(id);
+    });
+    existingCards.forEach((card, id) => {
+      if (!newCardIds.has(id)) {
+        card.remove();
+      }
+    });
+    newCards.forEach((newCard, index) => {
+      const id = newCard.dataset.id;
+      const newUpdatedAt = newCard.dataset.updatedAt;
+      const existing = id ? existingCards.get(id) : void 0;
+      if (existing) {
+        const existingUpdatedAt = existing.dataset.updatedAt;
+        let activeCard;
+        if (newUpdatedAt !== existingUpdatedAt) {
+          existing.replaceWith(newCard);
+          activeCard = newCard;
+        } else {
+          activeCard = existing;
+        }
+        const currentChild = body.children[index];
+        if (currentChild !== activeCard) {
+          body.insertBefore(activeCard, currentChild || null);
+        }
+      } else {
+        const currentChild = body.children[index];
+        body.insertBefore(newCard, currentChild || null);
+      }
+    });
+  }
   function updateColumnHtml(col) {
     const body = document.getElementById("col-" + col.status);
     if (!body) return;
-    body.innerHTML = col.html;
+    applyIncrementalCardUpdate(body, col.html);
     const colEl = body.closest(".column");
     if (colEl) {
       const countEl = colEl.querySelector(".column-count");
@@ -509,6 +444,9 @@
       const data = await res.json();
       data.columns.forEach(updateColumnHtml);
       const detailTaskId2 = _getDetailTaskId2 ? _getDetailTaskId2() : null;
+      if (detailTaskId2 !== null && _setActiveCard) {
+        _setActiveCard(detailTaskId2);
+      }
       if (detailTaskId2 !== null) {
         await refreshOpenDetailPanel(detailTaskId2);
       }
@@ -522,16 +460,11 @@
       if (!res.ok) return;
       const data = await res.json();
       const ts = data.updatedAt;
-      const detailPanel = document.getElementById("detail-panel");
       if (lastUpdatedAt === null) {
         lastUpdatedAt = ts;
       } else if (ts !== lastUpdatedAt) {
         lastUpdatedAt = ts;
-        if (detailPanel.classList.contains("open")) {
-          await refreshBoardCards();
-        } else {
-          location.reload();
-        }
+        await refreshBoardCards();
       }
     } catch {
     }
@@ -541,16 +474,316 @@
     pollBoardUpdates();
   }
 
+  // src/board/client/addTaskModal.ts
+  var selectedTags = [];
+  var tagInputValue = "";
+  var tagFocusedIndex = -1;
+  function getFilteredAddTags() {
+    const selectedIds = new Set(selectedTags.map((t) => t.id));
+    const available = allAvailableTags.filter((t) => !selectedIds.has(t.id));
+    if (!tagInputValue.trim()) return available;
+    const q = tagInputValue.toLowerCase();
+    return available.filter((t) => t.name.toLowerCase().includes(q));
+  }
+  function renderAddTagPills(control, input) {
+    control.querySelectorAll(".tag-pill").forEach((p) => p.remove());
+    selectedTags.forEach((t) => {
+      const pill = document.createElement("span");
+      pill.className = "tag-pill";
+      pill.dataset.tagId = String(t.id);
+      const label = document.createTextNode(t.name);
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "tag-pill-remove";
+      removeBtn.title = "Remove tag";
+      removeBtn.innerHTML = "×";
+      removeBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const idx = selectedTags.findIndex((x) => x.id === t.id);
+        if (idx !== -1) selectedTags.splice(idx, 1);
+        renderAddTagPills(control, input);
+      });
+      pill.appendChild(label);
+      pill.appendChild(removeBtn);
+      control.insertBefore(pill, input);
+    });
+    input.placeholder = selectedTags.length === 0 ? "Add tags..." : "";
+  }
+  function renderAddTagDropdown(dropdown) {
+    const filtered = getFilteredAddTags();
+    dropdown.innerHTML = "";
+    tagFocusedIndex = -1;
+    if (filtered.length === 0) {
+      const noOpt = document.createElement("div");
+      noOpt.className = "tag-select-no-options";
+      noOpt.textContent = tagInputValue ? "No matching tags" : "No tags available";
+      dropdown.appendChild(noOpt);
+    } else {
+      filtered.forEach((t, i) => {
+        const opt = document.createElement("div");
+        opt.className = "tag-select-option";
+        opt.dataset.tagId = String(t.id);
+        opt.textContent = t.name;
+        opt.addEventListener("mouseover", () => setAddTagFocused(dropdown, i));
+        opt.addEventListener("mousedown", (e) => {
+          e.preventDefault();
+          selectAddTag(t.id, dropdown, document.getElementById("add-tag-input"));
+        });
+        dropdown.appendChild(opt);
+      });
+    }
+  }
+  function setAddTagFocused(dropdown, index) {
+    const opts = dropdown.querySelectorAll(".tag-select-option");
+    opts.forEach((o, i) => o.classList.toggle("focused", i === index));
+    tagFocusedIndex = index;
+  }
+  function selectAddTag(tagId, dropdown, input) {
+    const tag = allAvailableTags.find((t) => t.id === tagId);
+    if (!tag) return;
+    selectedTags.push(tag);
+    input.value = "";
+    tagInputValue = "";
+    const control = document.getElementById("add-tag-select-control");
+    renderAddTagPills(control, input);
+    renderAddTagDropdown(dropdown);
+  }
+  function initAddTagSelector() {
+    const control = document.getElementById("add-tag-select-control");
+    const dropdown = document.getElementById("add-tag-select-dropdown");
+    if (!control || !dropdown) return;
+    const input = document.createElement("input");
+    input.className = "tag-select-input";
+    input.id = "add-tag-input";
+    input.type = "text";
+    input.autocomplete = "off";
+    control.appendChild(input);
+    control.addEventListener("click", () => input.focus());
+    input.addEventListener("focus", () => {
+      renderAddTagDropdown(dropdown);
+      dropdown.classList.add("open");
+    });
+    input.addEventListener(
+      "blur",
+      () => setTimeout(() => {
+        dropdown.classList.remove("open");
+        tagFocusedIndex = -1;
+      }, 150)
+    );
+    input.addEventListener("input", () => {
+      tagInputValue = input.value;
+      renderAddTagDropdown(dropdown);
+      if (!dropdown.classList.contains("open")) dropdown.classList.add("open");
+    });
+    input.addEventListener("keydown", (e) => {
+      const filtered = getFilteredAddTags();
+      const opts = dropdown.querySelectorAll(".tag-select-option");
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setAddTagFocused(dropdown, Math.min(tagFocusedIndex + 1, opts.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setAddTagFocused(dropdown, Math.max(tagFocusedIndex - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (tagFocusedIndex >= 0 && filtered[tagFocusedIndex]) {
+          selectAddTag(filtered[tagFocusedIndex].id, dropdown, input);
+        }
+      } else if (e.key === "Escape") {
+        dropdown.classList.remove("open");
+        input.blur();
+      } else if (e.key === "Backspace" && input.value === "" && selectedTags.length > 0) {
+        e.preventDefault();
+        selectedTags.splice(selectedTags.length - 1, 1);
+        renderAddTagPills(control, input);
+        renderAddTagDropdown(dropdown);
+      }
+    });
+  }
+  function addMetadataRow(container) {
+    const row = document.createElement("div");
+    row.className = "metadata-row";
+    const keyInput = document.createElement("input");
+    keyInput.type = "text";
+    keyInput.className = "metadata-row-key";
+    keyInput.placeholder = "Key";
+    const valueInput = document.createElement("input");
+    valueInput.type = "text";
+    valueInput.className = "metadata-row-value";
+    valueInput.placeholder = "Value";
+    const removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.className = "metadata-row-remove";
+    removeBtn.title = "Remove";
+    removeBtn.innerHTML = "×";
+    removeBtn.addEventListener("click", () => {
+      row.remove();
+    });
+    row.appendChild(keyInput);
+    row.appendChild(valueInput);
+    row.appendChild(removeBtn);
+    container.appendChild(row);
+  }
+  function collectMetadata(container) {
+    const rows = container.querySelectorAll(".metadata-row");
+    const result = [];
+    rows.forEach((row) => {
+      const key = (row.querySelector(".metadata-row-key")?.value ?? "").trim();
+      const value = (row.querySelector(".metadata-row-value")?.value ?? "").trim();
+      if (key) result.push({ key, value });
+    });
+    return result;
+  }
+  function resetAddModal(elements) {
+    elements.addTitle.value = "";
+    elements.addBody.value = "";
+    elements.addPriority.value = "";
+    selectedTags = [];
+    tagInputValue = "";
+    tagFocusedIndex = -1;
+    const control = document.getElementById("add-tag-select-control");
+    const input = document.getElementById("add-tag-input");
+    if (control && input) {
+      renderAddTagPills(control, input);
+    }
+    elements.addMetadataRows.innerHTML = "";
+  }
+  function openAddModal(elements, status) {
+    elements.addStatus.value = status;
+    resetAddModal(elements);
+    elements.addModal.classList.add("show");
+    elements.addTitle.focus();
+  }
+  async function submitAddTask(elements) {
+    const title = elements.addTitle.value.trim();
+    if (!title) {
+      elements.addTitle.focus();
+      return;
+    }
+    const status = elements.addStatus.value;
+    elements.addModal.classList.remove("show");
+    const tags = selectedTags.map((t) => t.id);
+    const metadata = collectMetadata(elements.addMetadataRows);
+    try {
+      const res = await fetch("/api/tasks", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title,
+          body: elements.addBody.value.trim() || null,
+          status,
+          priority: elements.addPriority.value || null,
+          tags: tags.length > 0 ? tags : void 0,
+          metadata: metadata.length > 0 ? metadata : void 0
+        })
+      });
+      if (!res.ok) throw new Error("Server error");
+      await refreshBoardCards();
+    } catch {
+      showToast("Failed to add task");
+    }
+  }
+  function initAddTaskModal() {
+    const elements = {
+      addModal: document.getElementById("add-modal"),
+      addTitle: document.getElementById("add-title"),
+      addBody: document.getElementById("add-body"),
+      addPriority: document.getElementById("add-priority"),
+      addStatus: document.getElementById("add-status"),
+      addTagControl: document.getElementById("add-tag-select-control"),
+      addTagDropdown: document.getElementById("add-tag-select-dropdown"),
+      addMetadataRows: document.getElementById("add-metadata-rows")
+    };
+    initAddTagSelector();
+    document.querySelectorAll(".add-btn").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        openAddModal(elements, btn.dataset.status);
+      });
+    });
+    document.getElementById("add-cancel")?.addEventListener("click", () => {
+      elements.addModal.classList.remove("show");
+    });
+    elements.addModal.addEventListener("click", (e) => {
+      if (e.target === elements.addModal) elements.addModal.classList.remove("show");
+    });
+    elements.addTitle.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.isComposing) {
+        e.preventDefault();
+        document.getElementById("add-submit").click();
+      }
+    });
+    document.getElementById("add-metadata-add-row")?.addEventListener("click", () => {
+      addMetadataRow(elements.addMetadataRows);
+    });
+    document.getElementById("add-submit")?.addEventListener("click", () => submitAddTask(elements));
+  }
+
+  // src/board/client/contextMenu.ts
+  async function deleteCard(card) {
+    const taskId = card.dataset.id;
+    const status = card.dataset.status;
+    if (!confirm("Delete task #" + taskId + "?")) return;
+    card.remove();
+    updateCount(status);
+    try {
+      const res = await fetch("/api/tasks/" + taskId, { method: "DELETE" });
+      if (!res.ok) throw new Error("Server error");
+    } catch {
+      location.reload();
+      showToast("Failed to delete task");
+    }
+  }
+  function initContextMenu() {
+    const ctxMenu = document.getElementById("context-menu");
+    let ctxTargetCard = null;
+    document.addEventListener("contextmenu", (e) => {
+      const card = e.target.closest(".card");
+      if (!card) {
+        ctxMenu.style.display = "none";
+        return;
+      }
+      e.preventDefault();
+      ctxTargetCard = card;
+      ctxMenu.style.left = e.clientX + "px";
+      ctxMenu.style.top = e.clientY + "px";
+      ctxMenu.style.display = "block";
+    });
+    document.addEventListener("click", (e) => {
+      if (!e.target.closest("#context-menu")) {
+        ctxMenu.style.display = "none";
+        ctxTargetCard = null;
+      }
+    });
+    document.getElementById("ctx-delete")?.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      ctxMenu.style.display = "none";
+      if (!ctxTargetCard) return;
+      const card = ctxTargetCard;
+      ctxTargetCard = null;
+      await deleteCard(card);
+    });
+  }
+
   // src/board/client/detailPanel.ts
   var detailTaskId = null;
   var lastTab = "details";
   function getDetailTaskId() {
     return detailTaskId;
   }
+  function setActiveCard(taskId) {
+    document.querySelectorAll(".card.active").forEach((card) => {
+      card.classList.remove("active");
+    });
+    if (taskId !== null) {
+      const card = document.querySelector('.card[data-id="' + taskId + '"]');
+      if (card) card.classList.add("active");
+    }
+  }
   function closeDetailPanel() {
     const detailPanel = document.getElementById("detail-panel");
     detailPanel.classList.remove("open");
     detailPanel.style.width = "";
+    setActiveCard(null);
     detailTaskId = null;
   }
   function switchTab(tabName) {
@@ -794,6 +1027,10 @@
     html += "</div>";
     return html;
   }
+  function autoResizeTextarea(el) {
+    el.style.height = "auto";
+    el.style.height = el.scrollHeight + "px";
+  }
   function renderMetadataTable(metadata) {
     const otherMeta = metadata.filter((m) => m.key !== "priority");
     if (otherMeta.length === 0) return "";
@@ -833,9 +1070,8 @@
     if (hasRelations) {
       html += renderRelationsHtml(parent, blockedBy, blocking);
     }
-    html += renderEditableTextFields(task);
     html += renderMetadataTable(metadata);
-    html += '<div class="detail-timestamp">created ' + relativeTime(task.created_at) + " &middot; updated " + relativeTime(task.updated_at) + "</div>";
+    html += renderEditableTextFields(task);
     return html;
   }
   function renderDetailPanel(data) {
@@ -850,6 +1086,20 @@
       detailsPane.innerHTML = renderDetailPanelHtml(data);
       detailsPane.style.padding = "20px";
     }
+    const footer = document.getElementById("detail-panel-footer");
+    if (footer) {
+      footer.innerHTML = '<span class="detail-footer-timestamp">created ' + relativeTime(task.created_at) + " &middot; updated " + relativeTime(task.updated_at) + '</span><button id="detail-save-btn">Save</button>';
+      document.getElementById("detail-save-btn")?.addEventListener("click", saveDetailTask);
+    }
+    const textarea = document.getElementById("detail-edit-body");
+    if (textarea) {
+      requestAnimationFrame(() => {
+        autoResizeTextarea(textarea);
+      });
+      textarea.addEventListener("input", () => {
+        autoResizeTextarea(textarea);
+      });
+    }
     loadAllTags().then(() => renderTagsSection([...tags])).catch((err) => {
       console.error("[agkan] renderDetailPanel tags failed", err);
     });
@@ -864,6 +1114,7 @@
       if (!res.ok) throw new Error("Server error");
       const data = await res.json();
       renderDetailPanel(data);
+      setActiveCard(Number(taskId));
       if (!detailPanel.classList.contains("open")) {
         const preferredWidth = detailPanel.dataset.preferredWidth || String(PANEL_DEFAULT_WIDTH2);
         detailPanel.style.width = preferredWidth + "px";
@@ -1036,7 +1287,6 @@
       switchTab(btn.dataset.tab);
     });
     initPanelResize(detailPanel);
-    document.getElementById("detail-save-btn")?.addEventListener("click", saveDetailTask);
     document.querySelectorAll(".card").forEach((card) => {
       card.addEventListener("click", async (e) => {
         if (e.defaultPrevented) return;
@@ -1047,7 +1297,8 @@
       openTaskDetail,
       renderDetailPanel,
       showUpdateWarning,
-      getDetailTaskId
+      getDetailTaskId,
+      setActiveCard
     });
     registerGetDetailTaskId(getDetailTaskId);
   }
@@ -1279,30 +1530,17 @@
       }
     });
   }
-  async function executePurge(purgeConfirmBtn, purgeModal, purgeResultEl) {
-    purgeConfirmBtn.disabled = true;
-    purgeConfirmBtn.textContent = "Purging...";
+  async function executePurge() {
     try {
       const res = await fetch("/api/tasks/purge", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({})
       });
-      const data = await res.json();
       if (res.ok) {
-        purgeResultEl.textContent = "Purged " + data.count + " task(s).";
-        setTimeout(() => {
-          purgeModal.classList.remove("show");
-        }, 1500);
-        location.reload();
-      } else {
-        purgeResultEl.textContent = "Error: " + (data.error || "Unknown error");
+        await refreshBoardCards();
       }
     } catch {
-      purgeResultEl.textContent = "Failed to purge tasks.";
-    } finally {
-      purgeConfirmBtn.disabled = false;
-      purgeConfirmBtn.textContent = "Purge";
     }
   }
   function initPurgeModal(burgerDropdown) {
@@ -1318,7 +1556,10 @@
     purgeCancelBtn.addEventListener("click", () => {
       purgeModal.classList.remove("show");
     });
-    purgeConfirmBtn.addEventListener("click", () => executePurge(purgeConfirmBtn, purgeModal, purgeResultEl));
+    purgeConfirmBtn.addEventListener("click", () => {
+      purgeModal.classList.remove("show");
+      void executePurge();
+    });
   }
   function initVersionModal(burgerDropdown) {
     const versionModal = document.getElementById("version-info-modal");
@@ -1340,11 +1581,108 @@
       versionModal.classList.remove("show");
     });
   }
+  function initExportModal(burgerDropdown) {
+    document.getElementById("burger-export-tasks")?.addEventListener("click", () => {
+      burgerDropdown.classList.remove("open");
+      const a = document.createElement("a");
+      a.href = "/api/export";
+      a.download = "";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    });
+  }
+  function initImportModal(burgerDropdown) {
+    const importModal = document.getElementById("import-modal");
+    const importCancelBtn = document.getElementById("import-cancel-btn");
+    const importConfirmBtn = document.getElementById("import-confirm-btn");
+    const importResultEl = document.getElementById("import-result");
+    const importDropZone = document.getElementById("import-drop-zone");
+    const importFileInput = document.getElementById("import-file-input");
+    if (!importModal || !importCancelBtn || !importConfirmBtn || !importResultEl || !importDropZone || !importFileInput) {
+      return;
+    }
+    const safeImportModal = importModal;
+    const safeImportCancelBtn = importCancelBtn;
+    const safeImportConfirmBtn = importConfirmBtn;
+    const safeImportResultEl = importResultEl;
+    const safeImportDropZone = importDropZone;
+    const safeImportFileInput = importFileInput;
+    let selectedFile = null;
+    function setFile(file) {
+      selectedFile = file;
+      safeImportResultEl.textContent = `Selected: ${file.name}`;
+      safeImportResultEl.style.color = "#64748b";
+      safeImportConfirmBtn.disabled = false;
+    }
+    document.getElementById("burger-import-tasks")?.addEventListener("click", () => {
+      burgerDropdown.classList.remove("open");
+      selectedFile = null;
+      safeImportResultEl.textContent = "";
+      safeImportConfirmBtn.disabled = true;
+      safeImportFileInput.value = "";
+      safeImportModal.classList.add("show");
+    });
+    safeImportCancelBtn.addEventListener("click", () => {
+      safeImportModal.classList.remove("show");
+    });
+    safeImportFileInput.addEventListener("change", () => {
+      const file = safeImportFileInput.files?.[0];
+      if (file) setFile(file);
+    });
+    safeImportDropZone.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      safeImportDropZone.style.borderColor = "#3b82f6";
+    });
+    safeImportDropZone.addEventListener("dragleave", () => {
+      safeImportDropZone.style.borderColor = "#94a3b8";
+    });
+    safeImportDropZone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      safeImportDropZone.style.borderColor = "#94a3b8";
+      const file = e.dataTransfer?.files?.[0];
+      if (file) setFile(file);
+    });
+    safeImportConfirmBtn.addEventListener("click", async () => {
+      if (!selectedFile) return;
+      safeImportConfirmBtn.disabled = true;
+      safeImportConfirmBtn.textContent = "Importing...";
+      try {
+        const text = await selectedFile.text();
+        const data = JSON.parse(text);
+        const res = await fetch("/api/import", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data)
+        });
+        const result = await res.json();
+        if (res.ok) {
+          safeImportResultEl.textContent = `Imported ${result.importedCount} task(s) successfully.`;
+          safeImportResultEl.style.color = "#16a34a";
+          setTimeout(() => {
+            safeImportModal.classList.remove("show");
+            location.reload();
+          }, 1500);
+        } else {
+          safeImportResultEl.textContent = "Error: " + (result.error || "Unknown error");
+          safeImportResultEl.style.color = "#dc2626";
+        }
+      } catch {
+        safeImportResultEl.textContent = "Failed to import tasks. Invalid JSON file.";
+        safeImportResultEl.style.color = "#dc2626";
+      } finally {
+        safeImportConfirmBtn.disabled = false;
+        safeImportConfirmBtn.textContent = "Import";
+      }
+    });
+  }
   function initBurgerMenu() {
     const burgerBtn = document.getElementById("burger-menu-btn");
     const burgerDropdown = document.getElementById("burger-menu-dropdown");
     initBurgerToggle(burgerBtn, burgerDropdown);
     initPurgeModal(burgerDropdown);
+    initExportModal(burgerDropdown);
+    initImportModal(burgerDropdown);
     initVersionModal(burgerDropdown);
     initDarkMode();
   }