refactor: make dir content table reusable

packages/web/src/directories/directory-page/directory-content-table.tsx

@@ -19,8 +19,8 @@ import {
 	type Table as TableType,
 	useReactTable,
 } from "@tanstack/react-table"
-import { useAtomValue, useSetAtom, useStore } from "jotai"
+import { type PrimitiveAtom, useSetAtom, useStore } from "jotai"
-import { useContext, useEffect, useRef } from "react"
+import { useContext, useEffect, useMemo, useRef } from "react"
 import { DirectoryIcon } from "@/components/icons/directory-icon"
 import { Checkbox } from "@/components/ui/checkbox"
 import {
@@ -36,16 +36,17 @@ import {
 	keyboardModifierAtom,
 } from "@/lib/keyboard"
 import { TextFileIcon } from "../../components/icons/text-file-icon"
-import { useFileDrop } from "../../files/use-file-drop"
+import { type FileDragInfo, useFileDrop } from "../../files/use-file-drop"
 import { cn } from "../../lib/utils"
 import { DirectoryPageContext } from "./context"
-import { DirectoryContentContextMenu } from "./directory-content-context-menu"
+import { contextMenuTargeItemsAtom } from "./state"
-import {
+
-	contextMenuTargeItemsAtom,
+type DirectoryContentTableProps = {
-	dragInfoAtom,
+	filterFn: (item: FileSystemItem) => boolean
-	openedFileAtom,
+	fileDragInfoAtom: PrimitiveAtom<FileDragInfo | null>
-	optimisticDeletedItemsAtom,
+	onContextMenu: (items: FileSystemItem[]) => void
-} from "./state"
+	onOpenFile: (file: Doc<"files">) => void
+}
 
 function formatFileSize(bytes: number): string {
 	if (bytes === 0) return "0 B"
@@ -57,96 +58,118 @@ function formatFileSize(bytes: number): string {
 	return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
 }
 
-const columns: ColumnDef<FileSystemItem>[] = [
+function useTableColumns(
-	{
+	onOpenFile: (file: Doc<"files">) => void,
-		id: "select",
+): ColumnDef<FileSystemItem>[] {
-		header: ({ table }) => (
+	return useMemo(
-			<Checkbox
+		() => [
-				checked={table.getIsAllPageRowsSelected()}
+			{
-				onCheckedChange={(value) => {
+				id: "select",
-					table.toggleAllPageRowsSelected(!!value)
+				header: ({ table }) => (
-				}}
+					<Checkbox
-				aria-label="Select all"
+						checked={table.getIsAllPageRowsSelected()}
-			/>
+						onCheckedChange={(value) => {
-		),
+							table.toggleAllPageRowsSelected(!!value)
-		cell: ({ row }) => (
+						}}
-			<Checkbox
+						aria-label="Select all"
-				checked={row.getIsSelected()}
+					/>
-				onClick={(e) => {
+				),
-					e.stopPropagation()
+				cell: ({ row }) => (
-				}}
+					<Checkbox
-				onCheckedChange={row.getToggleSelectedHandler()}
+						checked={row.getIsSelected()}
-				aria-label="Select row"
+						onClick={(e) => {
-			/>
+							e.stopPropagation()
-		),
+						}}
-		enableSorting: false,
+						onCheckedChange={row.getToggleSelectedHandler()}
-		enableHiding: false,
+						aria-label="Select row"
-		size: 24,
+					/>
-	},
+				),
-	{
+				enableSorting: false,
-		header: "Name",
+				enableHiding: false,
-		accessorKey: "doc.name",
+				size: 24,
-		cell: ({ row }) => {
+			},
-			switch (row.original.kind) {
+			{
-				case FileType.File:
+				header: "Name",
-					return <FileNameCell file={row.original.doc} />
+				accessorKey: "doc.name",
-				case FileType.Directory:
+				cell: ({ row }) => {
-					return <DirectoryNameCell directory={row.original.doc} />
+					switch (row.original.kind) {
-			}
+						case FileType.File:
-		},
+							return (
-		size: 1000,
+								<FileNameCell
-	},
+									file={row.original.doc}
-	{
+									onOpenFile={onOpenFile}
-		header: "Size",
+								/>
-		accessorKey: "size",
+							)
-		cell: ({ row }) => {
+						case FileType.Directory:
-			switch (row.original.kind) {
+							return (
-				case FileType.File:
+								<DirectoryNameCell
-					return <div>{formatFileSize(row.original.doc.size)}</div>
+									directory={row.original.doc}
-				case FileType.Directory:
+								/>
-					return <div className="font-mono">-</div>
+							)
-			}
+					}
-		},
+				},
-	},
+				size: 1000,
-	{
+			},
-		header: "Created At",
+			{
-		accessorKey: "createdAt",
+				header: "Size",
-		cell: ({ row }) => {
+				accessorKey: "size",
-			return (
+				cell: ({ row }) => {
-				<div>
+					switch (row.original.kind) {
-					{new Date(row.original.doc.createdAt).toLocaleString()}
+						case FileType.File:
-				</div>
+							return (
-			)
+								<div>
-		},
+									{formatFileSize(row.original.doc.size)}
-	},
+								</div>
-]
+							)
-
+						case FileType.Directory:
-export function DirectoryContentTable() {
+							return <div className="font-mono">-</div>
-	return (
+					}
-		<DirectoryContentContextMenu>
+				},
-			<div className="w-full">
+			},
-				<DirectoryContentTableContent />
+			{
-			</div>
+				header: "Created At",
-		</DirectoryContentContextMenu>
+				accessorKey: "createdAt",
+				cell: ({ row }) => {
+					return (
+						<div>
+							{new Date(
+								row.original.doc.createdAt,
+							).toLocaleString()}
+						</div>
+					)
+				},
+			},
+		],
+		[onOpenFile],
 	)
 }
 
-export function DirectoryContentTableContent() {
+export function DirectoryContentTable(props: DirectoryContentTableProps) {
+	return (
+		<div className="w-full">
+			<DirectoryContentTableContent {...props} />
+		</div>
+	)
+}
+
+export function DirectoryContentTableContent({
+	filterFn,
+	onContextMenu,
+	fileDragInfoAtom,
+	onOpenFile,
+}: DirectoryContentTableProps) {
 	const { directoryContent } = useContext(DirectoryPageContext)
-	const optimisticDeletedItems = useAtomValue(optimisticDeletedItemsAtom)
-	const setContextMenuTargetItem = useSetAtom(contextMenuTargeItemsAtom)
 	const store = useStore()
 	const navigate = useNavigate()
 
 	const table = useReactTable({
 		data: directoryContent || [],
-		columns,
+		columns: useTableColumns(onOpenFile),
 		getCoreRowModel: getCoreRowModel(),
 		enableRowSelection: true,
 		enableGlobalFilter: true,
-		globalFilterFn: (row, _columnId, _filterValue, _addMeta) => {
+		globalFilterFn: (row, _columnId, _filterValue, _addMeta) =>
-			return !optimisticDeletedItems.has(row.original.doc._id)
+			filterFn(row.original),
-		},
 		getRowId: (row) => row.doc._id,
 	})
 
@@ -169,14 +192,14 @@ export function DirectoryContentTableContent() {
 	) => {
 		const target = store.get(contextMenuTargeItemsAtom)
 		if (target.length > 0) {
-			setContextMenuTargetItem([])
+			onContextMenu(target)
 		} else if (row.getIsSelected()) {
-			setContextMenuTargetItem(
+			onContextMenu(
 				table.getSelectedRowModel().rows.map((row) => row.original),
 			)
 		} else {
 			selectRow(row)
-			setContextMenuTargetItem([row.original])
+			onContextMenu([row.original])
 		}
 	}
 
@@ -241,6 +264,7 @@ export function DirectoryContentTableContent() {
 								table={table}
 								row={row}
 								onClick={() => selectRow(row)}
+								fileDragInfoAtom={fileDragInfoAtom}
 								onContextMenu={(e) =>
 									handleRowContextMenu(row, e)
 								}
@@ -261,7 +285,7 @@ export function DirectoryContentTableContent() {
 function NoResultsRow() {
 	return (
 		<TableRow>
-			<TableCell colSpan={columns.length} className="text-center">
+			<TableCell colSpan={4} className="text-center">
 				No results.
 			</TableCell>
 		</TableRow>
@@ -274,22 +298,24 @@ function FileItemRow({
 	onClick,
 	onContextMenu,
 	onDoubleClick,
+	fileDragInfoAtom,
 }: {
 	table: TableType<FileSystemItem>
 	row: Row<FileSystemItem>
 	onClick: () => void
 	onContextMenu: (e: React.MouseEvent) => void
 	onDoubleClick: () => void
+	fileDragInfoAtom: PrimitiveAtom<FileDragInfo | null>
 }) {
 	const ref = useRef<HTMLTableRowElement>(null)
-	const setDragInfo = useSetAtom(dragInfoAtom)
+	const setFileDragInfo = useSetAtom(fileDragInfoAtom)
 
 	const { isDraggedOver, dropHandlers } = useFileDrop({
 		destItem:
 			row.original.kind === FileType.Directory
 				? newDirectoryHandle(row.original.doc._id)
 				: null,
-		dragInfoAtom,
+		dragInfoAtom: fileDragInfoAtom,
 	})
 
 	const handleDragStart = (_e: React.DragEvent) => {
@@ -316,14 +342,14 @@ function FileItemRow({
 			draggedItems = [source]
 		}
 
-		setDragInfo({
+		setFileDragInfo({
 			source,
 			items: draggedItems,
 		})
 	}
 
 	const handleDragEnd = () => {
-		setDragInfo(null)
+		setFileDragInfo(null)
 	}
 
 	return (
@@ -367,9 +393,13 @@ function DirectoryNameCell({ directory }: { directory: Doc<"directories"> }) {
 	)
 }
 
-function FileNameCell({ file }: { file: Doc<"files"> }) {
+function FileNameCell({
-	const setOpenedFile = useSetAtom(openedFileAtom)
+	file,
-
+	onOpenFile,
+}: {
+	file: Doc<"files">
+	onOpenFile: (file: Doc<"files">) => void
+}) {
 	return (
 		<div className="flex w-full items-center gap-2">
 			<TextFileIcon className="size-4" />
@@ -377,7 +407,7 @@ function FileNameCell({ file }: { file: Doc<"files"> }) {
 				type="button"
 				className="hover:underline cursor-pointer"
 				onClick={() => {
-					setOpenedFile(file)
+					onOpenFile(file)
 				}}
 			>
 				{file.name}

packages/web/src/directories/directory-page/directory-page.tsx

@@ -1,35 +0,0 @@
-import { useAtom } from "jotai"
-import { ImagePreviewDialog } from "@/components/image-preview-dialog"
-import { DirectoryContentTable } from "./directory-content-table"
-import { openedFileAtom } from "./state"
-
-export function DirectoryPage() {
-	return (
-		<>
-			<div className="w-full">
-				<DirectoryContentTable />
-			</div>
-			<PreviewDialog />
-		</>
-	)
-}
-
-function PreviewDialog() {
-	const [openedFile, setOpenedFile] = useAtom(openedFileAtom)
-
-	if (!openedFile) return null
-
-	switch (openedFile.mimeType) {
-		case "image/jpeg":
-		case "image/png":
-		case "image/gif":
-			return (
-				<ImagePreviewDialog
-					file={openedFile}
-					onClose={() => setOpenedFile(null)}
-				/>
-			)
-		default:
-			return null
-	}
-}

packages/web/src/files/file-preview-dialog.tsx

@@ -0,0 +1,21 @@
+import type { Doc } from "@fileone/convex/_generated/dataModel"
+import { ImagePreviewDialog } from "./image-preview-dialog"
+
+export function FilePreviewDialog({
+	file,
+	onClose,
+}: {
+	file: Doc<"files">
+	onClose: () => void
+}) {
+	if (!file) return null
+
+	switch (file.mimeType) {
+		case "image/jpeg":
+		case "image/png":
+		case "image/gif":
+			return <ImagePreviewDialog file={file} onClose={onClose} />
+		default:
+			return null
+	}
+}

packages/web/src/files/image-preview-dialog.tsx

@@ -12,15 +12,15 @@ import {
 	ZoomOutIcon,
 } from "lucide-react"
 import { useEffect, useRef } from "react"
-import { Button } from "./ui/button"
+import { Button } from "@/components/ui/button"
 import {
 	Dialog,
 	DialogClose,
 	DialogContent,
 	DialogHeader,
 	DialogOverlay,
-} from "./ui/dialog"
+} from "@/components/ui/dialog"
-import { LoadingSpinner } from "./ui/loading-spinner"
+import { LoadingSpinner } from "@/components/ui/loading-spinner"
 
 const zoomLevelAtom = atom(
 	1,

packages/web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx

@@ -1,23 +1,37 @@
 import { api } from "@fileone/convex/_generated/api"
-import { FileType } from "@fileone/convex/model/filesystem"
+import type { Doc, Id } from "@fileone/convex/_generated/dataModel"
+import {
+	type FileSystemItem,
+	FileType,
+	newFileSystemHandle,
+} from "@fileone/convex/model/filesystem"
 import { useMutation } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
 import {
+	useMutation as useContextMutation,
 	useMutation as useConvexMutation,
 	useQuery as useConvexQuery,
 } from "convex/react"
-import { atom, useAtom } from "jotai"
+import { atom, useAtom, useAtomValue, useSetAtom, useStore } from "jotai"
 import {
 	ChevronDownIcon,
 	Loader2Icon,
 	PlusIcon,
+	TextCursorInputIcon,
+	TrashIcon,
 	UploadCloudIcon,
 } from "lucide-react"
-import { type ChangeEvent, useContext, useRef } from "react"
+import { type ChangeEvent, useCallback, useContext, useRef } from "react"
 import { toast } from "sonner"
 import { DirectoryIcon } from "@/components/icons/directory-icon"
 import { TextFileIcon } from "@/components/icons/text-file-icon"
 import { Button } from "@/components/ui/button"
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
+} from "@/components/ui/context-menu"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -26,11 +40,13 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { WithAtom } from "@/components/with-atom"
 import { DirectoryPageContext } from "@/directories/directory-page/context"
-import { DirectoryPage } from "@/directories/directory-page/directory-page"
+import { DirectoryContentTable } from "@/directories/directory-page/directory-content-table"
 import { DirectoryPageSkeleton } from "@/directories/directory-page/directory-page-skeleton"
 import { FilePathBreadcrumb } from "@/directories/directory-page/file-path-breadcrumb"
 import { NewDirectoryDialog } from "@/directories/directory-page/new-directory-dialog"
 import { RenameFileDialog } from "@/directories/directory-page/rename-file-dialog"
+import { FilePreviewDialog } from "@/files/file-preview-dialog"
+import type { FileDragInfo } from "@/files/use-file-drop"
 
 export const Route = createFileRoute(
 	"/_authenticated/_sidebar-layout/directories/$directoryId",
@@ -38,14 +54,27 @@ export const Route = createFileRoute(
 	component: RouteComponent,
 })
 
+// MARK: atoms
+const contextMenuTargetItemsAtom = atom<FileSystemItem[]>([])
 const newFileTypeAtom = atom<FileType | null>(null)
+const fileDragInfoAtom = atom<FileDragInfo | null>(null)
+const optimisticDeletedItemsAtom = atom(
+	new Set<Id<"files"> | Id<"directories">>(),
+)
+const openedFileAtom = atom<Doc<"files"> | null>(null)
+const itemBeingRenamedAtom = atom<{
+	originalItem: FileSystemItem
+	name: string
+} | null>(null)
 
+// MARK: page entry
 function RouteComponent() {
 	const { directoryId } = Route.useParams()
 	const rootDirectory = useConvexQuery(api.files.fetchRootDirectory)
 	const directory = useConvexQuery(api.files.fetchDirectory, {
 		directoryId,
 	})
+	const store = useStore()
 	const directoryContent = useConvexQuery(
 		api.filesystem.fetchDirectoryContent,
 		{
@@ -53,6 +82,21 @@ function RouteComponent() {
 			trashed: false,
 		},
 	)
+	const setOpenedFile = useSetAtom(openedFileAtom)
+	const setContextMenuTargetItems = useSetAtom(contextMenuTargetItemsAtom)
+
+	const tableFilter = useCallback(
+		(item: FileSystemItem) =>
+			store.get(optimisticDeletedItemsAtom).has(item.doc._id),
+		[store],
+	)
+
+	const openFile = useCallback(
+		(file: Doc<"files">) => {
+			setOpenedFile(file)
+		},
+		[setOpenedFile],
+	)
 
 	if (!directory || !directoryContent || !rootDirectory) {
 		return <DirectoryPageSkeleton />
@@ -70,7 +114,16 @@ function RouteComponent() {
 				</div>
 			</header>
 
-			<DirectoryPage />
+			<div className="w-full">
+				<DirectoryContentContextMenu>
+					<DirectoryContentTable
+						filterFn={tableFilter}
+						fileDragInfoAtom={fileDragInfoAtom}
+						onContextMenu={setContextMenuTargetItems}
+						onOpenFile={openFile}
+					/>
+				</DirectoryContentContextMenu>
+			</div>
 
 			<WithAtom atom={newFileTypeAtom}>
 				{(newFileType, setNewFileType) => (
@@ -87,10 +140,125 @@ function RouteComponent() {
 			</WithAtom>
 
 			<RenameFileDialog />
+
+			<WithAtom atom={openedFileAtom}>
+				{(openedFile, setOpenedFile) => {
+					if (!openedFile) return null
+					return (
+						<FilePreviewDialog
+							file={openedFile}
+							onClose={() => setOpenedFile(null)}
+						/>
+					)
+				}}
+			</WithAtom>
 		</DirectoryPageContext>
 	)
 }
 
+// ==================================
+// MARK: DirectoryContentContextMenu
+
+function DirectoryContentContextMenu({
+	children,
+}: {
+	children: React.ReactNode
+}) {
+	const store = useStore()
+	const [target, setTarget] = useAtom(contextMenuTargetItemsAtom)
+	const setOptimisticDeletedItems = useSetAtom(optimisticDeletedItemsAtom)
+	const moveToTrashMutation = useContextMutation(api.filesystem.moveToTrash)
+	const { mutate: moveToTrash } = useMutation({
+		mutationFn: moveToTrashMutation,
+		onMutate: ({ handles }) => {
+			setOptimisticDeletedItems(
+				(prev) =>
+					new Set([...prev, ...handles.map((handle) => handle.id)]),
+			)
+		},
+		onSuccess: ({ deleted, errors }, { handles }) => {
+			setOptimisticDeletedItems((prev) => {
+				const newSet = new Set(prev)
+				for (const handle of handles) {
+					newSet.delete(handle.id)
+				}
+				return newSet
+			})
+			if (errors.length === 0 && deleted.length === handles.length) {
+				toast.success(`Moved ${handles.length} items to trash`)
+			} else if (errors.length === handles.length) {
+				toast.error("Failed to move to trash")
+			} else {
+				toast.info(
+					`Moved ${deleted.length} items to trash; failed to move ${errors.length} items`,
+				)
+			}
+		},
+	})
+
+	const handleDelete = () => {
+		const selectedItems = store.get(contextMenuTargetItemsAtom)
+		if (selectedItems.length > 0) {
+			moveToTrash({
+				handles: selectedItems.map(newFileSystemHandle),
+			})
+		}
+	}
+
+	return (
+		<ContextMenu
+			onOpenChange={(open) => {
+				if (!open) {
+					setTarget([])
+				}
+			}}
+		>
+			<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+			{target && (
+				<ContextMenuContent>
+					<RenameMenuItem />
+					<ContextMenuItem onClick={handleDelete}>
+						<TrashIcon />
+						Move to trash
+					</ContextMenuItem>
+				</ContextMenuContent>
+			)}
+		</ContextMenu>
+	)
+}
+
+function RenameMenuItem() {
+	const store = useStore()
+	const target = useAtomValue(contextMenuTargetItemsAtom)
+	const setItemBeingRenamed = useSetAtom(itemBeingRenamedAtom)
+
+	const handleRename = () => {
+		const selectedItems = store.get(contextMenuTargetItemsAtom)
+		if (selectedItems.length === 1) {
+			// biome-ignore lint/style/noNonNullAssertion: length is checked
+			const selectedItem = selectedItems[0]!
+			setItemBeingRenamed({
+				originalItem: selectedItem,
+				name: selectedItem.doc.name,
+			})
+		}
+	}
+
+	// Only render if exactly one item is selected
+	if (target.length !== 1) {
+		return null
+	}
+
+	return (
+		<ContextMenuItem onClick={handleRename}>
+			<TextCursorInputIcon />
+			Rename
+		</ContextMenuItem>
+	)
+}
+
+// ==================================
+
 // tags: upload, uploadfile, uploadfilebutton, fileupload, fileuploadbutton
 function UploadFileButton() {
 	const { directory } = useContext(DirectoryPageContext)

packages/web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx

@@ -4,7 +4,6 @@ import { useQuery as useConvexQuery } from "convex/react"
 import { TrashIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { DirectoryPageContext } from "@/directories/directory-page/context"
-import { DirectoryPage } from "@/directories/directory-page/directory-page"
 import { DirectoryPageSkeleton } from "@/directories/directory-page/directory-page-skeleton"
 import { FilePathBreadcrumb } from "@/directories/directory-page/file-path-breadcrumb"
 
@@ -43,7 +42,7 @@ function RouteComponent() {
 				</div>
 			</header>
 
-			<DirectoryPage />
+			{/* <DirectoryPage /> */}
 		</DirectoryPageContext>
 	)
 }