feat(explorer): remove grid view option, and remove FileActions as it's not needed anymore

Author: ThisCatLikesCrypto

src/app/[...rest]/page.tsx

@@ -9,7 +9,6 @@ import { getFileType } from "@/lib/previewHelper";
 import { formatPathToBreadcrumb } from "@/lib/utils";
 
 import {
-  FileActions,
   FileBreadcrumb,
   FileExplorerLayout,
   FileReadme,
@@ -108,7 +107,6 @@ export default async function RestPage({ params }: Props) {
               <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
                 <CardTitle>Browse files</CardTitle>
               </div>
-              <FileActions />
             </div>
           </CardHeader>
 

src/app/page.tsx

@@ -8,7 +8,6 @@ import config from "@/config/gIndex.config";
 import { cn } from "@/lib/utils";
 
 import {
-  FileActions,
   FileBreadcrumb,
   FileExplorerLayout,
   FileReadme,
@@ -56,14 +55,6 @@ interface ReadmeData {
   };
 }
 
-// Fallback components for Suspense
-const FileActionsFallback = () => (
-  <div className="flex items-center gap-2">
-    <Skeleton className="h-10 w-16" />
-    <Skeleton className="h-10 w-10" />
-  </div>
-);
-
 const FileReadmeFallback = () => (
   <Card>
     <CardHeader>
@@ -330,11 +321,6 @@ export default function RootPage() {
                     {(data as FileData).data?.files?.length || 0} items
                   </Badge>
                 </div>
-                <div className="flex items-center gap-2">
-                  <Suspense fallback={<FileActionsFallback />}>
-                    <FileActions />
-                  </Suspense>
-                </div>
               </div>
             </CardHeader>
 

src/components/explorer/FileActions.tsx

@@ -16,7 +16,6 @@ import { bytesToReadable, durationToReadable, formatDate } from "@/lib/utils";
 import useRouter from "@/hooks/usePRouter";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -38,7 +37,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import Icon, { type IconName } from "@/components/ui/icon";
-import Image from "next/image";
 
 // import { GetMostRecentFileUpdate } from "@/actions/folder";
 
@@ -320,7 +318,7 @@ const FileItemActions = ({
 // =================================================================================================
 // MAIN FILE ITEM COMPONENT
 // =================================================================================================
-export const FileItem = ({ data: file, layout }: Props) => {
+export const FileItem = ({ data: file }: Props) => {
   const router = useRouter();
   const pathname = usePathname();
   const [isInfoModalOpen, setInfoModalOpen] = useState(false);
@@ -371,85 +369,6 @@ export const FileItem = ({ data: file, layout }: Props) => {
     isFolder,
   };
 
-  const renderGridItem = () => (
-    <Card
-      className="group relative cursor-pointer overflow-hidden transition-all duration-200 hover:shadow-sm"
-      onClick={handleClick}
-    >
-      <div className="relative flex h-32 w-full items-center justify-center bg-muted/30">
-        {file.thumbnailLink && file.mimeType.includes("image") ? (
-          <Image
-            src={`/api/thumb/${file.encryptedId}`}
-            alt={file.name}
-            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-            width={128}
-            height={128}
-          />
-        ) : (
-          <div className="flex flex-col items-center justify-center">
-            <div
-              className="flex items-center justify-center w-16 h-16 rounded-xl mb-2 shadow-sm"
-              style={{
-                backgroundColor: `${fileColor}15`,
-                border: `2px solid ${fileColor}20`,
-              }}
-            >
-              <Icon
-                name={fileIcon}
-                className="h-8 w-8 transition-colors"
-                style={{ color: fileColor }}
-              />
-            </div>
-            {file.fileExtension && (
-              <div
-                className="mt-1 px-2 py-1 rounded text-xs font-mono border transition-colors"
-                style={{
-                  backgroundColor: `${fileColor}10`,
-                  borderColor: `${fileColor}30`,
-                  color: fileColor,
-                }}
-              >
-                {file.fileExtension.toUpperCase()}
-              </div>
-            )}
-          </div>
-        )}
-        <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
-          <FileItemActions {...actionProps} />
-        </div>
-      </div>
-      <CardHeader className="p-3">
-        <CardTitle className="line-clamp-2 text-sm font-medium mb-2">
-          {file.name}
-        </CardTitle>
-        <div className="flex items-center justify-between text-xs text-muted-foreground">
-          <span className="font-mono flex items-center gap-1">
-            {isFolder ? (
-              <>
-                <div
-                  className="w-2 h-2 rounded-full"
-                  style={{ backgroundColor: fileColor }}
-                ></div>
-                <span>DIR</span>
-              </>
-            ) : (
-              <>
-                <div
-                  className="w-2 h-2 rounded-full"
-                  style={{ backgroundColor: fileColor }}
-                ></div>
-                <span>{bytesToReadable(file.size ?? 0)}</span>
-              </>
-            )}
-          </span>
-          <span className="font-mono">
-            {formatDate(file.modifiedTime).split(" ")[0]}
-          </span>
-        </div>
-      </CardHeader>
-    </Card>
-  );
-
   const renderListItem = () => (
     <div
       className="group flex cursor-pointer items-center gap-4 border-b border-border/30 p-3 transition-all duration-150 hover:bg-muted/30"
@@ -513,9 +432,7 @@ export const FileItem = ({ data: file, layout }: Props) => {
   return (
     <>
       <ContextMenu>
-        <ContextMenuTrigger>
-          {layout === "grid" ? renderGridItem() : renderListItem()}
-        </ContextMenuTrigger>
+        <ContextMenuTrigger>{renderListItem()}</ContextMenuTrigger>
         <ContextMenuContent className="w-48">
           <ContextMenuItem onSelect={actionProps.onOpen}>
             <Icon name="ArrowRight" className="mr-2 h-4 w-4" />

src/components/explorer/FileItem.tsx

@@ -9,8 +9,6 @@ import { type z } from "zod";
 
 import { type Schema_File } from "@/types/schema";
 
-import { cn } from "@/lib/utils";
-
 import useLoading from "@/hooks/useLoading";
 
 import { FileItem } from "@/components/explorer";
@@ -137,14 +135,8 @@ const FileExplorerLayout = React.memo(
           </div>
         )}
 
-        {/* Files Grid/List */}
-        <div
-          className={cn(
-            layout === "list"
-              ? "flex flex-col"
-              : "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
-          )}
-        >
+        {/* Files List */}
+        <div className="flex flex-col">
           {filesList.map((file) => (
             <div key={file.encryptedId}>
               <FileItem data={file} layout={layout} />

src/components/explorer/FileLayout.tsx

@@ -6,5 +6,4 @@ export { default as FileExplorerLayout } from "./FileLayout";
 export { default as FileBreadcrumb } from "./FileBreadcrumbs";
 
 // Lazy loaded components for better performance
-export const FileActions = lazy(() => import("./FileActions"));
 export const FileReadme = lazy(() => import("./FileReadme"));