fix add checkbox

addCheckboxes.js

@@ -1,63 +1,42 @@
 console.log("addCheckboxes.js loaded");
 
-// Create a new checkbox element
+// Create a new checkbox element with specific styles
 function createCheckbox(index) {
   const checkbox = document.createElement("input");
   checkbox.type = "checkbox";
   checkbox.className = CHECKBOX_CLASS;
   checkbox.dataset.index = index;
-  checkbox.addEventListener("click", preventEventPropagation);
+  checkbox.style.cssText = `
+    margin-right: 8px;
+    margin-left: 4px;
+    position: relative;
+    top: 1px;
+  `;
+  checkbox.addEventListener("click", handleCheckboxClick);
   return checkbox;
 }
 
-// Add click event listener to an element
-function addClickEventListener(element) {
-  const handleTitleClick = (event) => {
-    toggleCheckbox(event);
-    event.stopPropagation();
-  };
-  element.addEventListener("click", handleTitleClick);
-  element.dataset.hasClickListener = "true";
-}
-
-function findAncestorWithCheckbox(el, selector) {
-  while ((el = el.parentElement) && !el.querySelector(selector));
-  return el;
-}
-
-// Toggle the checkbox's checked state
-function toggleCheckbox(event) {
-  event.preventDefault();
-  event.stopPropagation();
-
-  const parentElement = findAncestorWithCheckbox(
-    event.currentTarget,
-    `.${CHECKBOX_CLASS}`
-  );
-  const checkbox = parentElement
-    ? parentElement.querySelector(`.${CHECKBOX_CLASS}`)
-    : null;
-  if (checkbox) {
-    checkbox.checked = !checkbox.checked;
-    checkPreviousCheckboxes(checkbox);
-
-    // 更新最后选中的复选框
-    if (checkbox.checked) {
-      window.lastCheckedCheckbox = checkbox;
-    }
-  }
-}
-
 function handleCheckboxClick(event) {
   event.stopPropagation();
-
   const clickedCheckbox = event.target;
   checkPreviousCheckboxes(clickedCheckbox);
-
-  // 更新最后选中的复选框
   window.lastCheckedCheckbox = clickedCheckbox;
 }
 
+function toggleCheckboxInConversation(conversation, event) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const checkbox = conversation.querySelector(`.${CHECKBOX_CLASS}`);
+  if (checkbox) {
+    checkbox.checked = !checkbox.checked;
+    checkPreviousCheckboxes(checkbox);
+    if (checkbox.checked) {
+      window.lastCheckedCheckbox = checkbox;
+    }
+  }
+}
+
 function checkPreviousCheckboxes(clickedCheckbox) {
   if (window.shiftPressed && window.lastCheckedCheckbox) {
     const allCheckboxes = Array.from(
@@ -107,42 +86,45 @@ function addCheckboxes() {
       existingCheckbox.remove();
     }
 
-    // 创建新的复选框并设置其属性
+    // 创建一个新的 flexbox 容器
-    const checkbox = document.createElement("input");
+    const flexContainer = document.createElement("div");
-    checkbox.type = "checkbox";
+    flexContainer.style.cssText = `
-    checkbox.className = CHECKBOX_CLASS;
+      display: flex;
-    checkbox.dataset.index = index;
+      align-items: center;
+      width: 100%;
+      padding: 0;
+      min-height: inherit;
+    `;
+
+    // 创建新的复选框并添加到 flexContainer
+    const checkbox = createCheckbox(index);
     checkbox.checked = isChecked;
-    checkbox.addEventListener("click", handleCheckboxClick);
+    flexContainer.appendChild(checkbox);
-    conversation.insertAdjacentElement("afterbegin", checkbox);
 
-    // add click event listener to the title element
+    // 将原有内容移动到 flexContainer 中
-    const titleElement = conversation.querySelector(Selectors.TITLE_SELECTOR);
+    while (conversation.firstChild) {
-    if (titleElement) {
+      flexContainer.appendChild(conversation.firstChild);
-      titleElement.style.cursor = "default";
-
-      // get the parent element of titleElement
-      const parentElement = titleElement.parentElement;
-
-      // define a common event handler
-      const handleTitleClick = (event) => {
-        toggleCheckbox(event);
-        event.stopPropagation(); // prevent event propagation
-      };
-
-      // add click event listener to titleElement
-      if (!titleElement.dataset.hasClickListener) {
-        titleElement.addEventListener("click", handleTitleClick);
-        titleElement.dataset.hasClickListener = "true";
-      }
-
-      // add click event listener to the parent element of titleElement
-      if (parentElement && !parentElement.dataset.hasClickListener) {
-        parentElement.style.cursor = "default";
-        parentElement.addEventListener("click", handleTitleClick);
-        parentElement.dataset.hasClickListener = "true";
-      }
     }
+
+    // 将 flexContainer 添加到对话中
+    conversation.appendChild(flexContainer);
+
+    // 禁用对话的默认点击行为
+    const link = conversation.querySelector("a");
+    if (link) {
+      link.style.pointerEvents = "none";
+      link.style.cursor = "default";
+    }
+
+    // 添加点击事件到当前对话元素
+    conversation.addEventListener("click", (event) => {
+      // 只有当点击的不是复选框时才触发
+      if (!event.target.classList.contains(CHECKBOX_CLASS)) {
+        toggleCheckboxInConversation(conversation, event);
+      }
+    });
+
+    conversation.style.cursor = "pointer";
   });
 
   addShiftKeyEventListeners();