feat: add SelectionCheckbox component for improved checkbox behavior in DocumentList and FAQList

web/app/dashboard/knowledge/_components/document-list.tsx

@@ -65,6 +65,7 @@ import { DocumentEditDialog } from "./document-edit";
 import { KnowledgeContentDetailDialog } from "./knowledge-content-detail";
 import { KnowledgeBulkMoveDialog } from "./knowledge-bulk-move-dialog";
 import { KnowledgeDirectoryPanel } from "./knowledge-directory-panel";
+import { SelectionCheckbox } from "./selection-checkbox";
 
 type DocumentListProps = {
   knowledgeBaseId: number | null;
@@ -516,9 +517,8 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
                     >
                       <div className="flex items-start justify-between gap-2">
                         <div className="flex min-w-0 flex-1 items-start gap-2">
-                          <Checkbox
+                          <SelectionCheckbox
                             checked={selectedIds.includes(item.id)}
-                            onClick={(event) => event.stopPropagation()}
                             onCheckedChange={(checked) => toggleSelected(item.id, Boolean(checked))}
                             aria-label={t("knowledge.selectItem", { name: item.title })}
                             className="mt-0.5"
@@ -623,9 +623,8 @@ export function DocumentList({ knowledgeBaseId, onActionStateChange }: DocumentL
                       )}
                       onClick={() => openDetailDialog(item)}
                     >
-                      <Checkbox
+                      <SelectionCheckbox
                         checked={selectedIds.includes(item.id)}
-                        onClick={(event) => event.stopPropagation()}
                         onCheckedChange={(checked) => toggleSelected(item.id, Boolean(checked))}
                         aria-label={t("knowledge.selectItem", { name: item.title })}
                       />

web/app/dashboard/knowledge/_components/faq-list.tsx

@@ -62,6 +62,7 @@ import { FAQImportDialog } from "./faq-import-dialog";
 import { KnowledgeContentDetailDialog } from "./knowledge-content-detail";
 import { KnowledgeBulkMoveDialog } from "./knowledge-bulk-move-dialog";
 import { KnowledgeDirectoryPanel } from "./knowledge-directory-panel";
+import { SelectionCheckbox } from "./selection-checkbox";
 
 type FAQListProps = {
   knowledgeBaseId: number | null;
@@ -459,9 +460,8 @@ export function FAQList({
                         )}
                         onClick={() => openDetailDialog(item)}
                       >
-                        <Checkbox
+                        <SelectionCheckbox
                           checked={selectedIds.includes(item.id)}
-                          onClick={(event) => event.stopPropagation()}
                           onCheckedChange={(checked) => toggleSelected(item.id, Boolean(checked))}
                           aria-label={t("knowledge.selectItem", { name: item.question })}
                         />

web/app/dashboard/knowledge/_components/selection-checkbox.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+
+type SelectionCheckboxProps = ComponentProps<typeof Checkbox> & {
+  wrapperClassName?: string;
+};
+
+export function SelectionCheckbox({
+  className,
+  wrapperClassName,
+  ...props
+}: SelectionCheckboxProps) {
+  return (
+    <span
+      className={cn("inline-flex shrink-0", wrapperClassName)}
+      onPointerDown={(event) => event.stopPropagation()}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <Checkbox className={className} {...props} />
+    </span>
+  );
+}