feat: impl file rename

packages/web/src/files/file-table.tsx

@@ -38,6 +38,7 @@ import { withDefaultOnError } from "../lib/error"
 import { cn } from "../lib/utils"
 import {
 	contextMenuTargeItemAtom,
+	itemBeingRenamedAtom,
 	newItemKindAtom,
 	optimisticDeletedItemsAtom,
 } from "./state"
@@ -132,6 +133,7 @@ export function FileTableContextMenu({
 	const target = useAtomValue(contextMenuTargeItemAtom)
 	const setOptimisticDeletedItems = useSetAtom(optimisticDeletedItemsAtom)
 	const moveToTrashMutation = useContextMutation(api.files.moveToTrash)
+	const setItemBeingRenamed = useSetAtom(itemBeingRenamedAtom)
 	const { mutate: moveToTrash } = useMutation({
 		mutationFn: moveToTrashMutation,
 		onMutate: ({ itemId }) => {
@@ -150,8 +152,11 @@ export function FileTableContextMenu({
 	const handleRename = () => {
 		const selectedItem = store.get(contextMenuTargeItemAtom)
 		if (selectedItem) {
-			console.log("Renaming:", selectedItem.doc.name)
-			// TODO: Implement rename functionality
+			setItemBeingRenamed({
+				kind: selectedItem.kind,
+				originalItem: selectedItem,
+				name: selectedItem.doc.name,
+			})
 		}
 	}
 
@@ -169,7 +174,7 @@ export function FileTableContextMenu({
 		<ContextMenu>
 			<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
 			{target && (
-				<ContextMenuContent key={target?.doc._id}>
+				<ContextMenuContent>
 					<ContextMenuItem onClick={handleRename}>
 						<TextCursorInputIcon />
 						Rename

packages/web/src/files/files-page.tsx

@@ -30,6 +30,7 @@ import {
 } from "../components/ui/breadcrumb"
 import { Button } from "../components/ui/button"
 import { FileTable } from "./file-table"
+import { RenameFileDialog } from "./rename-file-dialog"
 import { newItemKindAtom } from "./state"
 
 export function FilesPage({ path }: { path: string }) {
@@ -45,6 +46,7 @@ export function FilesPage({ path }: { path: string }) {
 			<div className="w-full">
 				<FileTable path={path} />
 			</div>
+			<RenameFileDialog />
 		</>
 	)
 }

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

@@ -0,0 +1,111 @@
+import { api } from "@fileone/convex/_generated/api"
+import { useMutation } from "@tanstack/react-query"
+import { useMutation as useContextMutation } from "convex/react"
+import { atom, useAtom, useStore } from "jotai"
+import { useId } from "react"
+import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { itemBeingRenamedAtom } from "./state"
+
+const fielNameAtom = atom(
+	(get) => get(itemBeingRenamedAtom)?.name,
+	(get, set, newName: string) => {
+		const current = get(itemBeingRenamedAtom)
+		if (current) {
+			set(itemBeingRenamedAtom, {
+				...current,
+				name: newName,
+			})
+		}
+	},
+)
+
+export function RenameFileDialog() {
+	const [itemBeingRenamed, setItemBeingRenamed] =
+		useAtom(itemBeingRenamedAtom)
+	const store = useStore()
+	const formId = useId()
+
+	const { mutate: renameFile, isPending: isRenaming } = useMutation({
+		mutationFn: useContextMutation(api.files.renameFile),
+		onSuccess: () => {
+			setItemBeingRenamed(null)
+			toast.success("File renamed successfully")
+		},
+	})
+
+	const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault()
+
+		const itemBeingRenamed = store.get(itemBeingRenamedAtom)
+		if (itemBeingRenamed) {
+			const formData = new FormData(event.currentTarget)
+			const newName = formData.get("itemName") as string
+
+			if (newName) {
+				switch (itemBeingRenamed.originalItem.kind) {
+					case "file":
+						renameFile({
+							directoryId:
+								itemBeingRenamed.originalItem.doc.directoryId,
+							itemId: itemBeingRenamed.originalItem.doc._id,
+							newName,
+						})
+						break
+					default:
+						break
+				}
+			}
+		}
+	}
+
+	return (
+		<Dialog
+			open={itemBeingRenamed !== null}
+			onOpenChange={(open) =>
+				setItemBeingRenamed(open ? itemBeingRenamed : null)
+			}
+		>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader>
+					<DialogTitle>Rename File</DialogTitle>
+				</DialogHeader>
+
+				<form id={formId} onSubmit={onSubmit}>
+					<RenameFileInput />
+				</form>
+
+				<DialogFooter>
+					<DialogClose asChild>
+						<Button loading={isRenaming} variant="outline">
+							<span>Cancel</span>
+						</Button>
+					</DialogClose>
+					<Button loading={isRenaming} type="submit" form={formId}>
+						<span>Rename</span>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	)
+}
+
+function RenameFileInput() {
+	const [fileName, setFileName] = useAtom(fielNameAtom)
+	return (
+		<Input
+			value={fileName}
+			name="itemName"
+			onChange={(e) => setFileName(e.target.value)}
+		/>
+	)
+}

packages/web/src/files/state.ts

@@ -14,3 +14,9 @@ export const optimisticDeletedItemsAtom = atom(
 export const selectedFileRowsAtom = atom<RowSelectionState>({})
 
 export const newItemKindAtom = atom<DirectoryItemKind | null>(null)
+
+export const itemBeingRenamedAtom = atom<{
+	kind: DirectoryItemKind
+	originalItem: DirectoryItem
+	name: string
+} | null>(null)