From d52a52b574597c9f2f287ecdc63d69f9cf524e14 Mon Sep 17 00:00:00 2001
From: Saberlve <saberlve9@gmail.com>
Date: Wed, 15 Apr 2026 12:22:49 +0800
Subject: [PATCH] fix: add minimal zotero modal lifecycle

---
 src/zotero_kb/templates/index.html | 33 ++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/zotero_kb/templates/index.html b/src/zotero_kb/templates/index.html
index c85faed..9e7c257 100644
--- a/src/zotero_kb/templates/index.html
+++ b/src/zotero_kb/templates/index.html
@@ -28,6 +28,9 @@
           linear-gradient(180deg, #f7f2e8, var(--bg));
         color: var(--ink);
       }
+      body.modal-open {
+        overflow: hidden;
+      }
       .layout {
         display: grid;
         grid-template-columns: 20rem 1fr 26rem;
@@ -389,6 +392,10 @@
         projectForm: document.getElementById("create-project-form"),
         projectStatus: document.getElementById("project-status"),
         projectList: document.getElementById("project-list"),
+        importModal: document.getElementById("import-modal"),
+        importModalOverlay: document.getElementById("import-modal-overlay"),
+        openImportModalButton: document.getElementById("open-import-modal-button"),
+        closeImportModalButton: document.getElementById("close-import-modal-button"),
         currentProjectLabel: document.getElementById("current-project-label"),
         cardList: document.getElementById("card-list"),
         cardDetail: document.getElementById("card-detail"),
@@ -520,6 +527,22 @@
         `).join("");
       }
 
+      function syncImportModalVisibility() {
+        elements.importModal.hidden = !state.isImportModalOpen;
+        elements.importModal.setAttribute("aria-hidden", state.isImportModalOpen ? "false" : "true");
+        document.body.classList.toggle("modal-open", state.isImportModalOpen);
+      }
+
+      function openImportModal() {
+        state.isImportModalOpen = true;
+        syncImportModalVisibility();
+      }
+
+      function closeImportModal() {
+        state.isImportModalOpen = false;
+        syncImportModalVisibility();
+      }
+
       async function loadProjects() {
         const projects = await api("/api/projects");
         state.projects = projects;
@@ -577,6 +600,15 @@
 
       elements.refreshProjectsButton.addEventListener("click", loadProjects);
 
+      elements.openImportModalButton.addEventListener("click", openImportModal);
+      elements.closeImportModalButton.addEventListener("click", closeImportModal);
+      elements.importModalOverlay.addEventListener("click", closeImportModal);
+      document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && state.isImportModalOpen) {
+          closeImportModal();
+        }
+      });
+
       elements.recommendForm.addEventListener("submit", async (event) => {
         event.preventDefault();
         if (!state.currentProjectId) {
@@ -628,6 +660,7 @@
       elements.recommendTab.addEventListener("click", () => activateTab("recommend"));
       elements.planTab.addEventListener("click", () => activateTab("plan"));
 
+      syncImportModalVisibility();
       loadProjects().catch((error) => {
         setStatus(elements.projectStatus, error.message, true);
       });