feat(listview): clear selection on empty-space click (#3223)

Clicks landing outside any row (below the last row, on padding) now
deselect all items; rows carry a data-fm-row marker so in-row clicks
stay unaffected.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

frontend/src/component/FileManager/Explorer/ListView/ListBody.tsx

@@ -1,6 +1,8 @@
-import { useContext, useMemo } from "react";
+import { Box } from "@mui/material";
+import { useCallback, useContext, useMemo } from "react";
 import { Virtuoso } from "react-virtuoso";
-import { useAppSelector } from "../../../../redux/hooks.ts";
+import { useAppDispatch, useAppSelector } from "../../../../redux/hooks.ts";
+import { setSelected } from "../../../../redux/fileManagerSlice.ts";
 import DndWrappedFile from "../../Dnd/DndWrappedFile.tsx";
 import { FmIndexContext } from "../../FmIndexContext.tsx";
 import { FmFile, loadingPlaceHolderNumb } from "../GridView/GridView.tsx";
@@ -14,6 +16,7 @@ export interface ListBodyProps {
 
 const ListBody = ({ columns }: ListBodyProps) => {
   const fmIndex = useContext(FmIndexContext);
+  const dispatch = useAppDispatch();
   const files = useAppSelector((state) => state.fileManager[fmIndex].list?.files);
   const mixedType = useAppSelector((state) => state.fileManager[fmIndex].list?.mixed_type);
   const pagination = useAppSelector((state) => state.fileManager[fmIndex].list?.pagination);
@@ -46,7 +49,19 @@ const ListBody = ({ columns }: ListBodyProps) => {
     return list;
   }, [files, mixedType, pagination, search_params]);
 
+  // Clicking empty space below/around rows clears the selection (#3223);
+  // row clicks are excluded via the data-fm-row marker.
+  const onBackgroundClick = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      if (!(e.target as HTMLElement).closest("[data-fm-row]")) {
+        dispatch(setSelected({ index: fmIndex, value: [] }));
+      }
+    },
+    [dispatch, fmIndex],
+  );
+
   return (
+    <Box sx={{ height: "100%" }} onClick={onBackgroundClick}>
       <Virtuoso
         style={{
           height: "100%",
@@ -65,6 +80,7 @@ const ListBody = ({ columns }: ListBodyProps) => {
           />
         )}
       />
+    </Box>
   );
 };
 

frontend/src/component/FileManager/Explorer/ListView/Row.tsx

@@ -91,6 +91,7 @@ const Row = memo((props: FileBlockProps) => {
 
   return (
     <RowContainer
+      data-fm-row
       transparent={isDragging || fileDisabled}
       isDropOver={isDropOver && !isDragging}
       ref={setRefFunc}