From 3deaf12878389af8ed85174e1bfee28c5a0c10b2 Mon Sep 17 00:00:00 2001
From: Aaron Liu <abslant.liu@gmail.com>
Date: Tue, 20 May 2025 11:57:46 +0800
Subject: [PATCH] fix: cannot enter folder in  gallery view
 (https://github.com/cloudreve/Cloudreve/issues/2375)

---
 .../FileManager/Explorer/Explorer.tsx         |  1 +
 .../Explorer/GalleryView/GalleryImage.tsx     | 70 ++++++-------------
 .../Explorer/GalleryView/GalleryView.tsx      | 36 +++-------
 3 files changed, 32 insertions(+), 75 deletions(-)

diff --git a/src/component/FileManager/Explorer/Explorer.tsx b/src/component/FileManager/Explorer/Explorer.tsx
index 4a5df60..36d9f88 100644
--- a/src/component/FileManager/Explorer/Explorer.tsx
+++ b/src/component/FileManager/Explorer/Explorer.tsx
@@ -41,6 +41,7 @@ export interface FileBlockProps {
   index?: number;
   search?: SearchParam;
   columns?: ListViewColumn[];
+  boxHeight?: number;
 }
 
 const Explorer = () => {
diff --git a/src/component/FileManager/Explorer/GalleryView/GalleryImage.tsx b/src/component/FileManager/Explorer/GalleryView/GalleryImage.tsx
index 57bc53b..7a87a4f 100644
--- a/src/component/FileManager/Explorer/GalleryView/GalleryImage.tsx
+++ b/src/component/FileManager/Explorer/GalleryView/GalleryImage.tsx
@@ -1,6 +1,14 @@
-import { FileBlockProps } from "../Explorer.tsx";
+import { CheckCircle } from "@mui/icons-material";
+import { Box, Fade, IconButton, ImageListItem, ImageListItemBar, lighten, styled } from "@mui/material";
 import React, { memo, useCallback, useEffect, useState } from "react";
+import { TransitionGroup } from "react-transition-group";
+import { FileType, Metadata } from "../../../../api/explorer.ts";
 import { useAppDispatch } from "../../../../redux/hooks.ts";
+import { fileIconClicked, loadFileThumb } from "../../../../redux/thunks/file.ts";
+import { navigateReconcile } from "../../../../redux/thunks/filemanager.ts";
+import CheckUnchecked from "../../../Icons/CheckUnchecked.tsx";
+import { FileBlockProps } from "../Explorer.tsx";
+import FileIcon from "../FileIcon.tsx";
 import {
   LargeIconContainer,
   ThumbBox,
@@ -8,25 +16,6 @@ import {
   ThumbLoadingPlaceholder,
   useFileBlockState,
 } from "../GridView/GridFile.tsx";
-import { navigateReconcile } from "../../../../redux/thunks/filemanager.ts";
-import {
-  Box,
-  Fade,
-  IconButton,
-  ImageListItem,
-  ImageListItemBar,
-  lighten,
-  styled,
-} from "@mui/material";
-import {
-  fileIconClicked,
-  loadFileThumb,
-} from "../../../../redux/thunks/file.ts";
-import FileIcon from "../FileIcon.tsx";
-import { TransitionGroup } from "react-transition-group";
-import { FileType, Metadata } from "../../../../api/explorer.ts";
-import CheckUnchecked from "../../../Icons/CheckUnchecked.tsx";
-import { CheckCircle } from "@mui/icons-material";
 
 const StyledImageListItem = styled(ImageListItem)<{
   transparent?: boolean;
@@ -38,12 +27,7 @@ const StyledImageListItem = styled(ImageListItem)<{
     pointerEvents: disabled ? "none" : "auto",
     cursor: "pointer",
     boxShadow: isDropOver ? `0 0 0 2px ${theme.palette.primary.light}` : "none",
-    transition: theme.transitions.create([
-      "height",
-      "width",
-      "opacity",
-      "box-shadow",
-    ]),
+    transition: theme.transitions.create(["height", "width", "opacity", "box-shadow"]),
   };
 });
 
@@ -74,9 +58,7 @@ const GalleryImage = memo((props: FileBlockProps) => {
   const [hovered, setHovered] = useState(false);
 
   // undefined: not loaded, null: no thumb
-  const [thumbSrc, setThumbSrc] = useState<string | undefined | null>(
-    noThumb ? null : undefined,
-  );
+  const [thumbSrc, setThumbSrc] = useState<string | undefined | null>(noThumb ? null : undefined);
   const [imageLoading, setImageLoading] = useState(true);
 
   const tryLoadThumbSrc = useCallback(async () => {
@@ -105,10 +87,7 @@ const GalleryImage = memo((props: FileBlockProps) => {
       return;
     }
 
-    if (
-      (file.metadata && file.metadata[Metadata.thumbDisabled] !== undefined) ||
-      showLock
-    ) {
+    if ((file.metadata && file.metadata[Metadata.thumbDisabled] !== undefined) || showLock) {
       // No thumb available
       setThumbSrc(null);
       return;
@@ -127,7 +106,7 @@ const GalleryImage = memo((props: FileBlockProps) => {
 
   return (
     <StyledImageListItem
-      onClick={onDoubleClicked}
+      onClick={file.type == FileType.folder ? onClick : onDoubleClicked}
       transparent={isDragging || fileDisabled}
       isDropOver={isDropOver && !isDragging}
       disabled={disabled}
@@ -143,10 +122,7 @@ const GalleryImage = memo((props: FileBlockProps) => {
               <ThumbBoxContainer
                 sx={{
                   p: isSelected ? "10%" : 0,
-                  backgroundColor: (theme) =>
-                    isSelected
-                      ? lighten(theme.palette.primary.light, 0.85)
-                      : "initial",
+                  backgroundColor: (theme) => (isSelected ? lighten(theme.palette.primary.light, 0.85) : "initial"),
                   transition: (theme) =>
                     theme.transitions.create(["padding"], {
                       duration: theme.transitions.duration.shortest,
@@ -182,12 +158,12 @@ const GalleryImage = memo((props: FileBlockProps) => {
           <Fade key={"icon"}>
             <LargeIconContainer>
               <FileIcon
-                variant={"large"}
+                variant={"largeMobile"}
                 iconProps={{
                   sx: {
-                    fontSize: "64px",
-                    height: "96px",
-                    width: "96px",
+                    fontSize: "48px",
+                    height: "64px",
+                    width: "64px",
                   },
                 }}
                 file={file}
@@ -200,17 +176,11 @@ const GalleryImage = memo((props: FileBlockProps) => {
       <Fade in={!isLoadingIndicator && (hovered || !!isSelected)}>
         <ImageListItemBar
           sx={{
-            background:
-              "linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, " +
-              "rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%)",
+            background: "linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, " + "rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%)",
           }}
           position="top"
           actionIcon={
-            <IconButton
-              onClick={onIconClick}
-              size={"small"}
-              sx={{ color: "white", mb: 1 }}
-            >
+            <IconButton onClick={onIconClick} size={"small"} sx={{ color: "white", mb: 1 }}>
               <TransitionGroup
                 style={{
                   width: 20,
diff --git a/src/component/FileManager/Explorer/GalleryView/GalleryView.tsx b/src/component/FileManager/Explorer/GalleryView/GalleryView.tsx
index befaebc..d2dc375 100644
--- a/src/component/FileManager/Explorer/GalleryView/GalleryView.tsx
+++ b/src/component/FileManager/Explorer/GalleryView/GalleryView.tsx
@@ -1,19 +1,12 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
 import { Box, ImageList } from "@mui/material";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "../../../../redux/hooks.ts";
+import { mergeRefs } from "../../../../util";
+import DndWrappedFile from "../../Dnd/DndWrappedFile.tsx";
 import { FmIndexContext } from "../../FmIndexContext.tsx";
 import { FmFile, loadingPlaceHolderNumb } from "../GridView/GridView.tsx";
-import DndWrappedFile from "../../Dnd/DndWrappedFile.tsx";
 import GalleryImage from "./GalleryImage.tsx";
-import { mergeRefs } from "../../../../util";
 
 const GalleryView = React.forwardRef(
   (
@@ -31,18 +24,10 @@ const GalleryView = React.forwardRef(
     const [boxHeight, setBoxHeight] = useState(0);
     const [col, setCol] = useState(0);
 
-    const files = useAppSelector(
-      (state) => state.fileManager[fmIndex].list?.files,
-    );
-    const pagination = useAppSelector(
-      (state) => state.fileManager[fmIndex].list?.pagination,
-    );
-    const search_params = useAppSelector(
-      (state) => state.fileManager[fmIndex]?.search_params,
-    );
-    const galleryWidth = useAppSelector(
-      (state) => state.fileManager[fmIndex].galleryWidth,
-    );
+    const files = useAppSelector((state) => state.fileManager[fmIndex].list?.files);
+    const pagination = useAppSelector((state) => state.fileManager[fmIndex].list?.pagination);
+    const search_params = useAppSelector((state) => state.fileManager[fmIndex]?.search_params);
+    const galleryWidth = useAppSelector((state) => state.fileManager[fmIndex].galleryWidth);
 
     const mergedRef = useCallback(
       (val: any) => {
@@ -79,6 +64,7 @@ const GalleryView = React.forwardRef(
 
     const resizeGallery = useCallback(
       (containerWidth: number, boxSize: number) => {
+        console.log(containerWidth / boxSize);
         const boxCount = Math.floor(containerWidth / boxSize);
         const newCols = Math.max(1, boxCount);
         const boxHeight = containerWidth / newCols;
@@ -99,12 +85,11 @@ const GalleryView = React.forwardRef(
     }, [galleryWidth]);
 
     return (
-      <Box ref={mergedRef} component={"div"} {...rest} sx={{}}>
+      <Box ref={mergedRef} component={"div"} {...rest}>
         <ImageList
           gap={2}
           cols={col}
           rowHeight={boxHeight}
-          variant="quilted"
           sx={{
             overflow: "hidden",
             margin: 0,
@@ -113,6 +98,7 @@ const GalleryView = React.forwardRef(
           {list.map((file, index) => (
             <DndWrappedFile
               key={file.id}
+              boxHeight={boxHeight}
               component={GalleryImage}
               search={search_params}
               index={index}