feat: enhance folder and document selection functionality

- Updated DocumentNode to use a div instead of a button for better accessibility and added keyboard interaction for selection.
- Introduced Checkbox component in FolderNode for selecting folders, with state management for selection (all, some, none).
- Implemented folder selection state logic in FolderTreeView to manage document selection across nested folders.
- Added handleToggleFolderSelect function in DocumentsSidebar to manage selection of documents based on folder selection.

surfsense_web/components/documents/FolderNode.tsx

@@ -14,6 +14,8 @@ import {
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { FolderSelectionState } from "./FolderTreeView";
 import {
 	ContextMenu,
 	ContextMenuContent,
@@ -49,6 +51,8 @@ interface FolderNodeProps {
 	isExpanded: boolean;
 	isRenaming: boolean;
 	childCount: number;
+	selectionState: FolderSelectionState;
+	onToggleSelect: (folderId: number, selectAll: boolean) => void;
 	onToggleExpand: (folderId: number) => void;
 	onRename: (folder: FolderDisplay, newName: string) => void;
 	onStartRename: (folderId: number) => void;
@@ -88,6 +92,8 @@ export const FolderNode = React.memo(function FolderNode({
 	isExpanded,
 	isRenaming,
 	childCount,
+	selectionState,
+	onToggleSelect,
 	onToggleExpand,
 	onRename,
 	onStartRename,
@@ -212,6 +218,10 @@ export const FolderNode = React.memo(function FolderNode({
 		onStartRename(folder.id);
 	}, [folder, onStartRename]);
 
+	const handleCheckChange = useCallback(() => {
+		onToggleSelect(folder.id, selectionState !== "all");
+	}, [folder.id, selectionState, onToggleSelect]);
+
 	const FolderIcon = isExpanded ? FolderOpen : Folder;
 
 	return (
@@ -252,6 +262,13 @@ export const FolderNode = React.memo(function FolderNode({
 						)}
 					</span>
 
+					<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" />
 
 					{isRenaming ? (