ultisuite-client/components/drive/drive-grid-view.tsx

"use client"

import { useMemo } from "react"
import { DriveGridCard } from "@/components/drive/drive-grid-card"
import { DriveFolderGridCard } from "@/components/drive/drive-folder-grid-card"
import type { DriveFileInfo } from "@/lib/api/types"
import type { useDriveMutations } from "@/lib/api/hooks/use-drive-queries"
import type { PublicShareThumbContext } from "@/lib/api/hooks/use-public-share-preview-thumb"
import { useDriveSettingsStore } from "@/lib/stores/drive-settings-store"
import { useDriveUIStore } from "@/lib/stores/drive-ui-store"
import { DRIVE_CARD_PAD_X } from "@/lib/drive/drive-chrome-classes"
import { cn } from "@/lib/utils"

const DRIVE_GRID_COLS =
  "grid w-full grid-cols-2 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"

const DRIVE_GRID_SECTION_GAP = "mb-6"

export function DriveGridView({
  items,
  isTrash,
  inSharedView,
  allowShare = true,
  writable = true,
  hideFavorite = false,
  disableDnd = false,
  mutations,
  onDownloadItem,
  gridClassName,
  publicShare,
  onOpen,
  onItemClick,
}: {
  items: DriveFileInfo[]
  isTrash?: boolean
  inSharedView?: boolean
  allowShare?: boolean
  writable?: boolean
  hideFavorite?: boolean
  disableDnd?: boolean
  mutations?: ReturnType<typeof useDriveMutations>
  onDownloadItem?: (file: DriveFileInfo) => void
  gridClassName?: string
  publicShare?: PublicShareThumbContext
  onOpen: (file: DriveFileInfo) => void
  onItemClick: (file: DriveFileInfo, e: React.MouseEvent) => void
}) {
  const folderPlacement = useDriveSettingsStore((s) => s.folderPlacement)
  const folders = useMemo(() => items.filter((f) => f.type === "directory"), [items])
  const files = useMemo(() => items.filter((f) => f.type !== "directory"), [items])
  const gridItems = useMemo(() => items, [items])
  const mixedLayout = folderPlacement === "mixed"

  const selectedPaths = useDriveUIStore((s) => s.selectedPaths)
  const sharedCardProps = {
    writable,
    hideFavorite,
    disableDnd,
    mutations,
    onDownloadItem,
    publicShare,
  }

  return (
    <div
      data-drive-grid-root
      className={cn("w-full", DRIVE_CARD_PAD_X, gridClassName)}
    >
        {mixedLayout ? (
          <div className={DRIVE_GRID_COLS}>
            {items.map((item) => (
              <DriveGridCard
                key={item.path}
                file={item}
                allItems={gridItems}
                inSharedView={inSharedView}
                allowShare={allowShare}
                isSelected={selectedPaths.has(item.path)}
                isTrash={isTrash}
                {...sharedCardProps}
                onOpen={() => onOpen(item)}
                onItemClick={onItemClick}
              />
            ))}
          </div>
        ) : (
          <>
            {folders.length > 0 ? (
              <div className={cn(DRIVE_GRID_SECTION_GAP, DRIVE_GRID_COLS)}>
                {folders.map((folder) => (
                  <DriveFolderGridCard
                    key={folder.path}
                    folder={folder}
                    allItems={gridItems}
                    inSharedView={inSharedView}
                    allowShare={allowShare}
                    isSelected={selectedPaths.has(folder.path)}
                    isTrash={isTrash}
                    {...sharedCardProps}
                    onOpen={() => onOpen(folder)}
                    onItemClick={onItemClick}
                  />
                ))}
              </div>
            ) : null}
            {files.length > 0 ? (
              <div className={DRIVE_GRID_COLS}>
                {files.map((file) => (
                  <DriveGridCard
                    key={file.path}
                    file={file}
                    allItems={gridItems}
                    allowShare={allowShare}
                    isSelected={selectedPaths.has(file.path)}
                    isTrash={isTrash}
                    {...sharedCardProps}
                    onOpen={() => onOpen(file)}
                    onItemClick={onItemClick}
                  />
                ))}
              </div>
            ) : null}
          </>
        )}
    </div>
  )
}