first commit

src/component/FileManager/FolderPicker.tsx

@@ -0,0 +1,70 @@
+import { Box, styled, useMediaQuery, useTheme } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useAppSelector } from "../../redux/hooks.ts";
+import { getFileLinkedUri } from "../../util"; // Grid version 2
+import ContextMenu from "./ContextMenu/ContextMenu.tsx";
+import { FileManager, FileManagerIndex } from "./FileManager.tsx";
+import TreeNavigation from "./TreeView/TreeNavigation.tsx";
+
+const StyledGridItem = styled(Grid)(() => ({
+  display: "flex",
+  height: "100%",
+}));
+
+export const useFolderSelector = () => {
+  const currentPath = useAppSelector((state) => state.fileManager[FileManagerIndex.selector].pure_path);
+  const selected = useAppSelector((state) => state.fileManager[FileManagerIndex.selector].selected);
+
+  if (selected && Object.keys(selected).length > 0) {
+    const selectedFile = selected[Object.keys(selected)[0]];
+    return [selectedFile, getFileLinkedUri(selectedFile)] as const;
+  }
+
+  return [undefined, currentPath] as const;
+};
+
+export interface FolderPickerProps {
+  disableSharedWithMe?: boolean;
+  disableTrash?: boolean;
+  initialPath?: string;
+}
+
+const FolderPicker = ({ disableSharedWithMe, disableTrash, initialPath }: FolderPickerProps) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const path = useAppSelector((state) => state.fileManager[FileManagerIndex.main].path);
+
+  return (
+    <Box sx={{ width: "100%", display: "flex" }}>
+      <Grid container columnSpacing={2} sx={{ width: "100%", margin: "0 -4px" }}>
+        <StyledGridItem
+          size={{
+            xs: 12,
+            md: 2,
+          }}
+          sx={{
+            overflowY: "auto",
+            overflowX: "hidden",
+          }}
+        >
+          <TreeNavigation
+            index={FileManagerIndex.selector}
+            disableSharedWithMe={disableSharedWithMe}
+            disableTrash={disableTrash}
+          />
+        </StyledGridItem>
+        <StyledGridItem
+          size={{
+            xs: 12,
+            md: 10,
+          }}
+          sx={{ height: isMobile ? "initial" : "100%" }}
+        >
+          <FileManager index={FileManagerIndex.selector} initialPath={initialPath ?? path} skipRender={isMobile} />
+        </StyledGridItem>
+        <ContextMenu fmIndex={FileManagerIndex.selector} />
+      </Grid>
+    </Box>
+  );
+};
+export default FolderPicker;