Update app.js

app.js

@@ -46,6 +46,13 @@ const els = {
   cancelPassword: document.querySelector("#cancelPassword"),
   submitPassword: document.querySelector("#submitPassword"),
   passwordMessage: document.querySelector("#passwordMessage"),
+  folderGate: document.querySelector("#folderGate"),
+  folderForm: document.querySelector("#folderForm"),
+  folderTitle: document.querySelector("#folderTitle"),
+  folderName: document.querySelector("#folderName"),
+  cancelFolder: document.querySelector("#cancelFolder"),
+  submitFolder: document.querySelector("#submitFolder"),
+  folderMessage: document.querySelector("#folderMessage"),
   folderList: document.querySelector("#folderList"),
   newFolder: document.querySelector("#newFolder"),
   listTitle: document.querySelector("#listTitle"),
@@ -242,35 +249,11 @@ document.addEventListener("click", (event) => {
   els.mobileActionMenu.hidden = true;
 });
 
-els.newFolder.addEventListener("click", async () => {
-  const name = getUniqueFolderName("新建文件夹");
-  const folder = {
-    id: crypto.randomUUID(),
-    name,
-    createdAt: Date.now(),
-    updatedAt: Date.now(),
-    version: 1
-  };
-
-  state.folders.push(folder);
-  state.activeFolder = folder.id;
-  state.selectedId = null;
-  state.mobileView = "list";
-  render();
-
-  try {
-    const saved = await createFolder(folder);
-    Object.assign(folder, saved);
-    setSaveStatus("文件夹已创建", "ok");
-    renderFolders();
-    renderEditor();
-  } catch (error) {
-    state.folders = state.folders.filter((entry) => entry.id !== folder.id);
-    state.activeFolder = "all";
-    setSaveStatus("创建失败", "error");
-    render();
-    console.error("Failed to create folder.", error);
-  }
+els.newFolder.addEventListener("click", () => {
+  openFolderGate({
+    mode: "create",
+    name: getUniqueFolderName("新建文件夹")
+  });
 });
 
 els.editor.addEventListener("input", (event) => {
@@ -318,6 +301,31 @@ els.changePassword.addEventListener("click", async () => {
 
 els.cancelPassword.addEventListener("click", hidePasswordGate);
 
+els.cancelFolder.addEventListener("click", hideFolderGate);
+
+els.folderForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const mode = els.folderForm.dataset.mode;
+  const folderId = els.folderForm.dataset.folderId;
+  const name = els.folderName.value.trim();
+  if (!name) {
+    els.folderMessage.textContent = "请输入文件夹名称";
+    return;
+  }
+
+  els.submitFolder.disabled = true;
+  els.folderMessage.textContent = "";
+  try {
+    if (mode === "rename" && folderId) {
+      await submitFolderRename(folderId, name);
+    } else {
+      await submitFolderCreate(name);
+    }
+  } finally {
+    els.submitFolder.disabled = false;
+  }
+});
+
 els.passwordForm.addEventListener("submit", async (event) => {
   event.preventDefault();
   const currentPassword = els.currentPassword.value;
@@ -444,6 +452,28 @@ function hidePasswordGate() {
   els.passwordMessage.textContent = "";
 }
 
+function openFolderGate({ mode, name, folderId = "" }) {
+  els.folderForm.dataset.mode = mode;
+  els.folderForm.dataset.folderId = folderId;
+  els.folderTitle.textContent = mode === "rename" ? "重命名文件夹" : "新建文件夹";
+  els.submitFolder.textContent = mode === "rename" ? "保存" : "创建";
+  els.folderName.value = name || "";
+  els.folderMessage.textContent = "";
+  els.folderGate.hidden = false;
+  requestAnimationFrame(() => {
+    els.folderName.focus();
+    els.folderName.select();
+  });
+}
+
+function hideFolderGate() {
+  els.folderGate.hidden = true;
+  els.folderForm.reset();
+  els.folderForm.dataset.mode = "";
+  els.folderForm.dataset.folderId = "";
+  els.folderMessage.textContent = "";
+}
+
 function saveSelectedNote({ immediate = false } = {}) {
   saveUiState();
   const note = getSelectedNote();
@@ -536,6 +566,22 @@ async function createFolder(folder) {
   return await response.json();
 }
 
+async function updateFolder(folderId, patch) {
+  const response = await fetch(`/api/folders/${encodeURIComponent(folderId)}`, {
+    method: "PATCH",
+    headers: {
+      "content-type": "application/json"
+    },
+    body: JSON.stringify(patch)
+  });
+  const payload = await response.json().catch(() => ({}));
+  if (response.status === 409 && payload.folder) {
+    return { status: "conflict", folder: payload.folder };
+  }
+  if (!response.ok) throw new Error(`Update folder API returned ${response.status}`);
+  return payload;
+}
+
 async function removeFolder(folderId) {
   const response = await fetch(`/api/folders/${encodeURIComponent(folderId)}`, { method: "DELETE" });
   if (!response.ok) throw new Error(`Delete folder API returned ${response.status}`);
@@ -645,7 +691,7 @@ function renderFolders() {
       name: folder.name,
       icon: "folder",
       count: state.notes.filter((note) => note.folder === folder.id).length,
-      deletable: folder.id !== "notes"
+      manageable: folder.id !== "notes"
     }));
 
   const smartFolders = [allFolder, recentFolder].filter((folder) => (
@@ -695,7 +741,7 @@ function renderGroupedNotes(notes) {
 
 function renderFolderItem(folder) {
   const item = document.createElement("div");
-  item.className = `folder-item${folder.deletable ? " can-delete" : ""}`;
+  item.className = `folder-item${folder.manageable ? " can-manage" : ""}`;
 
   const button = document.createElement("button");
   button.className = `folder-row${folder.id === state.activeFolder ? " active" : ""}`;
@@ -708,6 +754,7 @@ function renderFolderItem(folder) {
   icon.setAttribute("aria-hidden", "true");
 
   const name = document.createElement("span");
+  name.className = "folder-name";
   name.textContent = folder.name;
 
   const count = document.createElement("span");
@@ -726,7 +773,23 @@ function renderFolderItem(folder) {
 
   item.append(button);
 
-  if (folder.deletable) {
+  if (folder.manageable) {
+    const editButton = document.createElement("button");
+    editButton.className = "folder-edit";
+    editButton.type = "button";
+    editButton.setAttribute("aria-label", `重命名${folder.name}`);
+    editButton.title = "重命名文件夹";
+    editButton.innerHTML = '<i data-lucide="pencil" aria-hidden="true"></i>';
+    editButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      openFolderGate({
+        mode: "rename",
+        folderId: folder.id,
+        name: folder.name
+      });
+    });
+    item.append(editButton);
+
     const deleteButton = document.createElement("button");
     deleteButton.className = "folder-delete";
     deleteButton.type = "button";
@@ -928,6 +991,77 @@ async function deleteFolder(folderId) {
   }
 }
 
+async function submitFolderCreate(name) {
+  const now = Date.now();
+  const previousActiveFolder = state.activeFolder;
+  const previousSelectedId = state.selectedId;
+  const folder = {
+    id: crypto.randomUUID(),
+    name,
+    createdAt: now,
+    updatedAt: now,
+    version: 1
+  };
+
+  state.folders.push(folder);
+  state.activeFolder = folder.id;
+  state.selectedId = null;
+  state.mobileView = "list";
+  render();
+  hideFolderGate();
+
+  try {
+    const saved = await createFolder(folder);
+    Object.assign(folder, saved);
+    setSaveStatus("文件夹已创建", "ok");
+    render();
+  } catch (error) {
+    state.folders = state.folders.filter((entry) => entry.id !== folder.id);
+    state.activeFolder = previousActiveFolder;
+    state.selectedId = previousSelectedId;
+    setSaveStatus("创建失败", "error");
+    render();
+    console.error("Failed to create folder.", error);
+  }
+}
+
+async function submitFolderRename(folderId, name) {
+  const folder = state.folders.find((entry) => entry.id === folderId);
+  if (!folder || folder.id === "notes") return;
+
+  const previousName = folder.name;
+  const previousUpdatedAt = folder.updatedAt;
+  const previousVersion = folder.version || 1;
+  folder.name = name;
+  folder.updatedAt = Date.now();
+  folder.version = previousVersion + 1;
+  render();
+  hideFolderGate();
+
+  try {
+    const result = await updateFolder(folder.id, {
+      name: folder.name,
+      updatedAt: folder.updatedAt,
+      version: previousVersion
+    });
+    if (result.status === "conflict" && result.folder) {
+      Object.assign(folder, result.folder);
+      setSaveStatus("文件夹已被其他设备修改", "conflict");
+    } else {
+      Object.assign(folder, result);
+      setSaveStatus("名称已更新", "ok");
+    }
+    render();
+  } catch (error) {
+    folder.name = previousName;
+    folder.updatedAt = previousUpdatedAt;
+    folder.version = previousVersion;
+    setSaveStatus("重命名失败", "error");
+    render();
+    console.error("Failed to rename folder.", error);
+  }
+}
+
 function getActiveFolderLabel() {
   if (state.activeFolder === "all") return "所有笔记";
   if (state.activeFolder === "recent") return "最近编辑";