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

"use client"

import { useState } from "react"
import { FileThumbnail } from "@/components/drive/file-thumbnail"
import { DriveFileContextMenu } from "@/components/drive/drive-file-context-menu"
import { DriveFileMenuButton } from "@/components/drive/drive-file-actions-menu"
import type { DriveFileInfo } from "@/lib/api/types"
import { displayFileName } from "@/lib/drive/display-file-name"
import type { useDriveMutations } from "@/lib/api/hooks/use-drive-queries"
import type { PublicShareThumbContext } from "@/lib/api/hooks/use-public-share-preview-thumb"
import { DriveFileTypeIcon } from "@/lib/drive/drive-file-icon"
import { cn } from "@/lib/utils"

const GRID_TITLE_CLASS =
  "min-w-0 flex-1 truncate text-left text-xs font-normal text-[#3c4043] dark:text-[#e8eaed]"

export function DriveGridCard({
  file,
  allItems,
  inSharedView,
  isSelected,
  isTrash,
  allowShare = true,
  writable = true,
  hideFavorite = false,
  disableDnd = false,
  mutations,
  onDownloadItem,
  publicShare,
  onOpen,
  onItemClick,
  registerRef,
}: {
  file: DriveFileInfo
  allItems: DriveFileInfo[]
  inSharedView?: boolean
  isSelected: boolean
  isTrash?: boolean
  allowShare?: boolean
  writable?: boolean
  hideFavorite?: boolean
  disableDnd?: boolean
  mutations?: ReturnType<typeof useDriveMutations>
  onDownloadItem?: (file: DriveFileInfo) => void
  publicShare?: PublicShareThumbContext
  onOpen: () => void
  onItemClick: (file: DriveFileInfo, e: React.MouseEvent) => void
  registerRef?: (path: string, el: HTMLDivElement | null) => void
}) {
  const [menuActive, setMenuActive] = useState(false)
  const [contextMenuActive, setContextMenuActive] = useState(false)
  const label = displayFileName(file.name)
  const highlighted = isSelected || menuActive || contextMenuActive

  return (
    <DriveFileContextMenu
      file={file}
      allItems={allItems}
      isTrash={isTrash}
      allowShare={allowShare}
      writable={writable}
      hideFavorite={hideFavorite}
      disableDnd={disableDnd}
      mutations={mutations}
      onDownloadRequest={onDownloadItem ? () => onDownloadItem(file) : undefined}
      onOpen={onOpen}
      variant="grid"
      registerRef={registerRef ? (el) => registerRef(file.path, el) : undefined}
      onItemClick={onItemClick}
      onContextMenuActiveChange={setContextMenuActive}
      className={cn(
        "flex cursor-pointer flex-col overflow-hidden rounded-xl transition-colors",
        highlighted
          ? "bg-mail-active"
          : "bg-mail-surface-muted hover:bg-mail-nav-hover"
      )}
    >
      <div className="flex min-w-0 items-center gap-0.5 px-2.5 pt-2">
        <DriveFileTypeIcon
          file={file}
          inSharedView={inSharedView}
          size="sm"
          className="mr-1.5 shrink-0"
        />
        <span className={GRID_TITLE_CLASS} title={label}>
          {label}
        </span>
        <DriveFileMenuButton
          file={file}
          allItems={allItems}
          isTrash={isTrash}
          allowShare={allowShare}
          writable={writable}
          hideFavorite={hideFavorite}
          mutations={mutations}
          onDownloadRequest={onDownloadItem ? () => onDownloadItem(file) : undefined}
          onOpen={onOpen}
          onActiveChange={setMenuActive}
        />
      </div>
      <div className="px-2.5 pb-2.5 pt-1">
        <FileThumbnail
          file={file}
          variant="grid"
          inSharedView={inSharedView}
          publicShare={publicShare}
          className="rounded-lg"
        />
      </div>
    </DriveFileContextMenu>
  )
}