feat: basic file drag and drop

bun.lock

@@ -50,6 +50,7 @@
         "convex-helpers": "^0.1.104",
         "jotai": "^2.14.0",
         "lucide-react": "^0.544.0",
+        "motion": "^12.23.16",
         "next-themes": "^0.4.6",
         "react": "^19",
         "react-dom": "^19",
@@ -524,6 +525,8 @@
 
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
+    "framer-motion": ["framer-motion@12.23.16", "", { "dependencies": { "motion-dom": "^12.23.12", "motion-utils": "^12.23.6", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-N81A8hiHqVsexOzI3wzkibyLURW1nEJsZaRuctPhG4AdbbciYu+bKJq9I2lQFzAO4Bx3h4swI6pBbF/Hu7f7BA=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
@@ -572,6 +575,12 @@
 
     "magic-string": ["magic-string@0.30.19", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw=="],
 
+    "motion": ["motion@12.23.16", "", { "dependencies": { "framer-motion": "^12.23.16", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-8vVuxZgcfGZm4kgSqFgGrhQ+6034y4UuEsqCX8s7UYeoQ+NO3R9LV5AyDlVr2Mb7xvS7ZM5s/XkTurWbWQ+UHA=="],
+
+    "motion-dom": ["motion-dom@12.23.12", "", { "dependencies": { "motion-utils": "^12.23.6" } }, "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw=="],
+
+    "motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="],
+
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],

packages/convex/files.ts

@@ -3,6 +3,7 @@ import { v } from "convex/values"
 import { authenticatedMutation, authenticatedQuery } from "./functions"
 import type { DirectoryItem } from "./model/directories"
 import * as Directories from "./model/directories"
+import * as Err from "./model/error"
 import * as Files from "./model/files"
 
 export const generateUploadUrl = authenticatedMutation({
@@ -141,3 +142,13 @@ export const moveToTrash = authenticatedMutation({
 		return itemId
 	},
 })
+
+export const moveFiles = authenticatedMutation({
+	args: {
+		targetDirectoryId: v.id("directories"),
+		items: v.array(v.id("files")),
+	},
+	handler: async (ctx, { targetDirectoryId, items }) => {
+		return await Files.moveFiles(ctx, { targetDirectoryId, items })
+	},
+})

packages/convex/model/files.ts

@@ -34,3 +34,28 @@ export async function renameFile(
 
 	await ctx.db.patch(itemId, { name: newName })
 }
+
+export async function moveFiles(
+	ctx: AuthenticatedMutationCtx,
+	{
+		targetDirectoryId,
+		items,
+	}: {
+		targetDirectoryId: Id<"directories">
+		items: Id<"files">[]
+	},
+) {
+	const targetDirectory = await ctx.db.get(targetDirectoryId)
+	if (!targetDirectory) {
+		throw Err.create(
+			Err.Code.DirectoryNotFound,
+			"Target directory not found",
+		)
+	}
+	await Promise.all(
+		items.map((itemId) =>
+			ctx.db.patch(itemId, { directoryId: targetDirectoryId }),
+		),
+	)
+	return { items, targetDirectory }
+}

packages/web/package.json

@@ -30,6 +30,7 @@
 		"convex-helpers": "^0.1.104",
 		"jotai": "^2.14.0",
 		"lucide-react": "^0.544.0",
+		"motion": "^12.23.16",
 		"next-themes": "^0.4.6",
 		"react": "^19",
 		"react-dom": "^19",

packages/web/src/components/icons/text-file-icon.tsx

@@ -1,6 +1,10 @@
+import type React from "react"
 import { cn } from "@/lib/utils"
 
-export function TextFileIcon({ className }: { className?: string }) {
+export function TextFileIcon({
+	className,
+	...props
+}: React.ComponentProps<"svg">) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -12,6 +16,7 @@ export function TextFileIcon({ className }: { className?: string }) {
 				"icon icon-tabler icons-tabler-filled icon-tabler-file-text text-blue-300",
 				className,
 			)}
+			{...props}
 		>
 			<title>Text File</title>
 			<path stroke="none" d="M0 0h24v24H0z" fill="none" />

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

@@ -1,5 +1,5 @@
 import { api } from "@fileone/convex/_generated/api"
-import type { Doc } from "@fileone/convex/_generated/dataModel"
+import type { Doc, Id } from "@fileone/convex/_generated/dataModel"
 import type { DirectoryItem } from "@fileone/convex/model/directories"
 import { useMutation } from "@tanstack/react-query"
 import { Link } from "@tanstack/react-router"
@@ -13,7 +13,7 @@ import {
 import { useMutation as useContextMutation } from "convex/react"
 import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai"
 import { CheckIcon, TextCursorInputIcon, TrashIcon, XIcon } from "lucide-react"
-import { useContext, useEffect, useId, useRef } from "react"
+import { useContext, useEffect, useId, useRef, useState } from "react"
 import { toast } from "sonner"
 import { DirectoryIcon } from "@/components/icons/directory-icon"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -39,6 +39,7 @@ import { cn } from "../../lib/utils"
 import { DirectoryPageContext } from "./context"
 import {
 	contextMenuTargeItemAtom,
+	dragInfoAtom,
 	itemBeingRenamedAtom,
 	newItemKindAtom,
 	openedFileAtom,
@@ -255,30 +256,17 @@ export function DirectoryContentTableContent() {
 				</TableHeader>
 				<TableBody>
 					{table.getRowModel().rows?.length ? (
-						table.getRowModel().rows.map((row) => (
+						table
-							<TableRow
+							.getRowModel()
+							.rows.map((row) => (
+								<FileItemRow
 									key={row.id}
-								data-state={row.getIsSelected() && "selected"}
+									row={row}
-								onClick={() => {
+									onClick={() => selectRow(row)}
-									selectRow(row)
+									onContextMenu={(e) =>
-								}}
-								onContextMenu={(e) => {
 										handleRowContextMenu(row, e)
-								}}
+									}
-							>
+								/>
-								{row.getVisibleCells().map((cell) => (
-									<TableCell
-										className="first:pl-4 last:pr-4"
-										key={cell.id}
-										style={{ width: cell.column.getSize() }}
-									>
-										{flexRender(
-											cell.column.columnDef.cell,
-											cell.getContext(),
-										)}
-									</TableCell>
-								))}
-							</TableRow>
 							))
 					) : (
 						<NoResultsRow />
@@ -400,6 +388,110 @@ function NewItemRow() {
 	)
 }
 
+function FileItemRow({
+	row,
+	onClick,
+	onContextMenu,
+}: {
+	row: Row<DirectoryItem>
+	onClick: () => void
+	onContextMenu: (e: React.MouseEvent) => void
+}) {
+	const [isDraggedOver, setIsDraggedOver] = useState(false)
+	const ref = useRef<HTMLTableRowElement>(null)
+	const setDragInfo = useSetAtom(dragInfoAtom)
+	const store = useStore()
+
+	const { mutate: moveFiles } = useMutation({
+		mutationFn: useContextMutation(api.files.moveFiles),
+		onSuccess: ({
+			items,
+			targetDirectory,
+		}: {
+			items: Id<"files">[]
+			targetDirectory: Doc<"directories">
+		}) => {
+			toast.success(
+				`${items.length} files moved to ${targetDirectory.name}`,
+			)
+		},
+	})
+
+	function onDragStart(e: React.DragEvent<HTMLTableRowElement>) {
+		if (row.original.kind === "file") {
+			e.dataTransfer.setData(
+				"application/x-internal",
+				JSON.stringify(row.original),
+			)
+			setDragInfo({
+				source: row.original,
+				items: [row.original.doc._id],
+			})
+		}
+	}
+
+	function onDrop(_e: React.DragEvent<HTMLTableRowElement>) {
+		const dragInfo = store.get(dragInfoAtom)
+		if (dragInfo && row.original.kind === "directory") {
+			moveFiles({
+				targetDirectoryId: row.original.doc._id,
+				items: dragInfo.items,
+			})
+		}
+	}
+
+	function onDragOver(e: React.DragEvent<HTMLTableRowElement>) {
+		const dragInfo = store.get(dragInfoAtom)
+		if (
+			dragInfo &&
+			dragInfo.source !== row.original &&
+			row.original.kind === "directory"
+		) {
+			e.preventDefault()
+			e.dataTransfer.dropEffect = "move"
+			setIsDraggedOver(true)
+		} else {
+			e.dataTransfer.dropEffect = "none"
+		}
+	}
+
+	function onDragLeave() {
+		setIsDraggedOver(false)
+	}
+
+	function onDragEnd() {
+		setIsDraggedOver(false)
+		setDragInfo(null)
+	}
+
+	return (
+		<TableRow
+			draggable
+			ref={ref}
+			key={row.id}
+			data-state={row.getIsSelected() && "selected"}
+			onClick={onClick}
+			onContextMenu={onContextMenu}
+			onDragStart={onDragStart}
+			onDrop={onDrop}
+			onDragOver={onDragOver}
+			onDragLeave={onDragLeave}
+			onDragEnd={onDragEnd}
+			className={cn({ "bg-muted": isDraggedOver })}
+		>
+			{row.getVisibleCells().map((cell) => (
+				<TableCell
+					className="first:pl-4 last:pr-4"
+					key={cell.id}
+					style={{ width: cell.column.getSize() }}
+				>
+					{flexRender(cell.column.columnDef.cell, cell.getContext())}
+				</TableCell>
+			))}
+		</TableRow>
+	)
+}
+
 function DirectoryNameCell({ directory }: { directory: Doc<"directories"> }) {
 	return (
 		<div className="flex w-full items-center gap-2">
@@ -416,6 +508,7 @@ function DirectoryNameCell({ directory }: { directory: Doc<"directories"> }) {
 
 function FileNameCell({ file }: { file: Doc<"files"> }) {
 	const setOpenedFile = useSetAtom(openedFileAtom)
+
 	return (
 		<div className="flex w-full items-center gap-2">
 			<TextFileIcon className="size-4" />

packages/web/src/directories/directory-page/state.ts

@@ -22,3 +22,8 @@ export const itemBeingRenamedAtom = atom<{
 } | null>(null)
 
 export const openedFileAtom = atom<Doc<"files"> | null>(null)
+
+export const dragInfoAtom = atom<{
+	source: DirectoryItem
+	items: Id<"files">[]
+} | null>(null)