From 8220bfda60bff1055e361bf15e826f3a8b6ca73c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 14 Jul 2026 03:25:22 +0530
Subject: [PATCH] feat(documents): enhance DocumentNode and FolderNode
 components with mobile responsiveness and improved checkbox interactions

---
 .../components/documents/DocumentNode.tsx     |  90 +++++++-------
 .../components/documents/FolderNode.tsx       | 116 +++++++++++-------
 2 files changed, 115 insertions(+), 91 deletions(-)

diff --git a/surfsense_web/components/documents/DocumentNode.tsx b/surfsense_web/components/documents/DocumentNode.tsx
index 256fb4147..423d7562f 100644
--- a/surfsense_web/components/documents/DocumentNode.tsx
+++ b/surfsense_web/components/documents/DocumentNode.tsx
@@ -37,6 +37,7 @@ import {
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { DocumentTypeEnum } from "@/contracts/types/document.types";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { SidebarListItem } from "../layout/ui/sidebar/SidebarListItem";
 import { DND_TYPES } from "./FolderNode";
@@ -92,6 +93,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 	const isMemoryDocument =
 		doc.document_type === "USER_MEMORY" || doc.document_type === "TEAM_MEMORY";
 	const isSelectable = canMention && !isUnavailable;
+	const isMobile = useIsMobile();
 
 	const handleCheckChange = useCallback(() => {
 		if (isSelectable) {
@@ -164,9 +166,9 @@ export const DocumentNode = React.memo(function DocumentNode({
 			<ContextMenuTrigger asChild>
 				<SidebarListItem
 					ref={attachRef}
-					active={isMentioned}
+					active={isMentioned || dropdownOpen}
 					dragging={isDragging}
-					className="gap-2.5 px-1"
+					className="group/item relative gap-2.5 px-1"
 					style={{ paddingLeft: `${depth * 16 + 4}px` }}
 					role="button"
 					tabIndex={isUnavailable ? -1 : 0}
@@ -214,32 +216,36 @@ export const DocumentNode = React.memo(function DocumentNode({
 							);
 						}
 						return (
-							<>
-								{isMemoryDocument ? (
-									<span aria-disabled="true" className="h-3.5 w-3.5 shrink-0 cursor-default">
-										<Checkbox
-											checked={false}
-											disabled
-											aria-disabled
-											className="h-3.5 w-3.5 pointer-events-none"
-										/>
-									</span>
-								) : canMention ? (
+							<span className="relative flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+								<span
+									className={cn(
+										"absolute inset-0 flex items-center justify-center transition-opacity",
+										canMention &&
+											(isMentioned
+												? "opacity-0"
+												: "max-sm:opacity-0 group-hover/item:opacity-0")
+									)}
+								>
+									{getDocumentTypeIcon(
+										doc.document_type as DocumentTypeEnum,
+										"h-3.5 w-3.5 text-muted-foreground"
+									)}
+								</span>
+								{canMention ? (
 									<Checkbox
 										checked={isMentioned}
+										aria-label={`Select ${doc.title}`}
 										onCheckedChange={handleCheckChange}
 										onClick={(e) => e.stopPropagation()}
-										className="h-3.5 w-3.5 shrink-0"
-									/>
-								) : (
-									<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
-										{getDocumentTypeIcon(
-											doc.document_type as DocumentTypeEnum,
-											"h-3.5 w-3.5 text-muted-foreground"
+										className={cn(
+											"absolute h-3.5 w-3.5 transition-opacity max-sm:pointer-events-auto max-sm:opacity-100",
+											isMentioned
+												? "opacity-100"
+												: "pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
 										)}
-									</span>
-								)}
-							</>
+									/>
+								) : null}
+							</span>
 						);
 					})()}
 
@@ -260,36 +266,30 @@ export const DocumentNode = React.memo(function DocumentNode({
 						</TooltipContent>
 					</Tooltip>
 
-					<span className="relative shrink-0 flex items-center justify-center h-6 w-6">
-						{getDocumentTypeIcon(
-							doc.document_type as DocumentTypeEnum,
-							"h-3.5 w-3.5 text-muted-foreground"
-						) && (
-							<span
-								className={cn(
-									"absolute inset-0 flex items-center justify-center transition-opacity pointer-events-none",
-									dropdownOpen ? "opacity-0" : "group-hover:opacity-0"
-								)}
-							>
-								{getDocumentTypeIcon(
-									doc.document_type as DocumentTypeEnum,
-									"h-3.5 w-3.5 text-muted-foreground"
-								)}
-							</span>
+					<div
+						className={cn(
+							"pointer-events-none absolute top-0 right-0 bottom-0 flex items-center rounded-r-md pr-1 pl-6",
+							isMentioned || dropdownOpen
+								? "bg-gradient-to-l from-accent from-60% to-transparent"
+								: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
+							isMobile
+								? "opacity-0"
+								: isMentioned || dropdownOpen
+									? "opacity-100"
+									: "opacity-0 group-hover/item:opacity-100"
 						)}
-
+					>
 						<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
 							<DropdownMenuTrigger asChild>
 								<Button
 									variant="ghost"
 									size="icon"
 									className={cn(
-										"hidden sm:inline-flex h-6 w-6 shrink-0 hover:bg-transparent",
-										dropdownOpen
-											? "opacity-100 bg-accent hover:bg-accent"
-											: "opacity-0 group-hover:opacity-100"
+										"pointer-events-auto hidden h-6 w-6 shrink-0 hover:bg-transparent sm:inline-flex",
+										dropdownOpen && "bg-accent hover:bg-accent"
 									)}
 									onClick={(e) => e.stopPropagation()}
+									aria-label={`Document actions for ${doc.title}`}
 								>
 									<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
 								</Button>
@@ -341,7 +341,7 @@ export const DocumentNode = React.memo(function DocumentNode({
 								)}
 							</DropdownMenuContent>
 						</DropdownMenu>
-					</span>
+					</div>
 				</SidebarListItem>
 			</ContextMenuTrigger>
 
diff --git a/surfsense_web/components/documents/FolderNode.tsx b/surfsense_web/components/documents/FolderNode.tsx
index 1cf74f549..bfebf29cd 100644
--- a/surfsense_web/components/documents/FolderNode.tsx
+++ b/surfsense_web/components/documents/FolderNode.tsx
@@ -34,6 +34,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import type { FolderSelectionState } from "./FolderTreeView";
 
@@ -124,6 +125,7 @@ export const FolderNode = React.memo(function FolderNode({
 	onStopWatching,
 	onExportFolder,
 }: FolderNodeProps) {
+	const isMobile = useIsMobile();
 	const [renameValue, setRenameValue] = useState(folder.name);
 	const inputRef = useRef<HTMLInputElement>(null);
 	const rowRef = useRef<HTMLDivElement>(null);
@@ -261,8 +263,9 @@ export const FolderNode = React.memo(function FolderNode({
 					tabIndex={0}
 					dragging={isDragging}
 					className={cn(
-						"relative gap-1 px-1",
+						"group/item relative gap-1 px-1",
 						isExpanded && "font-medium",
+						dropdownOpen && "bg-accent text-accent-foreground",
 						isOver && canDrop && dropZone === "middle" && "bg-accent ring-1 ring-primary/40",
 						isOver && canDrop && dropZone === "top" && "border-t-2 border-primary",
 						isOver && canDrop && dropZone === "bottom" && "border-b-2 border-primary",
@@ -291,11 +294,11 @@ export const FolderNode = React.memo(function FolderNode({
 						)}
 					</span>
 
-					{processingState !== "idle" && selectionState === "none" ? (
-						<>
+					<span className="relative flex h-4 w-4 shrink-0 items-center justify-center">
+						{processingState !== "idle" && selectionState === "none" ? (
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center group-hover:hidden">
+									<span className="flex h-3.5 w-3.5 items-center justify-center">
 										{processingState === "processing" ? (
 											<Spinner size="xs" className="text-primary" />
 										) : (
@@ -309,29 +312,37 @@ export const FolderNode = React.memo(function FolderNode({
 										: "Some files failed to process"}
 								</TooltipContent>
 							</Tooltip>
-							<Checkbox
-								checked={false}
-								onCheckedChange={handleCheckChange}
-								onClick={(e) => e.stopPropagation()}
-								className="h-3.5 w-3.5 shrink-0 hidden group-hover:flex"
-							/>
-						</>
-					) : (
-						<Checkbox
-							checked={
-								selectionState === "all"
-									? true
-									: selectionState === "some"
-										? "indeterminate"
-										: false
-							}
-							onCheckedChange={handleCheckChange}
-							onClick={(e) => e.stopPropagation()}
-							className="h-3.5 w-3.5 shrink-0"
-						/>
-					)}
-
-					<FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+						) : (
+							<>
+								<FolderIcon
+									className={cn(
+										"absolute h-4 w-4 text-muted-foreground transition-opacity",
+										selectionState === "none"
+											? "max-sm:opacity-0 group-hover/item:opacity-0"
+											: "opacity-0"
+									)}
+								/>
+								<Checkbox
+									checked={
+										selectionState === "all"
+											? true
+											: selectionState === "some"
+												? "indeterminate"
+												: false
+									}
+									aria-label={`Select ${folder.name}`}
+									onCheckedChange={handleCheckChange}
+									onClick={(e) => e.stopPropagation()}
+									className={cn(
+										"absolute h-3.5 w-3.5 transition-opacity max-sm:pointer-events-auto max-sm:opacity-100",
+										selectionState === "none"
+											? "pointer-events-none opacity-0 group-hover/item:pointer-events-auto group-hover/item:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
+											: "opacity-100"
+									)}
+								/>
+							</>
+						)}
+					</span>
 
 					{isRenaming ? (
 						<input
@@ -350,23 +361,35 @@ export const FolderNode = React.memo(function FolderNode({
 					)}
 
 					{!isRenaming && (
-						<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
-							<DropdownMenuTrigger asChild>
-								<Button
-									variant="ghost"
-									size="icon"
-									className={cn(
-										"hidden sm:inline-flex h-6 w-6 shrink-0 hover:bg-transparent transition-opacity",
-										dropdownOpen
-											? "opacity-100 bg-accent hover:bg-accent"
-											: "opacity-0 group-hover:opacity-100"
-									)}
-									onClick={(e) => e.stopPropagation()}
-								>
-									<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
-								</Button>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="end" className="w-40">
+						<div
+							className={cn(
+								"pointer-events-none absolute top-0 right-0 bottom-0 flex items-center rounded-r-md pr-1 pl-6",
+								dropdownOpen
+									? "bg-gradient-to-l from-accent from-60% to-transparent"
+									: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
+								isMobile
+									? "opacity-0"
+									: dropdownOpen
+										? "opacity-100"
+										: "opacity-0 group-hover/item:opacity-100"
+							)}
+						>
+							<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+								<DropdownMenuTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										className={cn(
+											"pointer-events-auto hidden h-6 w-6 shrink-0 hover:bg-transparent transition-opacity sm:inline-flex",
+											dropdownOpen && "bg-accent hover:bg-accent"
+										)}
+										onClick={(e) => e.stopPropagation()}
+										aria-label={`Folder actions for ${folder.name}`}
+									>
+										<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
+									</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="end" className="w-40">
 								{isWatched && onRescan && (
 									<DropdownMenuItem
 										onClick={(e) => {
@@ -436,8 +459,9 @@ export const FolderNode = React.memo(function FolderNode({
 									<Trash2 className="mr-2 h-4 w-4" />
 									Delete
 								</DropdownMenuItem>
-							</DropdownMenuContent>
-						</DropdownMenu>
+								</DropdownMenuContent>
+							</DropdownMenu>
+						</div>
 					)}
 				</SidebarListItem>
 			</ContextMenuTrigger>