From db5fddb104be1d3b026a9aee7d3642c026efb64c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Fri, 20 Mar 2026 15:46:43 +0530
Subject: [PATCH] feat: replace checkbox inputs with Checkbox component in file
 deletion UIs

- Updated the file deletion UI components for Google Drive, Linear, and Notion to use the new Checkbox component for better consistency and styling.
- Enhanced the accessibility of the checkbox inputs by associating labels with their respective checkboxes, improving user experience during file deletion operations.
---
 .../tool-ui/google-drive/trash-file.tsx       | 27 ++++++++++---------
 .../tool-ui/linear/delete-linear-issue.tsx    | 27 ++++++++++---------
 .../tool-ui/notion/delete-notion-page.tsx     | 27 ++++++++++---------
 3 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/surfsense_web/components/tool-ui/google-drive/trash-file.tsx b/surfsense_web/components/tool-ui/google-drive/trash-file.tsx
index 02e833f23..ad1157fd4 100644
--- a/surfsense_web/components/tool-ui/google-drive/trash-file.tsx
+++ b/surfsense_web/components/tool-ui/google-drive/trash-file.tsx
@@ -12,6 +12,7 @@ import { useParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
 import { authenticatedFetch } from "@/lib/auth-utils";
 
@@ -274,21 +275,21 @@ function ApprovalCard({
 						<p className="text-xs text-muted-foreground">
 							The file will be moved to Google Drive trash. You can restore it from trash within 30 days.
 						</p>
-						<label className="flex items-start gap-2 cursor-pointer">
-							<input
-								type="checkbox"
-								checked={deleteFromKb}
-								onChange={(e) => setDeleteFromKb(e.target.checked)}
-								className="mt-0.5"
-							/>
-							<div className="flex-1">
-								<span className="text-sm text-foreground">Also remove from knowledge base</span>
-								<p className="text-xs text-muted-foreground mt-1">
-									This will permanently delete the file from your knowledge base (cannot be undone)
-								</p>
-							</div>
+					<div className="flex items-center gap-2.5">
+						<Checkbox
+							id="delete-from-kb"
+							checked={deleteFromKb}
+							onCheckedChange={(v) => setDeleteFromKb(v === true)}
+							className="shrink-0"
+						/>
+						<label htmlFor="delete-from-kb" className="flex-1 cursor-pointer">
+							<span className="text-sm text-foreground">Also remove from knowledge base</span>
+							<p className="text-xs text-muted-foreground mt-0.5">
+								This will permanently delete the file from your knowledge base (cannot be undone)
+							</p>
 						</label>
 					</div>
+					</div>
 				</>
 			)}
 
diff --git a/surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx b/surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx
index f973f3196..08bd6cb1c 100644
--- a/surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx
+++ b/surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx
@@ -4,6 +4,7 @@ import { makeAssistantToolUI } from "@assistant-ui/react";
 import { CornerDownLeftIcon, TriangleAlertIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
 
 interface InterruptResult {
@@ -228,21 +229,21 @@ function ApprovalCard({
 				<>
 					<div className="mx-5 h-px bg-border/50" />
 					<div className="px-5 py-4 select-none">
-						<label className="flex items-start gap-2 cursor-pointer">
-							<input
-								type="checkbox"
-								checked={deleteFromKb}
-								onChange={(e) => setDeleteFromKb(e.target.checked)}
-								className="mt-0.5"
-							/>
-							<div className="flex-1">
-								<span className="text-sm text-foreground">Also remove from knowledge base</span>
-								<p className="text-xs text-muted-foreground mt-1">
-									This will permanently delete the issue from your knowledge base (cannot be undone)
-								</p>
-							</div>
+					<div className="flex items-center gap-2.5">
+						<Checkbox
+							id="linear-delete-from-kb"
+							checked={deleteFromKb}
+							onCheckedChange={(v) => setDeleteFromKb(v === true)}
+							className="shrink-0"
+						/>
+						<label htmlFor="linear-delete-from-kb" className="flex-1 cursor-pointer">
+							<span className="text-sm text-foreground">Also remove from knowledge base</span>
+							<p className="text-xs text-muted-foreground mt-0.5">
+								This will permanently delete the issue from your knowledge base (cannot be undone)
+							</p>
 						</label>
 					</div>
+					</div>
 				</>
 			)}
 
diff --git a/surfsense_web/components/tool-ui/notion/delete-notion-page.tsx b/surfsense_web/components/tool-ui/notion/delete-notion-page.tsx
index 052bf7418..17dbbf455 100644
--- a/surfsense_web/components/tool-ui/notion/delete-notion-page.tsx
+++ b/surfsense_web/components/tool-ui/notion/delete-notion-page.tsx
@@ -4,6 +4,7 @@ import { makeAssistantToolUI } from "@assistant-ui/react";
 import { CornerDownLeftIcon, TriangleAlertIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
 
 interface InterruptResult {
@@ -228,21 +229,21 @@ function ApprovalCard({
 				<>
 					<div className="mx-5 h-px bg-border/50" />
 					<div className="px-5 py-4 select-none">
-						<label className="flex items-start gap-2 cursor-pointer">
-							<input
-								type="checkbox"
-								checked={deleteFromKb}
-								onChange={(e) => setDeleteFromKb(e.target.checked)}
-								className="mt-0.5"
-							/>
-							<div className="flex-1">
-								<span className="text-sm text-foreground">Also remove from knowledge base</span>
-								<p className="text-xs text-muted-foreground mt-1">
-									This will permanently delete the page from your knowledge base (cannot be undone)
-								</p>
-							</div>
+					<div className="flex items-center gap-2.5">
+						<Checkbox
+							id="notion-delete-from-kb"
+							checked={deleteFromKb}
+							onCheckedChange={(v) => setDeleteFromKb(v === true)}
+							className="shrink-0"
+						/>
+						<label htmlFor="notion-delete-from-kb" className="flex-1 cursor-pointer">
+							<span className="text-sm text-foreground">Also remove from knowledge base</span>
+							<p className="text-xs text-muted-foreground mt-0.5">
+								This will permanently delete the page from your knowledge base (cannot be undone)
+							</p>
 						</label>
 					</div>
+					</div>
 				</>
 			)}