feat: impl file rename

packages/web/src/components/ui/button.tsx

@@ -1,59 +1,72 @@
-import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils"
+import { LoadingSpinner } from "./loading-spinner"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
 )
 
 function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
+	className,
+	variant,
+	size,
+	asChild = false,
+	loading = false,
+	children,
+	...props
 }: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
+	VariantProps<typeof buttonVariants> & {
+		loading?: boolean
+		asChild?: boolean
+	}) {
+	const Comp = asChild ? Slot : "button"
 
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			disabled={loading || props.disabled}
+			{...props}
+		>
+			{asChild ? (
+				children
+			) : (
+				<>
+					{loading ? <LoadingSpinner /> : null}
+					{children}
+				</>
+			)}
+		</Comp>
+	)
 }
 
 export { Button, buttonVariants }

packages/web/src/components/ui/context-menu.tsx

@@ -106,7 +106,7 @@ function ContextMenuContent({
 			<ContextMenuPrimitive.Content
 				data-slot="context-menu-content"
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					"bg-popover text-popover-foreground data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
 					className,
 				)}
 				{...props}

packages/web/src/components/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

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)