fix: file/dir drag and drop

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

@@ -3,6 +3,7 @@ import type { Doc } from "@fileone/convex/_generated/dataModel"
 import type { DirectoryItem } from "@fileone/convex/model/directories"
 import {
 	type FileSystemHandle,
+	isSameHandle,
 	newDirectoryHandle,
 	newFileHandle,
 } from "@fileone/convex/model/filesystem"
@@ -458,7 +459,7 @@ function FileItemRow({
 	const setDragInfo = useSetAtom(dragInfoAtom)
 
 	const { isDraggedOver, dropHandlers } = useFileDrop({
-		item:
+		destItem:
 			row.original.kind === "directory"
 				? newDirectoryHandle(row.original.doc._id)
 				: null,
@@ -476,16 +477,24 @@ function FileItemRow({
 				break
 		}
 
-		// biome-ignore lint/suspicious/useIterableCallbackReturn: the switch statement is exhaustive
-		const draggedItems = table.getSelectedRowModel().rows.map((row) => {
-			switch (row.original.kind) {
-				case "file":
-					return newFileHandle(row.original.doc._id)
-				case "directory":
-					return newDirectoryHandle(row.original.doc._id)
+		let draggedItems: FileSystemHandle[]
+		// drag all selections, but only if the currently dragged row is also selected
+		if (row.getIsSelected()) {
+			// biome-ignore lint/suspicious/useIterableCallbackReturn: the switch statement is exhaustive
+			draggedItems = table.getSelectedRowModel().rows.map((row) => {
+				switch (row.original.kind) {
+					case "file":
+						return newFileHandle(row.original.doc._id)
+					case "directory":
+						return newDirectoryHandle(row.original.doc._id)
+				}
+			})
+			if (!draggedItems.some((item) => isSameHandle(item, source))) {
+				draggedItems.push(source)
 			}
-		})
-		draggedItems.push(source)
+		} else {
+			draggedItems = [source]
+		}
 
 		setDragInfo({
 			source,

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

@@ -99,7 +99,7 @@ function FilePathBreadcrumb() {
 
 function FilePathBreadcrumbItem({ component }: { component: PathComponent }) {
 	const { isDraggedOver, dropHandlers } = useFileDrop({
-		item: component.handle as DirectoryHandle,
+		destItem: component.handle as DirectoryHandle,
 		dragInfoAtom,
 	})
 

packages/web/src/files/use-file-drop.ts

@@ -1,14 +1,15 @@
 import { api } from "@fileone/convex/_generated/api"
 import type { Doc, Id } from "@fileone/convex/_generated/dataModel"
 import * as Err from "@fileone/convex/model/error"
-import type {
-	DirectoryHandle,
-	FileSystemHandle,
+import {
+	type DirectoryHandle,
+	type FileSystemHandle,
+	isSameHandle,
 } from "@fileone/convex/model/filesystem"
 import { useMutation } from "@tanstack/react-query"
 import { useMutation as useContextMutation } from "convex/react"
-import type { Atom } from "jotai"
-import { useStore } from "jotai"
+import type { PrimitiveAtom } from "jotai"
+import { useSetAtom, useStore } from "jotai"
 import { useState } from "react"
 import { toast } from "sonner"
 
@@ -18,8 +19,8 @@ export interface FileDragInfo {
 }
 
 export interface UseFileDropOptions {
-	item: DirectoryHandle | null
-	dragInfoAtom: Atom<FileDragInfo | null>
+	destItem: DirectoryHandle | null
+	dragInfoAtom: PrimitiveAtom<FileDragInfo | null>
 	onDropSuccess?: (
 		items: Id<"files">[],
 		targetDirectory: Doc<"directories">,
@@ -36,10 +37,11 @@ export interface UseFileDropReturn {
 }
 
 export function useFileDrop({
-	item,
+	destItem,
 	dragInfoAtom,
 }: UseFileDropOptions): UseFileDropReturn {
 	const [isDraggedOver, setIsDraggedOver] = useState(false)
+	const setDragInfo = useSetAtom(dragInfoAtom)
 	const store = useStore()
 
 	const { mutate: moveDroppedItems } = useMutation({
@@ -69,19 +71,25 @@ export function useFileDrop({
 
 	const handleDrop = (_e: React.DragEvent) => {
 		const dragInfo = store.get(dragInfoAtom)
-		console.log("dragInfo", dragInfo)
-		if (dragInfo && item) {
-			moveDroppedItems({
-				targetDirectory: item,
-				items: dragInfo.items,
-			})
+		console.log("handleDrop", { dragInfo, destItem })
+		if (dragInfo && destItem) {
+			const items = dragInfo.items.filter(
+				(item) => !isSameHandle(item, destItem),
+			)
+			if (items.length > 0) {
+				moveDroppedItems({
+					targetDirectory: destItem,
+					items,
+				})
+			}
 		}
 		setIsDraggedOver(false)
+		setDragInfo(null)
 	}
 
 	const handleDragOver = (e: React.DragEvent) => {
 		const dragInfo = store.get(dragInfoAtom)
-		if (dragInfo && item) {
+		if (dragInfo && destItem) {
 			e.preventDefault()
 			e.dataTransfer.dropEffect = "move"
 			setIsDraggedOver(true)