refactor: initial frontend wiring for new api

2026-02-02 13:21:17 +00:00 · 2025-12-15 00:13:10 +00:00
parent 528aa943fa
commit 05edf69ca7
63 changed files with 1876 additions and 1991 deletions
--- a/apps/drive-web/.env.sample
+++ b/apps/drive-web/.env.sample
@@ -3,4 +3,5 @@ VITE_CONVEX_URL=
 # this is the convex url for invoking http actions
 VITE_CONVEX_SITE_URL=
 # this is the url to the file proxy
-FILE_PROXY_URL=
+FILE_PROXY_URL=
+API_URL=
--- a/apps/drive-web/package.json
+++ b/apps/drive-web/package.json
@@ -25,6 +25,7 @@
 		"@tanstack/react-router": "^1.131.41",
 		"@tanstack/react-table": "^8.21.3",
 		"@tanstack/router-devtools": "^1.131.42",
+		"arktype": "^2.1.28",
 		"better-auth": "1.3.8",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
--- a/apps/drive-web/src/account/account.ts
+++ b/apps/drive-web/src/account/account.ts
@@ -0,0 +1,14 @@
+import { type } from "arktype"
+import { atom } from "jotai"
+
+export const Account = type({
+	id: "string",
+	userId: "string",
+	createdAt: "string.date.iso.parse",
+	updatedAt: "string.date.iso.parse",
+	storageUsageBytes: "number",
+	storageQuotaBytes: "number",
+})
+export type Account = typeof Account.infer
+
+export const currentAccountAtom = atom<Account | null>(null)
--- a/apps/drive-web/src/account/api.ts
+++ b/apps/drive-web/src/account/api.ts
@@ -0,0 +1,11 @@
+import { queryOptions } from "@tanstack/react-query"
+import { fetchApi } from "@/lib/api"
+import { Account } from "./account"
+
+export const accountsQuery = queryOptions({
+	queryKey: ["accounts"],
+	queryFn: async () =>
+		fetchApi("GET", "/accounts", {
+			returns: Account.array(),
+		}).then(([_, result]) => result),
+})
--- a/apps/drive-web/src/auth/api.ts
+++ b/apps/drive-web/src/auth/api.ts
@@ -0,0 +1,27 @@
+import { mutationOptions } from "@tanstack/react-query"
+import { type } from "arktype"
+import { accountsQuery } from "../account/api"
+import { fetchApi } from "../lib/api"
+import { currentUserQuery } from "../user/api"
+import { User } from "../user/user"
+
+const LoginResponseSchema = type({
+	user: User,
+})
+
+export const loginMutation = mutationOptions({
+	mutationFn: async (data: { email: string; password: string }) => {
+		const [_, result] = await fetchApi("POST", "/auth/login", {
+			body: JSON.stringify({
+				...data,
+				tokenDelivery: "cookie",
+			}),
+			returns: LoginResponseSchema,
+		})
+		return result
+	},
+	onSuccess: (data, _, __, context) => {
+		context.client.setQueryData(currentUserQuery.queryKey, data.user)
+		context.client.invalidateQueries(accountsQuery)
+	},
+})
--- a/apps/drive-web/src/dashboard/dashboard-sidebar.tsx
+++ b/apps/drive-web/src/dashboard/dashboard-sidebar.tsx
@@ -1,12 +1,6 @@
-import { api } from "@fileone/convex/api"
-import { newDirectoryHandle } from "@fileone/convex/filesystem"
-import { useMutation } from "@tanstack/react-query"
+import { useMutation, useQuery } from "@tanstack/react-query"
 import { Link, useLocation, useParams } from "@tanstack/react-router"
-import {
-	useMutation as useConvexMutation,
-	useQuery as useConvexQuery,
-} from "convex/react"
-import { useAtomValue, useSetAtom, useStore } from "jotai"
+import { useAtom, useAtomValue, useSetAtom } from "jotai"
 import {
 	CircleXIcon,
 	ClockIcon,
@@ -37,9 +31,13 @@ import {
 	SidebarMenuItem,
 } from "@/components/ui/sidebar"
 import { formatError } from "@/lib/error"
+import {
+	moveDirectoryItemsMutationAtom,
+	rootDirectoryQueryAtom,
+} from "@/vfs/api"
 import { Button } from "../components/ui/button"
 import { LoadingSpinner } from "../components/ui/loading-spinner"
-import { clearCutItemsAtom, cutHandlesAtom } from "../files/store"
+import { clearCutItemsAtom, cutItemsAtom } from "../files/store"
 import { backgroundTaskProgressAtom } from "./state"

 export function DashboardSidebar() {
@@ -95,7 +93,9 @@ function MainSidebarMenu() {

 function AllFilesItem() {
 	const location = useLocation()
-	const rootDirectory = useConvexQuery(api.files.fetchRootDirectory)
+	const { data: rootDirectory } = useQuery(
+		useAtomValue(rootDirectoryQueryAtom),
+	)

 	if (!rootDirectory) return null

@@ -105,7 +105,7 @@ function AllFilesItem() {
 				asChild
 				isActive={location.pathname.startsWith("/directories")}
 			>
-				<Link to={`/directories/${rootDirectory._id}`}>
+				<Link to={`/directories/${rootDirectory.id}`}>
 					<FilesIcon />
 					<span>All Files</span>
 				</Link>
@@ -116,7 +116,9 @@ function AllFilesItem() {

 function TrashItem() {
 	const location = useLocation()
-	const rootDirectory = useConvexQuery(api.files.fetchRootDirectory)
+	const { data: rootDirectory } = useQuery(
+		useAtomValue(rootDirectoryQueryAtom),
+	)

 	if (!rootDirectory) return null

@@ -126,7 +128,7 @@ function TrashItem() {
 				asChild
 				isActive={location.pathname.startsWith("/trash/directories")}
 			>
-				<Link to={`/trash/directories/${rootDirectory._id}`}>
+				<Link to={`/trash/directories/${rootDirectory.id}`}>
 					<TrashIcon />
 					<span>Trash</span>
 				</Link>
@@ -154,26 +156,26 @@ function BackgroundTaskProgressItem() {
 */
 function CutItemsCard() {
 	const { directoryId } = useParams({ strict: false })
-	const cutHandles = useAtomValue(cutHandlesAtom)
+	const [cutItems, setCutItems] = useAtom(cutItemsAtom)
 	const clearCutItems = useSetAtom(clearCutItemsAtom)
-	const setCutHandles = useSetAtom(cutHandlesAtom)
 	const setBackgroundTaskProgress = useSetAtom(backgroundTaskProgressAtom)
-	const store = useStore()

-	const _moveItems = useConvexMutation(api.filesystem.moveItems)
+	const moveDirectoryItemsMutation = useAtomValue(
+		moveDirectoryItemsMutationAtom,
+	)
+
 	const { mutate: moveItems } = useMutation({
-		mutationFn: _moveItems,
+		...moveDirectoryItemsMutation,
 		onMutate: () => {
 			setBackgroundTaskProgress({
 				label: "Moving items…",
 			})
-			const cutHandles = store.get(cutHandlesAtom)
 			clearCutItems()
-			return { cutHandles }
+			return { cutItems }
 		},
 		onError: (error, _variables, context) => {
-			if (context?.cutHandles) {
-				setCutHandles(context.cutHandles)
+			if (context?.cutItems) {
+				setCutItems(context.cutItems)
 			}
 			toast.error("Failed to move items", {
 				description: formatError(error),
@@ -187,13 +189,13 @@ function CutItemsCard() {
 		},
 	})

-	if (cutHandles.length === 0) return null
+	if (cutItems.length === 0) return null

 	const moveCutItems = () => {
 		if (directoryId) {
 			moveItems({
-				targetDirectory: newDirectoryHandle(directoryId),
-				items: cutHandles,
+				targetDirectory: directoryId,
+				items: cutItems,
 			})
 		}
 	}
@@ -204,7 +206,7 @@ function CutItemsCard() {
 				<CardHeader className="px-3.5 py-1.5! gap-0 border-b border-b-primary-foreground/10 bg-primary text-primary-foreground">
 					<CardTitle className="p-0 m-0 text-xs uppercase">
 						<div className="flex items-center gap-1.5">
-							<ScissorsIcon size={16} /> {cutHandles.length} Cut
+							<ScissorsIcon size={16} /> {cutItems.length} Cut
 							Items
 						</div>
 					</CardTitle>
--- a/apps/drive-web/src/directories/directory-page/context.ts
+++ b/apps/drive-web/src/directories/directory-page/context.ts
@@ -1,12 +1,9 @@
-import type { Doc } from "@fileone/convex/dataModel"
-import type { FileSystemItem } from "@fileone/convex/filesystem"
-import type { DirectoryInfo } from "@fileone/convex/types"
 import { createContext } from "react"
+import type { DirectoryContent, DirectoryInfoWithPath } from "@/vfs/vfs"

 type DirectoryPageContextType = {
-	rootDirectory: Doc<"directories">
-	directory: DirectoryInfo
-	directoryContent: FileSystemItem[]
+	directory: DirectoryInfoWithPath
+	directoryContent: DirectoryContent
 }

 export const DirectoryPageContext = createContext<DirectoryPageContextType>(
--- a/apps/drive-web/src/directories/directory-page/directory-content-context-menu.tsx
+++ b/apps/drive-web/src/directories/directory-page/directory-content-context-menu.tsx
@@ -1,116 +0,0 @@
-import { api } from "@fileone/convex/api"
-import { newFileSystemHandle } from "@fileone/convex/filesystem"
-import { useMutation } from "@tanstack/react-query"
-import { useMutation as useContextMutation } from "convex/react"
-import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai"
-import { TextCursorInputIcon, TrashIcon } from "lucide-react"
-import { toast } from "sonner"
-import {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuTrigger,
-} from "@/components/ui/context-menu"
-import {
-	contextMenuTargeItemsAtom,
-	itemBeingRenamedAtom,
-	optimisticDeletedItemsAtom,
-} from "./state"
-
-export function DirectoryContentContextMenu({
-	children,
-}: {
-	children: React.ReactNode
-}) {
-	const store = useStore()
-	const [target, setTarget] = useAtom(contextMenuTargeItemsAtom)
-	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(contextMenuTargeItemsAtom)
-		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(contextMenuTargeItemsAtom)
-	const setItemBeingRenamed = useSetAtom(itemBeingRenamedAtom)
-
-	const handleRename = () => {
-		const selectedItems = store.get(contextMenuTargeItemsAtom)
-		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>
-	)
-}
--- a/apps/drive-web/src/directories/directory-page/directory-content-table.tsx
+++ b/apps/drive-web/src/directories/directory-page/directory-content-table.tsx
@@ -1,15 +1,3 @@
-import type { Doc } from "@fileone/convex/dataModel"
-import {
-	type DirectoryHandle,
-	type FileHandle,
-	type FileSystemHandle,
-	type FileSystemItem,
-	FileType,
-	isSameHandle,
-	newDirectoryHandle,
-	newFileHandle,
-	newFileSystemHandle,
-} from "@fileone/convex/filesystem"
 import { Link, useNavigate } from "@tanstack/react-router"
 import {
 	type ColumnDef,
@@ -23,6 +11,7 @@ import {
 import { type PrimitiveAtom, useSetAtom, useStore } from "jotai"
 import { useContext, useEffect, useMemo, useRef } from "react"
 import { DirectoryIcon } from "@/components/icons/directory-icon"
+import { TextFileIcon } from "@/components/icons/text-file-icon"
 import { Checkbox } from "@/components/ui/checkbox"
 import {
 	Table,
@@ -32,26 +21,26 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table"
+import { type FileDragInfo, useFileDrop } from "@/files/use-file-drop"
 import {
 	isControlOrCommandKeyActive,
 	keyboardModifierAtom,
 } from "@/lib/keyboard"
-import { TextFileIcon } from "../../components/icons/text-file-icon"
-import { type FileDragInfo, useFileDrop } from "../../files/use-file-drop"
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
+import type { DirectoryInfo, DirectoryItem, FileInfo } from "@/vfs/vfs"
 import { DirectoryPageContext } from "./context"

-type DirectoryContentTableItemIdFilter = Set<FileSystemItem["doc"]["_id"]>
+type DirectoryContentTableItemIdFilter = Set<string>

 type DirectoryContentTableProps = {
 	hiddenItems: DirectoryContentTableItemIdFilter
-	directoryUrlFn: (directory: Doc<"directories">) => string
+	directoryUrlFn: (directory: DirectoryInfo) => string
 	fileDragInfoAtom: PrimitiveAtom<FileDragInfo | null>
 	onContextMenu: (
-		row: Row<FileSystemItem>,
-		table: TableType<FileSystemItem>,
+		row: Row<DirectoryItem>,
+		table: TableType<DirectoryItem>,
 	) => void
-	onOpenFile: (file: Doc<"files">) => void
+	onOpenFile: (file: FileInfo) => void
 }

 function formatFileSize(bytes: number): string {
@@ -65,9 +54,9 @@ function formatFileSize(bytes: number): string {
 }

 function useTableColumns(
-	onOpenFile: (file: Doc<"files">) => void,
-	directoryUrlFn: (directory: Doc<"directories">) => string,
-): ColumnDef<FileSystemItem>[] {
+	onOpenFile: (file: FileInfo) => void,
+	directoryUrlFn: (directory: DirectoryInfo) => string,
+): ColumnDef<DirectoryItem>[] {
 	return useMemo(
 		() => [
 			{
@@ -100,17 +89,17 @@ function useTableColumns(
 				accessorKey: "doc.name",
 				cell: ({ row }) => {
 					switch (row.original.kind) {
-						case FileType.File:
+						case "file":
 							return (
 								<FileNameCell
-									file={row.original.doc}
+									file={row.original}
 									onOpenFile={onOpenFile}
 								/>
 							)
-						case FileType.Directory:
+						case "directory":
 							return (
 								<DirectoryNameCell
-									directory={row.original.doc}
+									directory={row.original}
 									directoryUrlFn={directoryUrlFn}
 								/>
 							)
@@ -123,13 +112,11 @@ function useTableColumns(
 				accessorKey: "size",
 				cell: ({ row }) => {
 					switch (row.original.kind) {
-						case FileType.File:
+						case "file":
 							return (
-								<div>
-									{formatFileSize(row.original.doc.size)}
-								</div>
+								<div>{formatFileSize(row.original.size)}</div>
 							)
-						case FileType.Directory:
+						case "directory":
 							return <div className="font-mono">-</div>
 					}
 				},
@@ -140,9 +127,7 @@ function useTableColumns(
 				cell: ({ row }) => {
 					return (
 						<div>
-							{new Date(
-								row.original.doc.createdAt,
-							).toLocaleString()}
+							{new Date(row.original.createdAt).toLocaleString()}
 						</div>
 					)
 				},
@@ -178,8 +163,8 @@ export function DirectoryContentTable({
 			_columnId,
 			filterValue: DirectoryContentTableItemIdFilter,
 			_addMeta,
-		) => !filterValue.has(row.original.doc._id),
-		getRowId: (row) => row.doc._id,
+		) => !filterValue.has(row.original.id),
+		getRowId: (row) => row.id,
 	})

 	useEffect(
@@ -196,7 +181,7 @@ export function DirectoryContentTable({
 	)

 	const handleRowContextMenu = (
-		row: Row<FileSystemItem>,
+		row: Row<DirectoryItem>,
 		_event: React.MouseEvent,
 	) => {
 		if (!row.getIsSelected()) {
@@ -205,7 +190,7 @@ export function DirectoryContentTable({
 		onContextMenu(row, table)
 	}

-	const selectRow = (row: Row<FileSystemItem>) => {
+	const selectRow = (row: Row<DirectoryItem>) => {
 		const keyboardModifiers = store.get(keyboardModifierAtom)
 		const isMultiSelectMode = isControlOrCommandKeyActive(keyboardModifiers)
 		const isRowSelected = row.getIsSelected()
@@ -227,10 +212,10 @@ export function DirectoryContentTable({
 		}
 	}

-	const handleRowDoubleClick = (row: Row<FileSystemItem>) => {
-		if (row.original.kind === FileType.Directory) {
+	const handleRowDoubleClick = (row: Row<DirectoryItem>) => {
+		if (row.original.kind === "directory") {
 			navigate({
-				to: `/directories/${row.original.doc._id}`,
+				to: `/directories/${row.original.id}`,
 			})
 		}
 	}
@@ -302,8 +287,8 @@ function FileItemRow({
 	onDoubleClick,
 	fileDragInfoAtom,
 }: {
-	table: TableType<FileSystemItem>
-	row: Row<FileSystemItem>
+	table: TableType<DirectoryItem>
+	row: Row<DirectoryItem>
 	onClick: () => void
 	onContextMenu: (e: React.MouseEvent) => void
 	onDoubleClick: () => void
@@ -313,39 +298,24 @@ function FileItemRow({
 	const setFileDragInfo = useSetAtom(fileDragInfoAtom)

 	const { isDraggedOver, dropHandlers } = useFileDrop({
-		destItem:
-			row.original.kind === FileType.Directory
-				? newDirectoryHandle(row.original.doc._id)
-				: null,
+		destDir: row.original,
 		dragInfoAtom: fileDragInfoAtom,
 	})

 	const handleDragStart = (_e: React.DragEvent) => {
-		let source: DirectoryHandle | FileHandle
-		switch (row.original.kind) {
-			case FileType.File:
-				source = newFileHandle(row.original.doc._id)
-				break
-			case FileType.Directory:
-				source = newDirectoryHandle(row.original.doc._id)
-				break
-		}
-
-		let draggedItems: FileSystemHandle[]
+		let draggedItems: DirectoryItem[]
 		// drag all selections, but only if the currently dragged row is also selected
 		if (row.getIsSelected()) {
-			draggedItems = table
-				.getSelectedRowModel()
-				.rows.map((row) => newFileSystemHandle(row.original))
-			if (!draggedItems.some((item) => isSameHandle(item, source))) {
-				draggedItems.push(source)
+			draggedItems = [...table.getSelectedRowModel().rows]
+			if (!draggedItems.some((item) => item.id === row.original.id)) {
+				draggedItems.push(row.original)
 			}
 		} else {
-			draggedItems = [source]
+			draggedItems = [row.original]
 		}

 		setFileDragInfo({
-			source,
+			source: row.original,
 			items: draggedItems,
 		})
 	}
@@ -385,8 +355,8 @@ function DirectoryNameCell({
 	directory,
 	directoryUrlFn,
 }: {
-	directory: Doc<"directories">
-	directoryUrlFn: (directory: Doc<"directories">) => string
+	directory: DirectoryInfo
+	directoryUrlFn: (directory: DirectoryInfo) => string
 }) {
 	return (
 		<div className="flex w-full items-center gap-2">
@@ -402,8 +372,8 @@ function FileNameCell({
 	file,
 	onOpenFile,
 }: {
-	file: Doc<"files">
-	onOpenFile: (file: Doc<"files">) => void
+	file: FileInfo
+	onOpenFile: (file: FileInfo) => void
 }) {
 	return (
 		<div className="flex w-full items-center gap-2">
--- a/apps/drive-web/src/directories/directory-page/new-directory-dialog.tsx
+++ b/apps/drive-web/src/directories/directory-page/new-directory-dialog.tsx
@@ -1,7 +1,5 @@
-import { api } from "@fileone/convex/api"
-import type { Id } from "@fileone/convex/dataModel"
 import { useMutation } from "@tanstack/react-query"
-import { useMutation as useContextMutation } from "convex/react"
+import { useAtomValue } from "jotai"
 import { useId } from "react"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
@@ -14,21 +12,26 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
+import { createDirectoryMutationAtom } from "@/vfs/api"
+import type { DirectoryInfo } from "@/vfs/vfs"

 export function NewDirectoryDialog({
 	open,
 	onOpenChange,
-	directoryId,
+	parentDirectory,
 }: {
 	open: boolean
 	onOpenChange: (open: boolean) => void
-	directoryId: Id<"directories">
+	parentDirectory: DirectoryInfo
 }) {
 	const formId = useId()

+	const createDirectoryMutation = useAtomValue(createDirectoryMutationAtom)
+
 	const { mutate: createDirectory, isPending: isCreating } = useMutation({
-		mutationFn: useContextMutation(api.files.createDirectory),
-		onSuccess: () => {
+		...createDirectoryMutation,
+		onSuccess: (data, vars, result, context) => {
+			createDirectoryMutation.onSuccess?.(data, vars, result, context)
 			onOpenChange(false)
 			toast.success("Directory created successfully")
 		},
@@ -41,7 +44,7 @@ export function NewDirectoryDialog({
 		const name = formData.get("directoryName") as string

 		if (name) {
-			createDirectory({ name, directoryId })
+			createDirectory({ name, parentId: parentDirectory.id })
 		}
 	}

--- a/apps/drive-web/src/directories/directory-page/rename-file-dialog.tsx
+++ b/apps/drive-web/src/directories/directory-page/rename-file-dialog.tsx
@@ -1,7 +1,5 @@
-import { api } from "@fileone/convex/api"
-import { type FileSystemItem, FileType } from "@fileone/convex/filesystem"
 import { useMutation } from "@tanstack/react-query"
-import { useMutation as useContextMutation } from "convex/react"
+import { useAtomValue } from "jotai"
 import { useId } from "react"
 import { Button } from "@/components/ui/button"
 import {
@@ -13,9 +11,11 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
+import { renameDirectoryMutationAtom, renameFileMutationAtom } from "@/vfs/api"
+import type { DirectoryItem } from "@/vfs/vfs"

 type RenameFileDialogProps = {
-	item: FileSystemItem
+	item: DirectoryItem
 	onRenameSuccess: () => void
 	onClose: () => void
 }
@@ -27,13 +27,22 @@ export function RenameFileDialog({
 }: RenameFileDialogProps) {
 	const formId = useId()

-	const { mutate: renameFile, isPending: isRenaming } = useMutation({
-		mutationFn: useContextMutation(api.files.renameFile),
-		onSuccess: () => {
-			onRenameSuccess()
-		},
+	const renameFileMutation = useAtomValue(renameFileMutationAtom)
+	const renameDirectoryMutation = useAtomValue(renameDirectoryMutationAtom)
+
+	const { mutate: renameFile, isPending: isRenamingFile } = useMutation({
+		...renameFileMutation,
+		onSuccess: onRenameSuccess,
 	})

+	const { mutate: renameDirectory, isPending: isRenamingDirectory } =
+		useMutation({
+			...renameDirectoryMutation,
+			onSuccess: onRenameSuccess,
+		})
+
+	const isRenaming = isRenamingFile || isRenamingDirectory
+
 	const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
 		event.preventDefault()

@@ -42,14 +51,11 @@ export function RenameFileDialog({

 		if (newName) {
 			switch (item.kind) {
-				case FileType.File:
-					renameFile({
-						directoryId: item.doc.directoryId,
-						itemId: item.doc._id,
-						newName,
-					})
+				case "file":
+					renameFile(item)
 					break
-				default:
+				case "directory":
+					renameDirectory(item)
 					break
 			}
 		}
@@ -70,7 +76,7 @@ export function RenameFileDialog({
 				</DialogHeader>

 				<form id={formId} onSubmit={onSubmit}>
-					<RenameFileInput initialValue={item.doc.name} />
+					<RenameFileInput initialValue={item.name} />
 				</form>

 				<DialogFooter>
--- a/apps/drive-web/src/directories/directory-page/state.ts
+++ b/apps/drive-web/src/directories/directory-page/state.ts
@@ -1,21 +0,0 @@
-import type { Doc, Id } from "@fileone/convex/dataModel"
-import type { FileSystemItem } from "@fileone/convex/filesystem"
-import type { RowSelectionState } from "@tanstack/react-table"
-import { atom } from "jotai"
-import type { FileDragInfo } from "../../files/use-file-drop"
-
-export const contextMenuTargeItemsAtom = atom<FileSystemItem[]>([])
-export const optimisticDeletedItemsAtom = atom(
-	new Set<Id<"files"> | Id<"directories">>(),
-)
-
-export const selectedFileRowsAtom = atom<RowSelectionState>({})
-
-export const itemBeingRenamedAtom = atom<{
-	originalItem: FileSystemItem
-	name: string
-} | null>(null)
-
-export const openedFileAtom = atom<Doc<"files"> | null>(null)
-
-export const dragInfoAtom = atom<FileDragInfo | null>(null)
--- a/apps/drive-web/src/directories/directory-path-breadcrumb.tsx
+++ b/apps/drive-web/src/directories/directory-path-breadcrumb.tsx
@@ -1,9 +1,3 @@
-import type { Id } from "@fileone/convex/dataModel"
-import type {
-	DirectoryHandle,
-	DirectoryPathComponent,
-} from "@fileone/convex/filesystem"
-import type { DirectoryInfo } from "@fileone/convex/types"
 import { Link } from "@tanstack/react-router"
 import type { PrimitiveAtom } from "jotai"
 import { atom } from "jotai"
@@ -24,6 +18,8 @@ import {
 import type { FileDragInfo } from "@/files/use-file-drop"
 import { useFileDrop } from "@/files/use-file-drop"
 import { cn } from "@/lib/utils"
+import type { DirectoryInfoWithPath } from "@/vfs/vfs"
+import type { PathSegment } from "../lib/path"

 /**
 * This is a placeholder file drag info atom that always stores null and is never mutated.
@@ -36,15 +32,28 @@ export function DirectoryPathBreadcrumb({
 	directoryUrlFn,
 	fileDragInfoAtom = nullFileDragInfoAtom,
 }: {
-	directory: DirectoryInfo
+	directory: DirectoryInfoWithPath
 	rootLabel: string
-	directoryUrlFn: (directory: Id<"directories">) => string
+	directoryUrlFn: (directoryId: string) => string
 	fileDragInfoAtom?: PrimitiveAtom<FileDragInfo | null>
 }) {
+	if (directory.path.length === 1) {
+		return (
+			<Breadcrumb>
+				<BreadcrumbList>
+					<BreadcrumbItem>
+						<BreadcrumbPage>{rootLabel}</BreadcrumbPage>
+					</BreadcrumbItem>
+					<BreadcrumbSeparator />
+				</BreadcrumbList>
+			</Breadcrumb>
+		)
+	}
+
 	const breadcrumbItems: React.ReactNode[] = [
 		<FilePathBreadcrumbItem
-			key={directory.path[0].handle.id}
-			component={directory.path[0]}
+			key={directory.path[0].id}
+			segment={directory.path[0]}
 			rootLabel={rootLabel}
 			directoryUrlFn={directoryUrlFn}
 			fileDragInfoAtom={fileDragInfoAtom}
@@ -52,10 +61,10 @@ export function DirectoryPathBreadcrumb({
 	]
 	for (let i = 1; i < directory.path.length - 1; i++) {
 		breadcrumbItems.push(
-			<Fragment key={directory.path[i]?.handle.id}>
+			<Fragment key={directory.path[i]!.id}>
 				<BreadcrumbSeparator />
 				<FilePathBreadcrumbItem
-					component={directory.path[i]!}
+					segment={directory.path[i]!}
 					rootLabel={rootLabel}
 					directoryUrlFn={directoryUrlFn}
 					fileDragInfoAtom={fileDragInfoAtom}
@@ -78,22 +87,22 @@ export function DirectoryPathBreadcrumb({
 }

 function FilePathBreadcrumbItem({
-	component,
+	segment,
 	rootLabel,
 	directoryUrlFn,
 	fileDragInfoAtom,
 }: {
-	component: DirectoryPathComponent
+	segment: PathSegment
 	rootLabel: string
-	directoryUrlFn: (directory: Id<"directories">) => string
+	directoryUrlFn: (directoryId: string) => string
 	fileDragInfoAtom: PrimitiveAtom<FileDragInfo | null>
 }) {
 	const { isDraggedOver, dropHandlers } = useFileDrop({
-		destItem: component.handle as DirectoryHandle,
+		destDir: segment.id,
 		dragInfoAtom: fileDragInfoAtom,
 	})

-	const dirName = component.name || rootLabel
+	const dirName = segment.name || rootLabel

 	return (
 		<Tooltip open={isDraggedOver}>
@@ -103,9 +112,7 @@ function FilePathBreadcrumbItem({
 					{...dropHandlers}
 				>
 					<BreadcrumbLink asChild>
-						<Link to={directoryUrlFn(component.handle.id)}>
-							{dirName}
-						</Link>
+						<Link to={directoryUrlFn(segment.id)}>{dirName}</Link>
 					</BreadcrumbLink>
 				</BreadcrumbItem>
 			</TooltipTrigger>
--- a/apps/drive-web/src/files/PickedFileItem.tsx
+++ b/apps/drive-web/src/files/PickedFileItem.tsx
@@ -3,7 +3,7 @@ import { CircleAlertIcon, XIcon } from "lucide-react"
 import type React from "react"
 import { Button } from "@/components/ui/button"
 import { Progress } from "@/components/ui/progress"
-import { Tooltip } from "@/components/ui/tooltip"
+import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"
 import { FileUploadStatusKind, fileUploadStatusAtomFamily } from "./store"
 import type { PickedFile } from "./upload-file-dialog"

@@ -16,7 +16,6 @@ export function PickedFileItem({
 }) {
 	const fileUploadAtom = fileUploadStatusAtomFamily(pickedFile.id)
 	const fileUpload = useAtomValue(fileUploadAtom)
-	console.log("fileUpload", fileUpload)
 	const { file, id } = pickedFile

 	let statusIndicator: React.ReactNode
@@ -52,20 +51,7 @@ export function PickedFileItem({
 			key={id}
 		>
 			<span>{file.name}</span>
-			{fileUpload ? (
-				<Progress
-					className="max-w-20"
-					value={fileUpload.progress * 100}
-				/>
-			) : (
-				<Button
-					variant="ghost"
-					size="icon"
-					onClick={() => onRemove(pickedFile)}
-				>
-					<XIcon className="size-4" />
-				</Button>
-			)}
+			{statusIndicator}
 		</li>
 	)
 }
--- a/apps/drive-web/src/files/file-grid.tsx
+++ b/apps/drive-web/src/files/file-grid.tsx
@@ -1,10 +1,10 @@
-import type { Doc, Id } from "@fileone/convex/dataModel"
 import { memo, useCallback } from "react"
 import { TextFileIcon } from "@/components/icons/text-file-icon"
 import { MiddleTruncatedText } from "@/components/ui/middle-truncated-text"
 import { cn } from "@/lib/utils"
+import type { FileInfo } from "./file"

-export type FileGridSelection = Set<Id<"files">>
+export type FileGridSelection = Set<string>

 export function FileGrid({
 	files,
@@ -12,22 +12,22 @@ export function FileGrid({
 	onSelectionChange,
 	onContextMenu,
 }: {
-	files: Doc<"files">[]
+	files: FileInfo[]
 	selectedFiles?: FileGridSelection
 	onSelectionChange?: (selection: FileGridSelection) => void
-	onContextMenu?: (file: Doc<"files">, event: React.MouseEvent) => void
+	onContextMenu?: (file: FileInfo, event: React.MouseEvent) => void
 }) {
 	const onItemSelect = useCallback(
-		(file: Doc<"files">) => {
-			onSelectionChange?.(new Set([file._id]))
+		(file: FileInfo) => {
+			onSelectionChange?.(new Set([file.id]))
 		},
 		[onSelectionChange],
 	)

 	const onItemContextMenu = useCallback(
-		(file: Doc<"files">, event: React.MouseEvent) => {
+		(file: FileInfo, event: React.MouseEvent) => {
 			onContextMenu?.(file, event)
-			onSelectionChange?.(new Set([file._id]))
+			onSelectionChange?.(new Set([file.id]))
 		},
 		[onContextMenu, onSelectionChange],
 	)
@@ -36,8 +36,8 @@ export function FileGrid({
 		<div className="grid auto-cols-max grid-flow-col gap-3">
 			{files.map((file) => (
 				<FileGridItem
-					selected={selectedFiles.has(file._id)}
-					key={file._id}
+					selected={selectedFiles.has(file.id)}
+					key={file.id}
 					file={file}
 					onSelect={onItemSelect}
 					onContextMenu={onItemContextMenu}
@@ -54,14 +54,14 @@ const FileGridItem = memo(function FileGridItem({
 	onContextMenu,
 }: {
 	selected: boolean
-	file: Doc<"files">
-	onSelect?: (file: Doc<"files">) => void
-	onContextMenu?: (file: Doc<"files">, event: React.MouseEvent) => void
+	file: FileInfo
+	onSelect?: (file: FileInfo) => void
+	onContextMenu?: (file: FileInfo, event: React.MouseEvent) => void
 }) {
 	return (
 		<button
 			type="button"
-			key={file._id}
+			key={file.id}
 			className={cn(
 				"flex flex-col gap-2 items-center justify-center w-24 p-[calc(var(--spacing)*1+1px)] rounded-md",
 				{ "bg-muted border border-border p-1": selected },
--- a/apps/drive-web/src/files/file-preview-dialog.tsx
+++ b/apps/drive-web/src/files/file-preview-dialog.tsx
@@ -1,14 +1,14 @@
-import type { OpenedFile } from "@fileone/convex/filesystem"
+import type { FileInfo } from "./file"
 import { ImagePreviewDialog } from "./image-preview-dialog"

 export function FilePreviewDialog({
 	openedFile,
 	onClose,
 }: {
-	openedFile: OpenedFile
+	openedFile: FileInfo
 	onClose: () => void
 }) {
-	switch (openedFile.file.mimeType) {
+	switch (openedFile.mimeType) {
 		case "image/jpeg":
 		case "image/png":
 		case "image/gif":
--- a/apps/drive-web/src/files/file-table.tsx
+++ b/apps/drive-web/src/files/file-table.tsx
@@ -1,422 +0,0 @@
-import { api } from "@fileone/convex/api"
-import type { Doc } from "@fileone/convex/dataModel"
-import type { DirectoryItem } from "@fileone/convex/types"
-import { useMutation } from "@tanstack/react-query"
-import { Link } from "@tanstack/react-router"
-import {
-	type ColumnDef,
-	flexRender,
-	getCoreRowModel,
-	type Row,
-	useReactTable,
-} from "@tanstack/react-table"
-import { useMutation as useContextMutation, useQuery } from "convex/react"
-import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai"
-import { CheckIcon, TextCursorInputIcon, TrashIcon, XIcon } from "lucide-react"
-import { useEffect, useId, useRef } from "react"
-import { toast } from "sonner"
-import { DirectoryIcon } from "@/components/icons/directory-icon"
-import { Checkbox } from "@/components/ui/checkbox"
-import {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuTrigger,
-} from "@/components/ui/context-menu"
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table"
-import { TextFileIcon } from "../components/icons/text-file-icon"
-import { Button } from "../components/ui/button"
-import { LoadingSpinner } from "../components/ui/loading-spinner"
-import { withDefaultOnError } from "../lib/error"
-import { cn } from "../lib/utils"
-import {
-	contextMenuTargeItemAtom,
-	itemBeingRenamedAtom,
-	newItemKindAtom,
-	optimisticDeletedItemsAtom,
-} from "./state"
-
-function formatFileSize(bytes: number): string {
-	if (bytes === 0) return "0 B"
-
-	const k = 1024
-	const sizes = ["B", "KB", "MB", "GB", "TB", "PB"]
-	const i = Math.floor(Math.log(bytes) / Math.log(k))
-
-	return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
-}
-
-const columns: ColumnDef<DirectoryItem>[] = [
-	{
-		id: "select",
-		header: ({ table }) => (
-			<Checkbox
-				checked={table.getIsAllPageRowsSelected()}
-				onCheckedChange={(value) =>
-					table.toggleAllPageRowsSelected(!!value)
-				}
-				aria-label="Select all"
-			/>
-		),
-		cell: ({ row }) => (
-			<Checkbox
-				checked={row.getIsSelected()}
-				onCheckedChange={row.getToggleSelectedHandler()}
-				aria-label="Select row"
-			/>
-		),
-		enableSorting: false,
-		enableHiding: false,
-		size: 24,
-	},
-	{
-		header: "Name",
-		accessorKey: "doc.name",
-		cell: ({ row }) => {
-			switch (row.original.kind) {
-				case "file":
-					return <FileNameCell initialName={row.original.doc.name} />
-				case "directory":
-					return <DirectoryNameCell directory={row.original.doc} />
-			}
-		},
-		size: 1000,
-	},
-	{
-		header: "Size",
-		accessorKey: "size",
-		cell: ({ row }) => {
-			switch (row.original.kind) {
-				case "file":
-					return <div>{formatFileSize(row.original.doc.size)}</div>
-				case "directory":
-					return <div className="font-mono">-</div>
-			}
-		},
-	},
-	{
-		header: "Created At",
-		accessorKey: "createdAt",
-		cell: ({ row }) => {
-			return (
-				<div>
-					{new Date(row.original.doc.createdAt).toLocaleString()}
-				</div>
-			)
-		},
-	},
-]
-
-export function FileTable({ path }: { path: string }) {
-	return (
-		<FileTableContextMenu>
-			<div className="w-full">
-				<FileTableContent path={path} />
-			</div>
-		</FileTableContextMenu>
-	)
-}
-
-export function FileTableContextMenu({
-	children,
-}: {
-	children: React.ReactNode
-}) {
-	const store = useStore()
-	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 }) => {
-			setOptimisticDeletedItems((prev) => new Set([...prev, itemId]))
-		},
-		onSuccess: (itemId) => {
-			setOptimisticDeletedItems((prev) => {
-				const newSet = new Set(prev)
-				newSet.delete(itemId)
-				return newSet
-			})
-			toast.success("Moved to trash")
-		},
-	})
-
-	const handleRename = () => {
-		const selectedItem = store.get(contextMenuTargeItemAtom)
-		if (selectedItem) {
-			setItemBeingRenamed({
-				kind: selectedItem.kind,
-				originalItem: selectedItem,
-				name: selectedItem.doc.name,
-			})
-		}
-	}
-
-	const handleDelete = () => {
-		const selectedItem = store.get(contextMenuTargeItemAtom)
-		if (selectedItem) {
-			moveToTrash({
-				kind: selectedItem.kind,
-				itemId: selectedItem.doc._id,
-			})
-		}
-	}
-
-	return (
-		<ContextMenu>
-			<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
-			{target && (
-				<ContextMenuContent>
-					<ContextMenuItem onClick={handleRename}>
-						<TextCursorInputIcon />
-						Rename
-					</ContextMenuItem>
-					<ContextMenuItem onClick={handleDelete}>
-						<TrashIcon />
-						Move to trash
-					</ContextMenuItem>
-				</ContextMenuContent>
-			)}
-		</ContextMenu>
-	)
-}
-
-export function FileTableContent({ path }: { path: string }) {
-	const directory = useQuery(api.files.fetchDirectoryContent, { path })
-	const optimisticDeletedItems = useAtomValue(optimisticDeletedItemsAtom)
-	const setContextMenuTargetItem = useSetAtom(contextMenuTargeItemAtom)
-	const store = useStore()
-
-	const handleRowContextMenu = (
-		row: Row<DirectoryItem>,
-		_event: React.MouseEvent,
-	) => {
-		const target = store.get(contextMenuTargeItemAtom)
-		if (target === row.original) {
-			setContextMenuTargetItem(null)
-		} else {
-			selectRow(row)
-			setContextMenuTargetItem(row.original)
-		}
-	}
-
-	const table = useReactTable({
-		data: directory || [],
-		columns,
-		getCoreRowModel: getCoreRowModel(),
-		enableRowSelection: true,
-		enableGlobalFilter: true,
-		globalFilterFn: (row, _columnId, _filterValue, _addMeta) => {
-			return !optimisticDeletedItems.has(row.original.doc._id)
-		},
-		getRowId: (row) => row.doc._id,
-	})
-
-	const selectRow = (row: Row<DirectoryItem>) => {
-		console.log("row.getIsSelected()", row.getIsSelected())
-		if (!row.getIsSelected()) {
-			table.toggleAllPageRowsSelected(false)
-			row.toggleSelected(true)
-		}
-	}
-
-	if (!directory) {
-		return null
-	}
-
-	return (
-		<div className="overflow-hidden">
-			<Table>
-				<TableHeader>
-					{table.getHeaderGroups().map((headerGroup) => (
-						<TableRow className="px-4" key={headerGroup.id}>
-							{headerGroup.headers.map((header) => (
-								<TableHead
-									className="first:pl-4 last:pr-4"
-									key={header.id}
-									style={{ width: header.getSize() }}
-								>
-									{header.isPlaceholder
-										? null
-										: flexRender(
-												header.column.columnDef.header,
-												header.getContext(),
-											)}
-								</TableHead>
-							))}
-						</TableRow>
-					))}
-				</TableHeader>
-				<TableBody>
-					{table.getRowModel().rows?.length ? (
-						table.getRowModel().rows.map((row) => (
-							<TableRow
-								key={row.id}
-								data-state={row.getIsSelected() && "selected"}
-								onClick={() => {
-									selectRow(row)
-								}}
-								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 />
-					)}
-					<NewItemRow />
-				</TableBody>
-			</Table>
-		</div>
-	)
-}
-
-function NoResultsRow() {
-	const newItemKind = useAtomValue(newItemKindAtom)
-	if (newItemKind) {
-		return null
-	}
-	return (
-		<TableRow>
-			<TableCell colSpan={columns.length} className="text-center">
-				No results.
-			</TableCell>
-		</TableRow>
-	)
-}
-
-function NewItemRow() {
-	const inputRef = useRef<HTMLInputElement>(null)
-	const newItemFormId = useId()
-	const [newItemKind, setNewItemKind] = useAtom(newItemKindAtom)
-	const { mutate: createDirectory, isPending } = useMutation({
-		mutationFn: useContextMutation(api.files.createDirectory),
-		onSuccess: () => {
-			setNewItemKind(null)
-		},
-		onError: withDefaultOnError(() => {
-			setTimeout(() => {
-				inputRef.current?.focus()
-			}, 1)
-		}),
-	})
-
-	useEffect(() => {
-		if (newItemKind) {
-			setTimeout(() => {
-				inputRef.current?.focus()
-			}, 1)
-		}
-	}, [newItemKind])
-
-	if (!newItemKind) {
-		return null
-	}
-
-	const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-		event.preventDefault()
-
-		const formData = new FormData(event.currentTarget)
-		const itemName = formData.get("itemName") as string
-
-		if (itemName) {
-			createDirectory({ name: itemName })
-		} else {
-			toast.error("Please enter a name.")
-		}
-	}
-
-	const clearNewItemKind = () => {
-		// setItemBeingAdded(null)
-		setNewItemKind(null)
-	}
-
-	return (
-		<TableRow className={cn("align-middle", { "opacity-50": isPending })}>
-			<TableCell />
-			<TableCell className="p-0">
-				<div className="flex items-center gap-2 px-2 py-1 h-full">
-					{isPending ? (
-						<LoadingSpinner className="size-6" />
-					) : (
-						<DirectoryIcon />
-					)}
-					<form
-						className="w-full"
-						id={newItemFormId}
-						onSubmit={onSubmit}
-					>
-						<input
-							ref={inputRef}
-							type="text"
-							name="itemName"
-							defaultValue={newItemKind}
-							disabled={isPending}
-							className="w-full h-8 px-2 bg-transparent border border-input rounded-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary"
-						/>
-					</form>
-				</div>
-			</TableCell>
-			<TableCell />
-			<TableCell align="right" className="space-x-2 p-1">
-				{!isPending ? (
-					<>
-						<Button
-							type="button"
-							form={newItemFormId}
-							variant="ghost"
-							size="icon"
-							onClick={clearNewItemKind}
-						>
-							<XIcon />
-						</Button>
-						<Button type="submit" form={newItemFormId} size="icon">
-							<CheckIcon />
-						</Button>
-					</>
-				) : null}
-			</TableCell>
-		</TableRow>
-	)
-}
-
-function DirectoryNameCell({ directory }: { directory: Doc<"directories"> }) {
-	return (
-		<div className="flex w-full items-center gap-2">
-			<DirectoryIcon className="size-4" />
-			<Link className="hover:underline" to={`/files/${directory.path}`}>
-				{directory.name}
-			</Link>
-		</div>
-	)
-}
-
-function FileNameCell({ initialName }: { initialName: string }) {
-	return (
-		<div className="flex w-full items-center gap-2">
-			<TextFileIcon className="size-4" />
-			{initialName}
-		</div>
-	)
-}
--- a/apps/drive-web/src/files/files-page.tsx
+++ b/apps/drive-web/src/files/files-page.tsx
@@ -1,179 +0,0 @@
-import { api } from "@fileone/convex/api"
-import { baseName, splitPath } from "@fileone/path"
-import { useMutation } from "@tanstack/react-query"
-import { Link } from "@tanstack/react-router"
-import { useMutation as useConvexMutation } from "convex/react"
-import { useSetAtom } from "jotai"
-import {
-	ChevronDownIcon,
-	Loader2Icon,
-	PlusIcon,
-	UploadCloudIcon,
-} from "lucide-react"
-import { type ChangeEvent, Fragment, useRef } from "react"
-import { toast } from "sonner"
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { DirectoryIcon } from "../components/icons/directory-icon"
-import { TextFileIcon } from "../components/icons/text-file-icon"
-import {
-	Breadcrumb,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-} 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 }) {
-	return (
-		<>
-			<header className="flex py-1 shrink-0 items-center gap-2 border-b px-4 w-full">
-				<FilePathBreadcrumb path={path} />
-				<div className="ml-auto flex flex-row gap-2">
-					<NewDirectoryItemDropdown />
-					<UploadFileButton />
-				</div>
-			</header>
-			<div className="w-full">
-				<FileTable path={path} />
-			</div>
-			<RenameFileDialog />
-		</>
-	)
-}
-
-function FilePathBreadcrumb({ path }: { path: string }) {
-	const pathComponents = splitPath(path)
-	const base = baseName(path)
-	return (
-		<Breadcrumb>
-			<BreadcrumbList>
-				<BreadcrumbItem>
-					<BreadcrumbLink asChild>
-						<Link to="/files">All Files</Link>
-					</BreadcrumbLink>
-				</BreadcrumbItem>
-				{pathComponents.map((p) => (
-					<Fragment key={p}>
-						<BreadcrumbSeparator />
-						{p === base ? (
-							<BreadcrumbPage>{p}</BreadcrumbPage>
-						) : (
-							<BreadcrumbItem>
-								<BreadcrumbLink asChild>
-									<Link to={`/files/${p}`}>{p}</Link>
-								</BreadcrumbLink>
-							</BreadcrumbItem>
-						)}
-					</Fragment>
-				))}
-			</BreadcrumbList>
-		</Breadcrumb>
-	)
-}
-
-// tags: upload, uploadfile, uploadfilebutton, fileupload, fileuploadbutton
-function UploadFileButton() {
-	const generateUploadUrl = useConvexMutation(api.files.generateUploadUrl)
-	const saveFile = useConvexMutation(api.files.saveFile)
-	const { mutate: uploadFile, isPending: isUploading } = useMutation({
-		mutationFn: async (file: File) => {
-			const uploadUrl = await generateUploadUrl()
-			const uploadResult = await fetch(uploadUrl, {
-				method: "POST",
-				body: file,
-				headers: {
-					"Content-Type": file.type,
-				},
-			})
-			const { storageId } = await uploadResult.json()
-
-			await saveFile({
-				storageId,
-				name: file.name,
-				size: file.size,
-				mimeType: file.type,
-			})
-		},
-		onSuccess: () => {
-			toast.success("File uploaded successfully.")
-		},
-	})
-
-	const fileInputRef = useRef<HTMLInputElement>(null)
-
-	const handleClick = () => {
-		fileInputRef.current?.click()
-	}
-
-	const onFileUpload = async (e: ChangeEvent<HTMLInputElement>) => {
-		const file = e.target.files?.[0]
-		if (file) {
-			uploadFile(file)
-		}
-	}
-
-	return (
-		<>
-			<input
-				hidden
-				onChange={onFileUpload}
-				ref={fileInputRef}
-				type="file"
-				name="files"
-			/>
-			<Button
-				size="sm"
-				type="button"
-				onClick={handleClick}
-				disabled={isUploading}
-			>
-				{isUploading ? (
-					<Loader2Icon className="animate-spin size-4" />
-				) : (
-					<UploadCloudIcon className="size-4" />
-				)}
-				{isUploading ? "Uploading" : "Upload File"}
-			</Button>
-		</>
-	)
-}
-
-function NewDirectoryItemDropdown() {
-	const setNewItemKind = useSetAtom(newItemKindAtom)
-
-	const addNewDirectory = () => {
-		setNewItemKind("directory")
-	}
-
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<Button size="sm" type="button" variant="outline">
-					<PlusIcon className="size-4" />
-					New
-					<ChevronDownIcon className="pl-1 size-4 shrink-0" />
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent>
-				<DropdownMenuItem>
-					<TextFileIcon />
-					Text file
-				</DropdownMenuItem>
-				<DropdownMenuItem onClick={addNewDirectory}>
-					<DirectoryIcon />
-					Directory
-				</DropdownMenuItem>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	)
-}
--- a/apps/drive-web/src/files/image-preview-dialog.tsx
+++ b/apps/drive-web/src/files/image-preview-dialog.tsx
@@ -1,4 +1,3 @@
-import type { OpenedFile } from "@fileone/convex/filesystem"
 import { DialogTitle } from "@radix-ui/react-dialog"
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"
 import {
@@ -17,7 +16,8 @@ import {
 	DialogContent,
 	DialogHeader,
 } from "@/components/ui/dialog"
-import { fileShareUrl } from "./file-share"
+import { useFileUrl } from "@/vfs/hooks"
+import type { FileInfo } from "@/vfs/vfs"

 const zoomLevelAtom = atom(
 	1,
@@ -35,7 +35,7 @@ export function ImagePreviewDialog({
 	openedFile,
 	onClose,
 }: {
-	openedFile: OpenedFile
+	openedFile: FileInfo
 	onClose: () => void
 }) {
 	const setZoomLevel = useSetAtom(zoomLevelAtom)
@@ -61,7 +61,7 @@ export function ImagePreviewDialog({
 	)
 }

-function PreviewContent({ openedFile }: { openedFile: OpenedFile }) {
+function PreviewContent({ openedFile }: { openedFile: FileInfo }) {
 	return (
 		<DialogContent
 			showCloseButton={false}
@@ -69,10 +69,10 @@ function PreviewContent({ openedFile }: { openedFile: OpenedFile }) {
 		>
 			<DialogHeader className="overflow-auto border-b border-b-border p-4 flex flex-row items-center justify-between">
 				<DialogTitle className="truncate flex-1">
-					{openedFile.file.name}
+					{openedFile.name}
 				</DialogTitle>
 				<div className="flex flex-row items-center space-x-2">
-					<Toolbar openedFile={openedFile} />
+					<Toolbar file={openedFile} />
 					<Button variant="ghost" size="icon" asChild>
 						<DialogClose>
 							<XIcon />
@@ -82,15 +82,16 @@ function PreviewContent({ openedFile }: { openedFile: OpenedFile }) {
 				</div>
 			</DialogHeader>
 			<div className="w-full h-full flex items-center justify-center max-h-[calc(100vh-10rem)] overflow-auto">
-				<ImagePreview openedFile={openedFile} />
+				<ImagePreview file={openedFile} />
 			</div>
 		</DialogContent>
 	)
 }

-function Toolbar({ openedFile }: { openedFile: OpenedFile }) {
+function Toolbar({ file }: { file: FileInfo }) {
 	const setZoomLevel = useSetAtom(zoomLevelAtom)
 	const zoomInterval = useRef<ReturnType<typeof setInterval> | null>(null)
+	const fileUrl = useFileUrl(file)

 	useEffect(
 		() => () => {
@@ -142,8 +143,8 @@ function Toolbar({ openedFile }: { openedFile: OpenedFile }) {
 			</Button>
 			<Button asChild>
 				<a
-					href={fileShareUrl(openedFile.shareToken)}
-					download={openedFile.file.name}
+					href={fileUrl}
+					download={file.name}
 					target="_blank"
 					className="flex flex-row items-center"
 				>
@@ -174,12 +175,13 @@ function ResetZoomButton() {
 	)
 }

-function ImagePreview({ openedFile }: { openedFile: OpenedFile }) {
+function ImagePreview({ file }: { file: FileInfo }) {
 	const zoomLevel = useAtomValue(zoomLevelAtom)
+	const fileUrl = useFileUrl(file)
 	return (
 		<img
-			src={fileShareUrl(openedFile.shareToken)}
-			alt={openedFile.file.name}
+			src={fileUrl}
+			alt={file.name}
 			className="object-contain"
 			style={{ transform: `scale(${zoomLevel})` }}
 		/>
--- a/apps/drive-web/src/files/rename-file-dialog.tsx
+++ b/apps/drive-web/src/files/rename-file-dialog.tsx
@@ -1,111 +0,0 @@
-import { api } from "@fileone/convex/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)}
-		/>
-	)
-}
--- a/apps/drive-web/src/files/state.ts
+++ b/apps/drive-web/src/files/state.ts
@@ -1,19 +0,0 @@
-import type { Id } from "@fileone/convex/dataModel"
-import type { DirectoryItem, DirectoryItemKind } from "@fileone/convex/types"
-import type { RowSelectionState } from "@tanstack/react-table"
-import { atom } from "jotai"
-
-export const contextMenuTargeItemAtom = atom<DirectoryItem | null>(null)
-export const optimisticDeletedItemsAtom = atom(
-	new Set<Id<"files"> | Id<"directories">>(),
-)
-
-export const selectedFileRowsAtom = atom<RowSelectionState>({})
-
-export const newItemKindAtom = atom<DirectoryItemKind | null>(null)
-
-export const itemBeingRenamedAtom = atom<{
-	kind: DirectoryItemKind
-	originalItem: DirectoryItem
-	name: string
-} | null>(null)
--- a/apps/drive-web/src/files/store.ts
+++ b/apps/drive-web/src/files/store.ts
@@ -1,6 +1,6 @@
-import type { FileSystemHandle } from "@fileone/convex/filesystem"
 import { atom } from "jotai"
 import { atomFamily } from "jotai/utils"
+import type { DirectoryItem } from "@/vfs/vfs"

 export enum FileUploadStatusKind {
 	InProgress = "InProgress",
@@ -94,7 +94,7 @@ export const hasFileUploadsErrorAtom = atom((get) => {
 	return false
 })

-export const cutHandlesAtom = atom<FileSystemHandle[]>([])
+export const cutItemsAtom = atom<DirectoryItem[]>([])
 export const clearCutItemsAtom = atom(null, (_, set) => {
-	set(cutHandlesAtom, [])
+	set(cutItemsAtom, [])
 })
--- a/apps/drive-web/src/files/upload-file-dialog.tsx
+++ b/apps/drive-web/src/files/upload-file-dialog.tsx
@@ -1,4 +1,3 @@
-import type { Doc } from "@fileone/convex/dataModel"
 import { mutationOptions } from "@tanstack/react-query"
 import { atom, useAtom, useAtomValue, useSetAtom, useStore } from "jotai"
 import { atomEffect } from "jotai-effect"
@@ -29,7 +28,9 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "@/components/ui/tooltip"
+import type { DirectoryInfoWithPath } from "@/vfs/vfs"
 import { formatError } from "@/lib/error"
+import { currentAccountAtom } from "../account/account"
 import {
 	clearAllFileUploadStatusesAtom,
 	clearFileUploadStatusesAtom,
@@ -40,10 +41,10 @@ import {
 	hasFileUploadsErrorAtom,
 	successfulFileUploadCountAtom,
 } from "./store"
-import useUploadFile from "./use-upload-file"
+import { uploadFile } from "./upload"

 type UploadFileDialogProps = {
-	targetDirectory: Doc<"directories">
+	targetDirectory: DirectoryInfoWithPath
 	onClose: () => void
 }

@@ -58,17 +59,22 @@ export const pickedFilesAtom = atom<PickedFile[]>([])
 function useUploadFilesAtom({
 	targetDirectory,
 }: {
-	targetDirectory: Doc<"directories">
+	targetDirectory: DirectoryInfoWithPath
 }) {
-	const uploadFile = useUploadFile({ targetDirectory })
 	const store = useStore()
+
 	const options = useMemo(
 		() =>
 			mutationOptions({
 				mutationFn: async (files: PickedFile[]) => {
+					const account = store.get(currentAccountAtom)
+					if (!account) throw new Error("No account selected")
+
 					const promises = files.map((pickedFile) =>
 						uploadFile({
+							account,
 							file: pickedFile.file,
+							targetDirectory,
 							onStart: () => {
 								store.set(
 									fileUploadStatusAtomFamily(pickedFile.id),
@@ -133,8 +139,9 @@ function useUploadFilesAtom({
 					toast.error(formatError(error))
 				},
 			}),
-		[uploadFile, store.set],
+		[store, targetDirectory],
 	)
+
 	return useMemo(() => atomWithMutation(() => options), [options])
 }
 type UploadFilesAtom = ReturnType<typeof useUploadFilesAtom>
@@ -288,7 +295,7 @@ function UploadDialogHeader({
 	targetDirectory,
 }: {
 	uploadFilesAtom: UploadFilesAtom
-	targetDirectory: Doc<"directories">
+	targetDirectory: DirectoryInfoWithPath
 }) {
 	const { data: uploadResults, isPending: isUploading } =
 		useAtomValue(uploadFilesAtom)
--- a/apps/drive-web/src/files/upload.ts
+++ b/apps/drive-web/src/files/upload.ts
@@ -0,0 +1,90 @@
+import { type } from "arktype"
+import type { Account } from "@/account/account"
+import { ApiError, fetchApi } from "@/lib/api"
+import type { DirectoryInfoWithPath } from "@/vfs/vfs"
+
+export const UploadStatus = type.enumerated("pending", "completed", "failed")
+export type UploadStatus = typeof UploadStatus.infer
+
+export const Upload = type({
+	id: "string",
+	status: UploadStatus,
+	uploadUrl: "string.url",
+	createdAt: "string.date.iso.parse",
+	updatedAt: "string.date.iso.parse",
+})
+export type Upload = typeof Upload.infer
+
+export async function uploadFile({
+	account,
+	file,
+	targetDirectory,
+	onStart,
+	onProgress,
+}: {
+	account: Account
+	file: File
+	targetDirectory: DirectoryInfoWithPath
+	onStart: (xhr: XMLHttpRequest) => void
+	onProgress: (progress: number) => void
+}) {
+	const [, upload] = await fetchApi(
+		"POST",
+		`/accounts/${account.id}/uploads`,
+		{
+			body: JSON.stringify({
+				name: file.name,
+				parentId: targetDirectory.id,
+			}),
+			returns: Upload,
+		},
+	)
+
+	await putFile({
+		file,
+		uploadUrl: upload.uploadUrl,
+		onStart,
+		onProgress,
+	})
+
+	await fetchApi("PATCH", `/accounts/${account.id}/uploads/${upload.id}`, {
+		body: JSON.stringify({
+			status: "completed",
+		}),
+		returns: Upload,
+	})
+
+	return upload
+}
+
+function putFile({
+	file,
+	uploadUrl,
+	onStart,
+	onProgress,
+}: {
+	file: File
+	uploadUrl: string
+	onStart: (xhr: XMLHttpRequest) => void
+	onProgress: (progress: number) => void
+}): Promise<void> {
+	return new Promise<void>((resolve, reject) => {
+		const xhr = new XMLHttpRequest()
+		xhr.upload.addEventListener("progress", (e) => {
+			onProgress(e.loaded / e.total)
+		})
+		xhr.upload.addEventListener("error", reject)
+		xhr.addEventListener("load", () => {
+			if (xhr.status === 200 || xhr.status === 204) {
+				resolve()
+			} else {
+				reject(new ApiError(xhr.status, xhr.response))
+			}
+		})
+		xhr.open("PUT", uploadUrl)
+		xhr.responseType = "json"
+		xhr.setRequestHeader("Content-Type", file.type)
+		xhr.send(file)
+		onStart(xhr)
+	})
+}
--- a/apps/drive-web/src/files/use-file-drop.ts
+++ b/apps/drive-web/src/files/use-file-drop.ts
@@ -1,30 +1,22 @@
-import { api } from "@fileone/convex/api"
-import type { Doc, Id } from "@fileone/convex/dataModel"
-import * as Err from "@fileone/convex/error"
-import {
-	type DirectoryHandle,
-	type FileSystemHandle,
-	isSameHandle,
-} from "@fileone/convex/filesystem"
 import { useMutation } from "@tanstack/react-query"
-import { useMutation as useContextMutation } from "convex/react"
 import type { PrimitiveAtom } from "jotai"
-import { useSetAtom, useStore } from "jotai"
+import { useAtomValue, useSetAtom, useStore } from "jotai"
 import { useState } from "react"
 import { toast } from "sonner"
+import {
+	type MoveDirectoryItemsResult,
+	moveDirectoryItemsMutationAtom,
+} from "@/vfs/api"
+import type { DirectoryInfo, DirectoryItem } from "@/vfs/vfs"

 export interface FileDragInfo {
-	source: FileSystemHandle
-	items: FileSystemHandle[]
+	source: DirectoryItem
+	items: DirectoryItem[]
 }

 export interface UseFileDropOptions {
-	destItem: DirectoryHandle | null
+	destDir: DirectoryInfo | string
 	dragInfoAtom: PrimitiveAtom<FileDragInfo | null>
-	onDropSuccess?: (
-		items: Id<"files">[],
-		targetDirectory: Doc<"directories">,
-	) => void
 }

 export interface UseFileDropReturn {
@@ -37,7 +29,7 @@ export interface UseFileDropReturn {
 }

 export function useFileDrop({
-	destItem,
+	destDir,
 	dragInfoAtom,
 }: UseFileDropOptions): UseFileDropReturn {
 	const [isDraggedOver, setIsDraggedOver] = useState(false)
@@ -45,39 +37,28 @@ export function useFileDrop({
 	const store = useStore()

 	const { mutate: moveDroppedItems } = useMutation({
-		mutationFn: useContextMutation(api.filesystem.moveItems),
-		onSuccess: ({
-			moved,
-			errors,
-		}: {
-			moved: FileSystemHandle[]
-			errors: Err.ApplicationErrorData[]
-		}) => {
-			const conflictCount = errors.reduce((acc, error) => {
-				if (error.code === Err.ErrorCode.Conflict) {
-					return acc + 1
-				}
-				return acc
-			}, 0)
+		...useAtomValue(moveDirectoryItemsMutationAtom),
+		onSuccess: (result: MoveDirectoryItemsResult) => {
+			const conflictCount = result.conflicts.length
 			if (conflictCount > 0) {
 				toast.warning(
-					`${moved.length} items moved${conflictCount > 0 ? `, ${conflictCount} conflicts` : ""}`,
+					`${result.moved.length} items moved${conflictCount > 0 ? `, ${conflictCount} conflicts` : ""}`,
 				)
 			} else {
-				toast.success(`${moved.length} items moved!`)
+				toast.success(`${result.moved.length} items moved!`)
 			}
 		},
 	})

+	const dirId = typeof destDir === "string" ? destDir : destDir.id
+
 	const handleDrop = (_e: React.DragEvent) => {
 		const dragInfo = store.get(dragInfoAtom)
-		if (dragInfo && destItem) {
-			const items = dragInfo.items.filter(
-				(item) => !isSameHandle(item, destItem),
-			)
+		if (dragInfo) {
+			const items = dragInfo.items.filter((item) => item.id !== dirId)
 			if (items.length > 0) {
 				moveDroppedItems({
-					targetDirectory: destItem,
+					targetDirectory: destDir,
 					items,
 				})
 			}
@@ -88,7 +69,7 @@ export function useFileDrop({

 	const handleDragOver = (e: React.DragEvent) => {
 		const dragInfo = store.get(dragInfoAtom)
-		if (dragInfo && destItem) {
+		if (dragInfo && destDir) {
 			e.preventDefault()
 			e.dataTransfer.dropEffect = "move"
 			setIsDraggedOver(true)
--- a/apps/drive-web/src/files/use-upload-file.ts
+++ b/apps/drive-web/src/files/use-upload-file.ts
@@ -1,55 +0,0 @@
-import { api } from "@fileone/convex/api"
-import type { Doc, Id } from "@fileone/convex/dataModel"
-import { useMutation as useConvexMutation } from "convex/react"
-import { useCallback } from "react"
-
-function useUploadFile({
-	targetDirectory,
-}: {
-	targetDirectory: Doc<"directories">
-}) {
-	const generateUploadUrl = useConvexMutation(api.files.generateUploadUrl)
-	const saveFile = useConvexMutation(api.filesystem.saveFile)
-
-	async function upload({
-		file,
-		onStart,
-		onProgress,
-	}: {
-		file: File
-		onStart: (xhr: XMLHttpRequest) => void
-		onProgress: (progress: number) => void
-	}) {
-		const uploadUrl = await generateUploadUrl()
-
-		return new Promise<{ storageId: Id<"_storage"> }>((resolve, reject) => {
-			const xhr = new XMLHttpRequest()
-			xhr.upload.addEventListener("progress", (e) => {
-				onProgress(e.loaded / e.total)
-			})
-			xhr.upload.addEventListener("error", reject)
-			xhr.addEventListener("load", () => {
-				resolve(
-					xhr.response as {
-						storageId: Id<"_storage">
-					},
-				)
-			})
-			xhr.open("POST", uploadUrl)
-			xhr.responseType = "json"
-			xhr.setRequestHeader("Content-Type", file.type)
-			xhr.send(file)
-			onStart(xhr)
-		}).then(({ storageId }) =>
-			saveFile({
-				storageId,
-				name: file.name,
-				directoryId: targetDirectory._id,
-			}),
-		)
-	}
-
-	return useCallback(upload, [])
-}
-
-export default useUploadFile
--- a/apps/drive-web/src/lib/api.ts
+++ b/apps/drive-web/src/lib/api.ts
@@ -0,0 +1,71 @@
+import { type } from "arktype"
+
+export type ApiRoute =
+	| "/auth/login"
+	| "/auth/tokens"
+	| "/accounts"
+	| `/accounts/${string}`
+	| `/accounts/${string}/uploads`
+	| `/accounts/${string}/uploads/${string}/content`
+	| `/accounts/${string}/uploads/${string}`
+	| `/accounts/${string}/files${string}`
+	| `/accounts/${string}/files/${string}`
+	| `/accounts/${string}/files/${string}/content`
+	| `/accounts/${string}/directories`
+	| `/accounts/${string}/directories/${string}`
+	| `/accounts/${string}/directories/${string}/content`
+	| "/users/me"
+
+export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
+
+const baseApiUrl = new URL(
+	import.meta.env.VITE_API_URL ??
+		`${location.protocol}//${location.host}/api`,
+)
+
+export class ApiError extends Error {
+	constructor(
+		public readonly status: number,
+		message: string,
+	) {
+		super(`api returned ${status}: ${message}`)
+	}
+}
+
+export const Nothing = type({})
+export type Nothing = typeof Nothing.infer
+
+export async function fetchApi<Schema extends type.Any>(
+	method: HttpMethod,
+	route: ApiRoute,
+	init: RequestInit & { returns: Schema },
+): Promise<[response: Response, data: Schema["inferOut"]]> {
+	let path: string
+	if (baseApiUrl.pathname) {
+		if (baseApiUrl.pathname.endsWith("/")) {
+			path = `${baseApiUrl.pathname.slice(0, -1)}${route}`
+		} else {
+			path = `${baseApiUrl.pathname}${route}`
+		}
+	} else {
+		path = route
+	}
+	const url = new URL(path, baseApiUrl)
+	const response = await fetch(url, {
+		credentials: "include",
+		...init,
+		method,
+		headers: {
+			"Content-Type": "application/json",
+		},
+	})
+	if (!response.ok) {
+		throw new ApiError(response.status, await response.text())
+	}
+	const body = await response.json()
+	const result = init.returns(body)
+	if (result instanceof type.errors) {
+		throw result
+	}
+	return [response, result]
+}
--- a/apps/drive-web/src/lib/path.ts
+++ b/apps/drive-web/src/lib/path.ts
@@ -0,0 +1,10 @@
+import { type } from "arktype"
+
+export const PathSegment = type({
+	name: "string",
+	id: "string",
+})
+export type PathSegment = typeof PathSegment.infer
+
+export const Path = type([PathSegment])
+export type Path = typeof Path.infer
--- a/apps/drive-web/src/routeTree.gen.ts
+++ b/apps/drive-web/src/routeTree.gen.ts
@@ -15,10 +15,8 @@ import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
 import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
 import { Route as LoginCallbackRouteImport } from './routes/login_.callback'
 import { Route as AuthenticatedSidebarLayoutRouteImport } from './routes/_authenticated/_sidebar-layout'
-import { Route as AuthenticatedSidebarLayoutRecentRouteImport } from './routes/_authenticated/_sidebar-layout/recent'
 import { Route as AuthenticatedSidebarLayoutHomeRouteImport } from './routes/_authenticated/_sidebar-layout/home'
 import { Route as AuthenticatedSidebarLayoutDirectoriesDirectoryIdRouteImport } from './routes/_authenticated/_sidebar-layout/directories.$directoryId'
-import { Route as AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRouteImport } from './routes/_authenticated/_sidebar-layout/trash.directories.$directoryId'

 const SignUpRoute = SignUpRouteImport.update({
  id: '/sign-up',
@@ -49,12 +47,6 @@ const AuthenticatedSidebarLayoutRoute =
    id: '/_sidebar-layout',
    getParentRoute: () => AuthenticatedRoute,
  } as any)
-const AuthenticatedSidebarLayoutRecentRoute =
-  AuthenticatedSidebarLayoutRecentRouteImport.update({
-    id: '/recent',
-    path: '/recent',
-    getParentRoute: () => AuthenticatedSidebarLayoutRoute,
-  } as any)
 const AuthenticatedSidebarLayoutHomeRoute =
  AuthenticatedSidebarLayoutHomeRouteImport.update({
    id: '/home',
@@ -67,12 +59,6 @@ const AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute =
    path: '/directories/$directoryId',
    getParentRoute: () => AuthenticatedSidebarLayoutRoute,
  } as any)
-const AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute =
-  AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRouteImport.update({
-    id: '/trash/directories/$directoryId',
-    path: '/trash/directories/$directoryId',
-    getParentRoute: () => AuthenticatedSidebarLayoutRoute,
-  } as any)

 export interface FileRoutesByFullPath {
  '/login': typeof LoginRoute
@@ -80,9 +66,7 @@ export interface FileRoutesByFullPath {
  '/login/callback': typeof LoginCallbackRoute
  '/': typeof AuthenticatedIndexRoute
  '/home': typeof AuthenticatedSidebarLayoutHomeRoute
-  '/recent': typeof AuthenticatedSidebarLayoutRecentRoute
  '/directories/$directoryId': typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute
-  '/trash/directories/$directoryId': typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute
 }
 export interface FileRoutesByTo {
  '/login': typeof LoginRoute
@@ -90,9 +74,7 @@ export interface FileRoutesByTo {
  '/login/callback': typeof LoginCallbackRoute
  '/': typeof AuthenticatedIndexRoute
  '/home': typeof AuthenticatedSidebarLayoutHomeRoute
-  '/recent': typeof AuthenticatedSidebarLayoutRecentRoute
  '/directories/$directoryId': typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute
-  '/trash/directories/$directoryId': typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
@@ -103,9 +85,7 @@ export interface FileRoutesById {
  '/login_/callback': typeof LoginCallbackRoute
  '/_authenticated/': typeof AuthenticatedIndexRoute
  '/_authenticated/_sidebar-layout/home': typeof AuthenticatedSidebarLayoutHomeRoute
-  '/_authenticated/_sidebar-layout/recent': typeof AuthenticatedSidebarLayoutRecentRoute
  '/_authenticated/_sidebar-layout/directories/$directoryId': typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute
-  '/_authenticated/_sidebar-layout/trash/directories/$directoryId': typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
@@ -115,9 +95,7 @@ export interface FileRouteTypes {
    | '/login/callback'
    | '/'
    | '/home'
-    | '/recent'
    | '/directories/$directoryId'
-    | '/trash/directories/$directoryId'
  fileRoutesByTo: FileRoutesByTo
  to:
    | '/login'
@@ -125,9 +103,7 @@ export interface FileRouteTypes {
    | '/login/callback'
    | '/'
    | '/home'
-    | '/recent'
    | '/directories/$directoryId'
-    | '/trash/directories/$directoryId'
  id:
    | '__root__'
    | '/_authenticated'
@@ -137,9 +113,7 @@ export interface FileRouteTypes {
    | '/login_/callback'
    | '/_authenticated/'
    | '/_authenticated/_sidebar-layout/home'
-    | '/_authenticated/_sidebar-layout/recent'
    | '/_authenticated/_sidebar-layout/directories/$directoryId'
-    | '/_authenticated/_sidebar-layout/trash/directories/$directoryId'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -193,13 +167,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AuthenticatedSidebarLayoutRouteImport
      parentRoute: typeof AuthenticatedRoute
    }
-    '/_authenticated/_sidebar-layout/recent': {
-      id: '/_authenticated/_sidebar-layout/recent'
-      path: '/recent'
-      fullPath: '/recent'
-      preLoaderRoute: typeof AuthenticatedSidebarLayoutRecentRouteImport
-      parentRoute: typeof AuthenticatedSidebarLayoutRoute
-    }
    '/_authenticated/_sidebar-layout/home': {
      id: '/_authenticated/_sidebar-layout/home'
      path: '/home'
@@ -214,32 +181,19 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRouteImport
      parentRoute: typeof AuthenticatedSidebarLayoutRoute
    }
-    '/_authenticated/_sidebar-layout/trash/directories/$directoryId': {
-      id: '/_authenticated/_sidebar-layout/trash/directories/$directoryId'
-      path: '/trash/directories/$directoryId'
-      fullPath: '/trash/directories/$directoryId'
-      preLoaderRoute: typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRouteImport
-      parentRoute: typeof AuthenticatedSidebarLayoutRoute
-    }
  }
 }

 interface AuthenticatedSidebarLayoutRouteChildren {
  AuthenticatedSidebarLayoutHomeRoute: typeof AuthenticatedSidebarLayoutHomeRoute
-  AuthenticatedSidebarLayoutRecentRoute: typeof AuthenticatedSidebarLayoutRecentRoute
  AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute: typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute
-  AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute: typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute
 }

 const AuthenticatedSidebarLayoutRouteChildren: AuthenticatedSidebarLayoutRouteChildren =
  {
    AuthenticatedSidebarLayoutHomeRoute: AuthenticatedSidebarLayoutHomeRoute,
-    AuthenticatedSidebarLayoutRecentRoute:
-      AuthenticatedSidebarLayoutRecentRoute,
    AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute:
      AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute,
-    AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute:
-      AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute,
  }

 const AuthenticatedSidebarLayoutRouteWithChildren =
--- a/apps/drive-web/src/routes/__root.tsx
+++ b/apps/drive-web/src/routes/__root.tsx
@@ -1,46 +1,46 @@
 import "@/styles/globals.css"
-import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { createRootRoute, Outlet } from "@tanstack/react-router"
-import { ConvexReactClient } from "convex/react"
-import { toast } from "sonner"
+import { Provider } from "jotai"
+import { useHydrateAtoms } from "jotai/utils"
+import { queryClientAtom } from "jotai-tanstack-query"
+import type React from "react"
 import { Toaster } from "@/components/ui/sonner"
-import { formatError } from "@/lib/error"
+import { defaultOnError } from "@/lib/error"
 import { useKeyboardModifierListener } from "@/lib/keyboard"
-import { authClient } from "../auth"

 export const Route = createRootRoute({
 	component: RootLayout,
 })

-const convexClient = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL, {
-	verbose: true,
-	expectAuth: true,
-})
 const queryClient = new QueryClient({
 	defaultOptions: {
+		queries: {
+			throwOnError: false,
+		},
 		mutations: {
-			onError: (error) => {
-				console.log(error)
-				toast.error(formatError(error))
-			},
+			onError: defaultOnError,
 			throwOnError: false,
 		},
 	},
 })

+function HydrateAtoms({ children }: React.PropsWithChildren) {
+	useHydrateAtoms(new Map([[queryClientAtom, queryClient]]))
+	return children
+}
+
 function RootLayout() {
 	useKeyboardModifierListener()

 	return (
 		<QueryClientProvider client={queryClient}>
-			<ConvexBetterAuthProvider
-				client={convexClient}
-				authClient={authClient}
-			>
-				<Outlet />
-				<Toaster />
-			</ConvexBetterAuthProvider>
+			<Provider>
+				<HydrateAtoms>
+					<Outlet />
+					<Toaster />
+				</HydrateAtoms>
+			</Provider>
 		</QueryClientProvider>
 	)
 }
--- a/apps/drive-web/src/routes/_authenticated.tsx
+++ b/apps/drive-web/src/routes/_authenticated.tsx
@@ -1,45 +1,31 @@
-import {
-	createFileRoute,
-	Navigate,
-	Outlet,
-	useLocation,
-} from "@tanstack/react-router"
-import {
-	Authenticated,
-	AuthLoading,
-	Unauthenticated,
-	useConvexAuth,
-} from "convex/react"
-import { useEffect, useState } from "react"
-import { authClient, SessionContext } from "@/auth"
+import { createFileRoute, Navigate, Outlet } from "@tanstack/react-router"
+import { useAtomValue } from "jotai"
+import { atomEffect } from "jotai-effect"
+import { atomWithQuery } from "jotai-tanstack-query"
+import { accountsQuery } from "@/account/api"
 import { LoadingSpinner } from "@/components/ui/loading-spinner"
+import { currentAccountAtom } from "../account/account"

 export const Route = createFileRoute("/_authenticated")({
 	component: AuthenticatedLayout,
 })

+const accountsAtom = atomWithQuery(() => accountsQuery)
+const selectFirstAccountEffect = atomEffect((get, set) => {
+	const { data: accounts } = get(accountsAtom)
+	const firstAccount = accounts?.[0]
+	if (firstAccount && get.peek(currentAccountAtom) === null) {
+		set(currentAccountAtom, firstAccount)
+	}
+})
+
 function AuthenticatedLayout() {
-	const { search } = useLocation()
-	const { isLoading, isAuthenticated } = useConvexAuth()
-	const { data: session, isPending: sessionLoading } = authClient.useSession()
-	const [hasProcessedAuth, setHasProcessedAuth] = useState(false)
+	const { data: accounts, isLoading: isLoadingAccounts } =
+		useAtomValue(accountsAtom)

-	// Check if we're in the middle of processing an auth code
-	const hasAuthCode = search && typeof search === "object" && "code" in search
+	useAtomValue(selectFirstAccountEffect)

-	// Track when auth processing is complete
-	useEffect(() => {
-		if (!sessionLoading && !isLoading) {
-			// Delay to ensure auth state is fully synchronized
-			const timer = setTimeout(() => {
-				setHasProcessedAuth(true)
-			}, 0)
-			return () => clearTimeout(timer)
-		}
-	}, [sessionLoading, isLoading])
-
-	// Show loading during auth code processing or while auth state is syncing
-	if (hasAuthCode || sessionLoading || isLoading || !hasProcessedAuth) {
+	if (isLoadingAccounts) {
 		return (
 			<div className="flex h-screen w-full items-center justify-center">
 				<LoadingSpinner className="size-10" />
@@ -47,25 +33,9 @@ function AuthenticatedLayout() {
 		)
 	}

-	return (
-		<>
-			<Authenticated>
-				{session ? (
-					<SessionContext value={session}>
-						<Outlet />
-					</SessionContext>
-				) : (
-					<Outlet />
-				)}
-			</Authenticated>
-			<Unauthenticated>
-				<Navigate replace to="/login" />
-			</Unauthenticated>
-			<AuthLoading>
-				<div className="flex h-screen w-full items-center justify-center">
-					<LoadingSpinner className="size-10" />
-				</div>
-			</AuthLoading>
-		</>
-	)
+	if (!accounts) {
+		return <Navigate replace to="/login" />
+	}
+
+	return <Outlet />
 }
--- a/apps/drive-web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx
+++ b/apps/drive-web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx
@@ -1,18 +1,6 @@
-import { api } from "@fileone/convex/api"
-import type { Doc, Id } from "@fileone/convex/dataModel"
-import {
-	type FileSystemItem,
-	newFileSystemHandle,
-	type OpenedFile,
-} from "@fileone/convex/filesystem"
-import { useMutation } from "@tanstack/react-query"
+import { useMutation, useQuery } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
 import type { Row, Table } from "@tanstack/react-table"
-import {
-	useMutation as useContextMutation,
-	useMutation as useConvexMutation,
-	useQuery as useConvexQuery,
-} from "convex/react"
 import { atom, useAtom, useAtomValue, useSetAtom, useStore } from "jotai"
 import {
 	ChevronDownIcon,
@@ -47,9 +35,20 @@ import { NewDirectoryDialog } from "@/directories/directory-page/new-directory-d
 import { RenameFileDialog } from "@/directories/directory-page/rename-file-dialog"
 import { DirectoryPathBreadcrumb } from "@/directories/directory-path-breadcrumb"
 import { FilePreviewDialog } from "@/files/file-preview-dialog"
-import { cutHandlesAtom, inProgressFileUploadCountAtom } from "@/files/store"
+import { cutItemsAtom, inProgressFileUploadCountAtom } from "@/files/store"
 import { UploadFileDialog } from "@/files/upload-file-dialog"
 import type { FileDragInfo } from "@/files/use-file-drop"
+import {
+	directoryContentQueryAtom,
+	directoryInfoQueryAtom,
+	moveToTrashMutationAtom,
+} from "@/vfs/api"
+import type {
+	DirectoryInfo,
+	DirectoryInfoWithPath,
+	DirectoryItem,
+	FileInfo,
+} from "@/vfs/vfs"

 export const Route = createFileRoute(
 	"/_authenticated/_sidebar-layout/directories/$directoryId",
@@ -68,55 +67,54 @@ type NewDirectoryDialogData = {

 type UploadFileDialogData = {
 	kind: DialogKind.UploadFile
-	directory: Doc<"directories">
+	directory: DirectoryInfoWithPath
 }

 type ActiveDialogData = NewDirectoryDialogData | UploadFileDialogData

 // MARK: atoms
-const contextMenuTargetItemsAtom = atom<FileSystemItem[]>([])
+const contextMenuTargetItemsAtom = atom<DirectoryItem[]>([])
 const activeDialogDataAtom = atom<ActiveDialogData | null>(null)
 const fileDragInfoAtom = atom<FileDragInfo | null>(null)
-const optimisticDeletedItemsAtom = atom(
-	new Set<Id<"files"> | Id<"directories">>(),
-)
-const openedFileAtom = atom<OpenedFile | null>(null)
+const optimisticDeletedItemsAtom = atom(new Set<string>())
+const openedFileAtom = atom<FileInfo | null>(null)
 const itemBeingRenamedAtom = atom<{
-	originalItem: FileSystemItem
+	originalItem: DirectoryItem
 	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 directoryContent = useConvexQuery(
-		api.filesystem.fetchDirectoryContent,
-		{
-			directoryId,
-			trashed: false,
-		},
+	const { data: directoryInfo, isLoading: isLoadingDirectoryInfo, error: directoryInfoError } = useQuery(
+		useAtomValue(directoryInfoQueryAtom(directoryId)),
 	)
+	const { data: directoryContent, isLoading: isLoadingDirectoryContent, error: directoryContentError } =
+		useQuery(useAtomValue(directoryContentQueryAtom(directoryId)))

 	const directoryUrlById = useCallback(
-		(directoryId: Id<"directories">) => `/directories/${directoryId}`,
+		(directoryId: string) => `/directories/${directoryId}`,
 		[],
 	)
+	
+	console.log({ directoryInfoError, directoryContentError })

-	if (!directory || !directoryContent || !rootDirectory) {
+	if (isLoadingDirectoryInfo || isLoadingDirectoryContent) {
 		return <DirectoryPageSkeleton />
 	}

+	if (!directoryInfo || !directoryContent) {
+		// TODO: handle empty state/error
+		return null
+	}
+
 	return (
 		<DirectoryPageContext
-			value={{ rootDirectory, directory, directoryContent }}
+			value={{ directory: directoryInfo, directoryContent }}
 		>
 			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
 				<DirectoryPathBreadcrumb
-					directory={directory}
+					directory={directoryInfo}
 					rootLabel="All Files"
 					directoryUrlFn={directoryUrlById}
 					fileDragInfoAtom={fileDragInfoAtom}
@@ -139,7 +137,7 @@ function RouteComponent() {
 					<>
 						<NewDirectoryDialog
 							open={data?.kind === DialogKind.NewDirectory}
-							directoryId={directory._id}
+							parentDirectory={directoryInfo}
 							onOpenChange={(open) => {
 								if (!open) {
 									setData(null)
@@ -148,7 +146,7 @@ function RouteComponent() {
 						/>
 						{data?.kind === DialogKind.UploadFile && (
 							<UploadFileDialog
-								targetDirectory={data.directory}
+								targetDirectory={directoryInfo}
 								onClose={() => setData(null)}
 							/>
 						)}
@@ -194,29 +192,18 @@ function _DirectoryContentTable() {
 	const setOpenedFile = useSetAtom(openedFileAtom)
 	const setContextMenuTargetItems = useSetAtom(contextMenuTargetItemsAtom)

-	const { mutate: openFile } = useMutation({
-		mutationFn: useConvexMutation(api.filesystem.openFile),
-		onSuccess: (openedFile: OpenedFile) => {
-			setOpenedFile(openedFile)
-		},
-		onError: (error) => {
-			console.error(error)
-			toast.error("Failed to open file")
-		},
-	})
-
-	const onTableOpenFile = (file: Doc<"files">) => {
-		openFile({ fileId: file._id })
+	const onTableOpenFile = (file: FileInfo) => {
+		setOpenedFile(file)
 	}

 	const directoryUrlFn = useCallback(
-		(directory: Doc<"directories">) => `/directories/${directory._id}`,
+		(directory: DirectoryInfo) => `/directories/${directory.id}`,
 		[],
 	)

 	const handleContextMenuRequest = (
-		row: Row<FileSystemItem>,
-		table: Table<FileSystemItem>,
+		row: Row<DirectoryItem>,
+		table: Table<DirectoryItem>,
 	) => {
 		if (row.getIsSelected()) {
 			setContextMenuTargetItems(
@@ -251,44 +238,34 @@ function DirectoryContentContextMenu({
 	const [target, setTarget] = useAtom(contextMenuTargetItemsAtom)
 	const setOptimisticDeletedItems = useSetAtom(optimisticDeletedItemsAtom)
 	const setBackgroundTaskProgress = useSetAtom(backgroundTaskProgressAtom)
-	const setCutHandles = useSetAtom(cutHandlesAtom)
-	const moveToTrashMutation = useContextMutation(api.filesystem.moveToTrash)
+	const setCutItems = useSetAtom(cutItemsAtom)

 	const { mutate: moveToTrash } = useMutation({
-		mutationFn: moveToTrashMutation,
-		onMutate: ({ handles }) => {
+		...useAtomValue(moveToTrashMutationAtom),
+		onMutate: (items) => {
 			setBackgroundTaskProgress({
 				label: "Moving items to trash…",
 			})
 			setOptimisticDeletedItems(
-				(prev) =>
-					new Set([...prev, ...handles.map((handle) => handle.id)]),
+				(prev) => new Set([...prev, ...items.map((item) => item.id)]),
 			)
 		},
-		onSuccess: ({ deleted, errors }, { handles }) => {
+		onSuccess: (trashedItems) => {
 			setBackgroundTaskProgress(null)
 			setOptimisticDeletedItems((prev) => {
 				const newSet = new Set(prev)
-				for (const handle of handles) {
-					newSet.delete(handle.id)
+				for (const item of trashedItems) {
+					newSet.delete(item.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`,
-				)
-			}
+			toast.success(`Moved ${trashedItems.length} items to trash`)
 		},
-		onError: (_err, { handles }) => {
+		onError: (_err, items) => {
 			setOptimisticDeletedItems((prev) => {
 				const newSet = new Set(prev)
-				for (const handle of handles) {
-					newSet.delete(handle.id)
+				for (const item of items) {
+					newSet.delete(item.id)
 				}
 				return newSet
 			})
@@ -298,16 +275,14 @@ function DirectoryContentContextMenu({
 	const handleCut = () => {
 		const selectedItems = store.get(contextMenuTargetItemsAtom)
 		if (selectedItems.length > 0) {
-			setCutHandles(selectedItems.map(newFileSystemHandle))
+			setCutItems(selectedItems)
 		}
 	}

 	const handleDelete = () => {
 		const selectedItems = store.get(contextMenuTargetItemsAtom)
 		if (selectedItems.length > 0) {
-			moveToTrash({
-				handles: selectedItems.map(newFileSystemHandle),
-			})
+			moveToTrash(selectedItems)
 		}
 	}

@@ -352,7 +327,7 @@ function RenameMenuItem() {
 			const selectedItem = selectedItems[0]!
 			setItemBeingRenamed({
 				originalItem: selectedItem,
-				name: selectedItem.doc.name,
+				name: selectedItem.name,
 			})
 		}
 	}
--- a/apps/drive-web/src/routes/_authenticated/_sidebar-layout/recent.tsx
+++ b/apps/drive-web/src/routes/_authenticated/_sidebar-layout/recent.tsx
@@ -1,119 +0,0 @@
-import { api } from "@fileone/convex/api"
-import type { Doc } from "@fileone/convex/dataModel"
-import { newFileHandle } from "@fileone/convex/filesystem"
-import { useMutation } from "@tanstack/react-query"
-import { createFileRoute, Link } from "@tanstack/react-router"
-import {
-	useMutation as useConvexMutation,
-	useQuery as useConvexQuery,
-} from "convex/react"
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"
-import { FolderInputIcon, TrashIcon } from "lucide-react"
-import { useCallback } from "react"
-import { toast } from "sonner"
-import {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuTrigger,
-} from "@/components/ui/context-menu"
-import { backgroundTaskProgressAtom } from "@/dashboard/state"
-import type { FileGridSelection } from "@/files/file-grid"
-import { FileGrid } from "@/files/file-grid"
-import { formatError } from "@/lib/error"
-
-export const Route = createFileRoute("/_authenticated/_sidebar-layout/recent")({
-	component: RouteComponent,
-})
-
-const selectedFilesAtom = atom(new Set() as FileGridSelection)
-const contextMenuTargetItem = atom<Doc<"files"> | null>(null)
-
-function RouteComponent() {
-	return (
-		<main className="p-4">
-			<RecentFilesContextMenu>
-				<RecentFilesGrid />
-			</RecentFilesContextMenu>
-		</main>
-	)
-}
-
-function RecentFilesGrid() {
-	const recentFiles = useConvexQuery(api.filesystem.fetchRecentFiles, {
-		limit: 100,
-	})
-	const [selectedFiles, setSelectedFiles] = useAtom(selectedFilesAtom)
-	const setContextMenuTargetItem = useSetAtom(contextMenuTargetItem)
-
-	const handleContextMenu = useCallback(
-		(file: Doc<"files">, _event: React.MouseEvent) => {
-			setContextMenuTargetItem(file)
-		},
-		[setContextMenuTargetItem],
-	)
-
-	return (
-		<FileGrid
-			files={recentFiles ?? []}
-			selectedFiles={selectedFiles}
-			onSelectionChange={setSelectedFiles}
-			onContextMenu={handleContextMenu}
-		/>
-	)
-}
-
-function RecentFilesContextMenu({ children }: { children: React.ReactNode }) {
-	const targetItem = useAtomValue(contextMenuTargetItem)
-	const setBackgroundTaskProgress = useSetAtom(backgroundTaskProgressAtom)
-
-	const { mutate: moveToTrash } = useMutation({
-		mutationFn: useConvexMutation(api.filesystem.moveToTrash),
-		onMutate: () => {
-			setBackgroundTaskProgress({
-				label: "Moving to trash…",
-			})
-		},
-		onSuccess: () => {
-			setBackgroundTaskProgress(null)
-			toast.success("Moved to trash")
-		},
-		onError: (error) => {
-			toast.error("Failed to move to trash", {
-				description: formatError(error),
-			})
-		},
-	})
-
-	return (
-		<ContextMenu>
-			<ContextMenuTrigger asChild>
-				<div>{children}</div>
-			</ContextMenuTrigger>
-			{targetItem && (
-				<ContextMenuContent>
-					<ContextMenuItem>
-						<Link
-							to={`/directories/${targetItem.directoryId}`}
-							className="flex flex-row items-center gap-2"
-						>
-							<FolderInputIcon />
-							Open in directory
-						</Link>
-					</ContextMenuItem>
-					<ContextMenuItem
-						variant="destructive"
-						onClick={() => {
-							moveToTrash({
-								handles: [newFileHandle(targetItem._id)],
-							})
-						}}
-					>
-						<TrashIcon />
-						Move to trash
-					</ContextMenuItem>
-				</ContextMenuContent>
-			)}
-		</ContextMenu>
-	)
-}
--- a/apps/drive-web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx
+++ b/apps/drive-web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx
@@ -1,398 +0,0 @@
-import { api } from "@fileone/convex/api"
-import type { Doc, Id } from "@fileone/convex/dataModel"
-import {
-	type FileSystemItem,
-	FileType,
-	newFileSystemHandle,
-} from "@fileone/convex/filesystem"
-import { useMutation } from "@tanstack/react-query"
-import { createFileRoute } from "@tanstack/react-router"
-import type { Row, Table } from "@tanstack/react-table"
-import {
-	useMutation as useConvexMutation,
-	useQuery as useConvexQuery,
-} from "convex/react"
-import { atom, useAtom, useSetAtom, useStore } from "jotai"
-import { ShredderIcon, TrashIcon, UndoIcon } from "lucide-react"
-import { useCallback, useContext } from "react"
-import { toast } from "sonner"
-import { Button } from "@/components/ui/button"
-import {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuTrigger,
-} from "@/components/ui/context-menu"
-import {
-	Dialog,
-	DialogClose,
-	DialogContent,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog"
-import { WithAtom } from "@/components/with-atom"
-import { DirectoryPageContext } from "@/directories/directory-page/context"
-import { DirectoryContentTable } from "@/directories/directory-page/directory-content-table"
-import { DirectoryPageSkeleton } from "@/directories/directory-page/directory-page-skeleton"
-import { DirectoryPathBreadcrumb } from "@/directories/directory-path-breadcrumb"
-import type { FileDragInfo } from "@/files/use-file-drop"
-import { backgroundTaskProgressAtom } from "../../../dashboard/state"
-
-export const Route = createFileRoute(
-	"/_authenticated/_sidebar-layout/trash/directories/$directoryId",
-)({
-	component: RouteComponent,
-})
-
-enum ActiveDialogKind {
-	DeleteConfirmation = "DeleteConfirmation",
-	EmptyTrashConfirmation = "EmptyTrashConfirmation",
-}
-
-const contextMenuTargetItemsAtom = atom<FileSystemItem[]>([])
-const fileDragInfoAtom = atom<FileDragInfo | null>(null)
-const activeDialogAtom = atom<ActiveDialogKind | null>(null)
-const openedFileAtom = atom<Doc<"files"> | null>(null)
-const optimisticRemovedItemsAtom = atom(
-	new Set<Id<"files"> | Id<"directories">>(),
-)
-
-function RouteComponent() {
-	const { directoryId } = Route.useParams()
-	const rootDirectory = useConvexQuery(api.files.fetchRootDirectory)
-	const directory = useConvexQuery(api.files.fetchDirectory, {
-		directoryId,
-	})
-	const directoryContent = useConvexQuery(
-		api.filesystem.fetchDirectoryContent,
-		{
-			directoryId,
-			trashed: true,
-		},
-	)
-	const setContextMenuTargetItems = useSetAtom(contextMenuTargetItemsAtom)
-	const setOpenedFile = useSetAtom(openedFileAtom)
-
-	const directoryUrlFn = useCallback(
-		(directory: Doc<"directories">) =>
-			`/trash/directories/${directory._id}`,
-		[],
-	)
-
-	const directoryUrlById = useCallback(
-		(directoryId: Id<"directories">) => `/trash/directories/${directoryId}`,
-		[],
-	)
-
-	if (!directory || !directoryContent || !rootDirectory) {
-		return <DirectoryPageSkeleton />
-	}
-
-	const handleContextMenuRequest = (
-		row: Row<FileSystemItem>,
-		table: Table<FileSystemItem>,
-	) => {
-		if (row.getIsSelected()) {
-			setContextMenuTargetItems(
-				table.getSelectedRowModel().rows.map((row) => row.original),
-			)
-		} else {
-			setContextMenuTargetItems([row.original])
-		}
-	}
-
-	return (
-		<DirectoryPageContext
-			value={{ rootDirectory, directory, directoryContent }}
-		>
-			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
-				<DirectoryPathBreadcrumb
-					directory={directory}
-					rootLabel="Trash"
-					directoryUrlFn={directoryUrlById}
-				/>
-				<div className="ml-auto flex flex-row gap-2">
-					<EmptyTrashButton />
-				</div>
-			</header>
-
-			<TableContextMenu>
-				<div className="w-full">
-					<WithAtom atom={optimisticRemovedItemsAtom}>
-						{(optimisticRemovedItems) => (
-							<DirectoryContentTable
-								hiddenItems={optimisticRemovedItems}
-								directoryUrlFn={directoryUrlFn}
-								fileDragInfoAtom={fileDragInfoAtom}
-								onContextMenu={handleContextMenuRequest}
-								onOpenFile={setOpenedFile}
-							/>
-						)}
-					</WithAtom>
-				</div>
-			</TableContextMenu>
-
-			<DeleteConfirmationDialog />
-			<EmptyTrashConfirmationDialog />
-		</DirectoryPageContext>
-	)
-}
-
-function TableContextMenu({ children }: React.PropsWithChildren) {
-	const setActiveDialog = useSetAtom(activeDialogAtom)
-
-	return (
-		<ContextMenu>
-			<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
-			<ContextMenuContent>
-				<RestoreContextMenuItem />
-				<ContextMenuItem
-					variant="destructive"
-					onClick={() => {
-						setActiveDialog(ActiveDialogKind.DeleteConfirmation)
-					}}
-				>
-					<ShredderIcon />
-					Delete permanently
-				</ContextMenuItem>
-			</ContextMenuContent>
-		</ContextMenu>
-	)
-}
-
-function RestoreContextMenuItem() {
-	const store = useStore()
-	const setOptimisticRemovedItems = useSetAtom(optimisticRemovedItemsAtom)
-	const restoreItemsMutation = useConvexMutation(api.filesystem.restoreItems)
-
-	const { mutate: restoreItems } = useMutation({
-		mutationFn: restoreItemsMutation,
-		onMutate: ({ handles }) => {
-			setBackgroundTaskProgress({
-				label: "Restoring items…",
-			})
-			setOptimisticRemovedItems(
-				new Set(handles.map((handle) => handle.id)),
-			)
-		},
-		onSuccess: ({ restored, errors }) => {
-			setBackgroundTaskProgress(null)
-			if (errors.length === 0) {
-				if (restored.files > 0 && restored.directories > 0) {
-					toast.success(
-						`Restored ${restored.files} files and ${restored.directories} directories`,
-					)
-				} else if (restored.files > 0) {
-					toast.success(`Restored ${restored.files} files`)
-				} else if (restored.directories > 0) {
-					toast.success(
-						`Restored ${restored.directories} directories`,
-					)
-				}
-			} else {
-				toast.warning(
-					`Restored ${restored.files} files and ${restored.directories} directories; failed to restore ${errors.length} items`,
-				)
-			}
-		},
-		onError: (_err, { handles }) => {
-			setOptimisticRemovedItems((prev) => {
-				const newSet = new Set(prev)
-				for (const handle of handles) {
-					newSet.delete(handle.id)
-				}
-				return newSet
-			})
-		},
-	})
-	const setBackgroundTaskProgress = useSetAtom(backgroundTaskProgressAtom)
-
-	const onClick = () => {
-		const targetItems = store.get(contextMenuTargetItemsAtom)
-		restoreItems({
-			handles: targetItems.map(newFileSystemHandle),
-		})
-	}
-
-	return (
-		<ContextMenuItem onClick={onClick}>
-			<UndoIcon />
-			Restore
-		</ContextMenuItem>
-	)
-}
-
-function EmptyTrashButton() {
-	const setActiveDialog = useSetAtom(activeDialogAtom)
-
-	return (
-		<Button
-			size="sm"
-			type="button"
-			variant="destructive"
-			onClick={() => {
-				setActiveDialog(ActiveDialogKind.EmptyTrashConfirmation)
-			}}
-		>
-			<TrashIcon className="size-4" />
-			Empty trash
-		</Button>
-	)
-}
-
-function DeleteConfirmationDialog() {
-	const { rootDirectory } = useContext(DirectoryPageContext)
-	const [activeDialog, setActiveDialog] = useAtom(activeDialogAtom)
-	const [targetItems, setTargetItems] = useAtom(contextMenuTargetItemsAtom)
-	const setOptimisticRemovedItems = useSetAtom(optimisticRemovedItemsAtom)
-
-	const deletePermanentlyMutation = useConvexMutation(
-		api.filesystem.permanentlyDeleteItems,
-	)
-	const { mutate: deletePermanently, isPending: isDeleting } = useMutation({
-		mutationFn: deletePermanentlyMutation,
-		onMutate: ({ handles }) => {
-			setOptimisticRemovedItems(
-				(prev) =>
-					new Set([...prev, ...handles.map((handle) => handle.id)]),
-			)
-		},
-		onSuccess: ({ deleted, errors }, { handles }) => {
-			setOptimisticRemovedItems((prev) => {
-				const newSet = new Set(prev)
-				for (const handle of handles) {
-					newSet.delete(handle.id)
-				}
-				return newSet
-			})
-			if (errors.length === 0) {
-				toast.success(
-					`Deleted ${deleted.files} files and ${deleted.directories} directories`,
-				)
-			} else {
-				toast.warning(
-					`Deleted ${deleted.files} files and ${deleted.directories} directories; failed to delete ${errors.length} items`,
-				)
-			}
-			setActiveDialog(null)
-			setTargetItems([])
-		},
-	})
-
-	const onOpenChange = (open: boolean) => {
-		if (open) {
-			setActiveDialog(ActiveDialogKind.DeleteConfirmation)
-		} else {
-			setActiveDialog(null)
-		}
-	}
-
-	const confirmDelete = () => {
-		deletePermanently({
-			handles:
-				targetItems.length > 0
-					? targetItems.map(newFileSystemHandle)
-					: [
-							newFileSystemHandle({
-								kind: FileType.Directory,
-								doc: rootDirectory,
-							}),
-						],
-		})
-	}
-
-	return (
-		<Dialog
-			open={activeDialog === ActiveDialogKind.DeleteConfirmation}
-			onOpenChange={onOpenChange}
-		>
-			<DialogContent>
-				<DialogHeader>
-					<DialogTitle>
-						Permanently delete {targetItems.length} items?
-					</DialogTitle>
-				</DialogHeader>
-
-				<p>
-					{targetItems.length} items will be permanently deleted. They
-					will be IRRECOVERABLE.
-				</p>
-
-				<DialogFooter>
-					<DialogClose asChild>
-						<Button variant="outline" disabled={isDeleting}>
-							Go back
-						</Button>
-					</DialogClose>
-					<Button
-						variant="destructive"
-						onClick={confirmDelete}
-						disabled={isDeleting}
-						loading={isDeleting}
-					>
-						Yes, delete
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	)
-}
-
-function EmptyTrashConfirmationDialog() {
-	const [activeDialog, setActiveDialog] = useAtom(activeDialogAtom)
-
-	const { mutate: emptyTrash, isPending: isEmptying } = useMutation({
-		mutationFn: useConvexMutation(api.filesystem.emptyTrash),
-		onSuccess: () => {
-			toast.success("Trash emptied successfully")
-			setActiveDialog(null)
-		},
-	})
-
-	function onOpenChange(open: boolean) {
-		if (open) {
-			setActiveDialog(ActiveDialogKind.EmptyTrashConfirmation)
-		} else {
-			setActiveDialog(null)
-		}
-	}
-
-	function confirmEmpty() {
-		emptyTrash(undefined)
-	}
-
-	return (
-		<Dialog
-			open={activeDialog === ActiveDialogKind.EmptyTrashConfirmation}
-			onOpenChange={onOpenChange}
-		>
-			<DialogContent>
-				<DialogHeader>
-					<DialogTitle>Empty your trash?</DialogTitle>
-				</DialogHeader>
-
-				<p>
-					All items in the trash will be permanently deleted. They
-					will be IRRECOVERABLE.
-				</p>
-
-				<DialogFooter>
-					<DialogClose asChild>
-						<Button variant="outline" disabled={isEmptying}>
-							No, go back
-						</Button>
-					</DialogClose>
-					<Button
-						variant="destructive"
-						onClick={confirmEmpty}
-						disabled={isEmptying}
-						loading={isEmptying}
-					>
-						Yes, empty trash
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	)
-}
--- a/apps/drive-web/src/routes/_authenticated/index.tsx
+++ b/apps/drive-web/src/routes/_authenticated/index.tsx
@@ -5,5 +5,5 @@ export const Route = createFileRoute("/_authenticated/")({
 })

 function RouteComponent() {
-	return <Navigate replace to="/recent" />
+	return <Navigate replace to="/home" />
 }
--- a/apps/drive-web/src/routes/login.tsx
+++ b/apps/drive-web/src/routes/login.tsx
@@ -1,6 +1,8 @@
 import { useMutation } from "@tanstack/react-query"
-import { createFileRoute } from "@tanstack/react-router"
+import { createFileRoute, useNavigate } from "@tanstack/react-router"
+import { useSetAtom } from "jotai"
 import { GalleryVerticalEnd } from "lucide-react"
+import { loginMutation } from "@/auth/api"
 import { Button } from "@/components/ui/button"
 import {
 	Card,
@@ -18,7 +20,7 @@ import {
 } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
-import { type AuthErrorCode, authClient, BetterAuthError } from "../auth"
+import { currentAccountAtom } from "../account/account"

 export const Route = createFileRoute("/login")({
 	component: RouteComponent,
@@ -67,28 +69,16 @@ function LoginFormCard({ className, ...props }: React.ComponentProps<"div">) {
 }

 function LoginForm() {
-	const {
-		mutate: signIn,
-		isPending,
-		error: signInError,
-	} = useMutation({
-		mutationFn: async ({
-			email,
-			password,
-		}: {
-			email: string
-			password: string
-		}) => {
-			const { data: signInData, error } = await authClient.signIn.email({
-				email,
-				password,
-				callbackURL: "/home",
-				rememberMe: true,
+	const navigate = useNavigate()
+
+	const { mutate: signIn, isPending } = useMutation({
+		...loginMutation,
+		onSuccess: (data, vars, result, context) => {
+			loginMutation.onSuccess?.(data, vars, result, context)
+			navigate({
+				to: "/",
+				replace: true,
 			})
-			if (error) {
-				throw new BetterAuthError(error.code as AuthErrorCode)
-			}
-			return signInData
 		},
 	})

--- a/apps/drive-web/src/user/api.ts
+++ b/apps/drive-web/src/user/api.ts
@@ -0,0 +1,14 @@
+import { queryOptions } from "@tanstack/react-query"
+import { atomWithQuery } from "jotai-tanstack-query"
+import { fetchApi } from "../lib/api"
+import { User } from "./user"
+
+export const currentUserQuery = queryOptions({
+	queryKey: ["currentUser"],
+	queryFn: async () =>
+		fetchApi("GET", "/users/me", {
+			returns: User,
+		}).then(([_, result]) => result),
+})
+
+export const currentUserAtom = atomWithQuery(() => currentUserQuery)
--- a/apps/drive-web/src/user/user.ts
+++ b/apps/drive-web/src/user/user.ts
@@ -0,0 +1,9 @@
+import { type } from "arktype"
+
+export const User = type({
+	id: "string",
+	displayName: "string",
+	email: "string",
+})
+
+export type User = typeof User.infer
--- a/apps/drive-web/src/vfs/api.ts
+++ b/apps/drive-web/src/vfs/api.ts
@@ -0,0 +1,255 @@
+import { mutationOptions, queryOptions, skipToken } from "@tanstack/react-query"
+import { type } from "arktype"
+import { atom } from "jotai"
+import { atomFamily } from "jotai/utils"
+import { currentAccountAtom } from "@/account/account"
+import { fetchApi } from "@/lib/api"
+import {
+	DirectoryContent,
+	DirectoryInfo,
+	DirectoryInfoWithPath,
+	DirectoryItem,
+	FileInfo,
+} from "./vfs"
+
+/**
+ * This atom derives the file url for a given file.
+ * It is recommended to use {@link useFileUrl} instead of using this atom directly.
+ */
+export const fileUrlAtom = atomFamily((fileId: string) =>
+	atom((get) => {
+		const account = get(currentAccountAtom)
+		if (!account) {
+			return ""
+		}
+		return `${import.meta.env.VITE_API_URL}/accounts/${account.id}/files/${fileId}/content`
+	}),
+)
+
+export const rootDirectoryQueryAtom = atom((get) => {
+	const account = get(currentAccountAtom)
+	return queryOptions({
+		queryKey: ["accounts", account?.id, "directories", "root"],
+		queryFn: account
+			? () =>
+					fetchApi(
+						"GET",
+						`/accounts/${account.id}/directories/root?include=path`,
+						{ returns: DirectoryInfoWithPath },
+					).then(([_, result]) => result)
+			: skipToken,
+	})
+})
+
+export const directoryInfoQueryAtom = atomFamily((directoryId: string) =>
+	atom((get) => {
+		const account = get(currentAccountAtom)
+		return queryOptions({
+			queryKey: ["accounts", account?.id, "directories", directoryId],
+			queryFn: account
+				? () =>
+						fetchApi(
+							"GET",
+							`/accounts/${account.id}/directories/${directoryId}?include=path`,
+							{ returns: DirectoryInfoWithPath },
+						).then(([_, result]) => result)
+				: skipToken,
+		})
+	}),
+)
+
+export const directoryContentQueryAtom = atomFamily((directoryId: string) =>
+	atom((get) => {
+		const account = get(currentAccountAtom)
+		return queryOptions({
+			queryKey: [
+				"accounts",
+				account?.id,
+				"directories",
+				directoryId,
+				"content",
+			],
+			queryFn: account
+				? () =>
+						fetchApi(
+							"GET",
+							`/accounts/${account.id}/directories/${directoryId}/content`,
+							{ returns: DirectoryContent },
+						).then(([_, result]) => result)
+				: skipToken,
+		})
+	}),
+)
+
+// Directory Mutations
+
+export const createDirectoryMutationAtom = atom((get) => {
+	const account = get(currentAccountAtom)
+	return mutationOptions({
+		mutationFn: async (data: { name: string; parentId: string }) => {
+			if (!account) throw new Error("No account selected")
+			return fetchApi("POST", `/accounts/${account.id}/directories`, {
+				body: JSON.stringify({
+					name: data.name,
+					parentId: data.parentId,
+				}),
+				returns: DirectoryInfoWithPath,
+			}).then(([_, result]) => result)
+		},
+		onSuccess: (data, _variables, _context, { client }) => {
+			client.setQueryData(
+				get(directoryInfoQueryAtom(data.id)).queryKey,
+				data,
+			)
+		},
+	})
+})
+
+export const MoveDirectoryItemsResult = type({
+	items: DirectoryItem.array(),
+	moved: "string[]",
+	conflicts: "string[]",
+	errors: type({
+		id: "string",
+		error: "string",
+	}).array(),
+})
+export type MoveDirectoryItemsResult = typeof MoveDirectoryItemsResult.infer
+
+export const moveDirectoryItemsMutationAtom = atom((get) =>
+	mutationOptions({
+		mutationFn: async ({
+			targetDirectory,
+			items,
+		}: {
+			targetDirectory: DirectoryInfo | string
+			items: DirectoryItem[]
+		}) => {
+			const account = get(currentAccountAtom)
+			if (!account) {
+				throw new Error("Account not found")
+			}
+
+			const dirId =
+				typeof targetDirectory === "string"
+					? targetDirectory
+					: targetDirectory.id
+
+			const [, result] = await fetchApi(
+				"POST",
+				`/accounts/${account.id}/directories/${dirId}/content`,
+				{
+					body: JSON.stringify({
+						items: items.map((item) => item.id),
+					}),
+					returns: MoveDirectoryItemsResult,
+				},
+			)
+			return result
+		},
+	}),
+)
+
+export const moveToTrashMutationAtom = atom((get) =>
+	mutationOptions({
+		mutationFn: async (items: DirectoryItem[]) => {
+			const account = get(currentAccountAtom)
+			if (!account) {
+				throw new Error("Account not found")
+			}
+
+			const fileIds: string[] = []
+			const directoryIds: string[] = []
+			for (const item of items) {
+				switch (item.kind) {
+					case "file":
+						fileIds.push(item.id)
+						break
+					case "directory":
+						directoryIds.push(item.id)
+						break
+				}
+			}
+
+			const fileDeleteParams = new URLSearchParams()
+			fileDeleteParams.set("id", fileIds.join(","))
+			fileDeleteParams.set("trash", "true")
+			const deleteFilesPromise = fetchApi(
+				"DELETE",
+				`/accounts/${account.id}/files?${fileDeleteParams.toString()}`,
+				{
+					returns: FileInfo.array(),
+				},
+			)
+
+			const directoryDeleteParams = new URLSearchParams()
+			directoryDeleteParams.set("id", directoryIds.join(","))
+			directoryDeleteParams.set("trash", "true")
+			const deleteDirectoriesPromise = fetchApi(
+				"DELETE",
+				`/accounts/${account.id}/directories?${directoryDeleteParams.toString()}`,
+				{
+					returns: DirectoryInfo.array(),
+				},
+			)
+
+			const [[, deletedFiles], [, deletedDirectories]] =
+				await Promise.all([
+					deleteFilesPromise,
+					deleteDirectoriesPromise,
+				])
+
+			return [...deletedFiles, ...deletedDirectories]
+		},
+	}),
+)
+
+export const renameFileMutationAtom = atom((get) =>
+	mutationOptions({
+		mutationFn: async (file: FileInfo) => {
+			const account = get(currentAccountAtom)
+			if (!account) {
+				throw new Error("Account not found")
+			}
+
+			const [, result] = await fetchApi(
+				"PATCH",
+				`/accounts/${account.id}/files/${file.id}`,
+				{
+					body: JSON.stringify({ name: file.name }),
+					returns: FileInfo,
+				},
+			)
+
+			return result
+		},
+	}),
+)
+
+export const renameDirectoryMutationAtom = atom((get) =>
+	mutationOptions({
+		mutationFn: async (directory: DirectoryInfo) => {
+			const account = get(currentAccountAtom)
+			if (!account) {
+				throw new Error("Account not found")
+			}
+
+			const [, result] = await fetchApi(
+				"PATCH",
+				`/accounts/${account.id}/directories/${directory.id}`,
+				{
+					body: JSON.stringify({ name: directory.name }),
+					returns: DirectoryInfo,
+				},
+			)
+
+			return result
+		},
+		onSuccess: (data, _variables, _context, { client }) => {
+			client.setQueryData(
+				get(directoryInfoQueryAtom(data.id)).queryKey,
+				(prev) => (prev ? { ...prev, name: data.name } : undefined),
+			)
+		},
+	}),
+)
--- a/apps/drive-web/src/vfs/hooks.ts
+++ b/apps/drive-web/src/vfs/hooks.ts
@@ -0,0 +1,15 @@
+import { useAtomValue } from "jotai"
+import { useEffect } from "react"
+import { fileUrlAtom } from "./api"
+import type { FileInfo } from "./vfs"
+
+export function useFileUrl(file: FileInfo) {
+	const fileUrl = useAtomValue(fileUrlAtom(file.id))
+	useEffect(
+		() => () => {
+			fileUrlAtom.remove(file.id)
+		},
+		[file.id],
+	)
+	return fileUrl
+}
--- a/apps/drive-web/src/vfs/vfs.ts
+++ b/apps/drive-web/src/vfs/vfs.ts
@@ -0,0 +1,35 @@
+import { type } from "arktype"
+import { Path } from "@/lib/path"
+
+export const FileInfo = type({
+	kind: "'file'",
+	id: "string",
+	name: "string",
+	size: "number",
+	mimeType: "string",
+	createdAt: "string.date.iso.parse",
+	updatedAt: "string.date.iso.parse",
+	"deletedAt?": "string.date.iso.parse",
+})
+export type FileInfo = typeof FileInfo.infer
+
+export const DirectoryInfo = type({
+	kind: "'directory'",
+	id: "string",
+	name: "string",
+	createdAt: "string.date.iso.parse",
+	updatedAt: "string.date.iso.parse",
+	"deletedAt?": "string.date.iso.parse",
+})
+export type DirectoryInfo = typeof DirectoryInfo.infer
+
+export const DirectoryInfoWithPath = DirectoryInfo.and({
+	path: Path,
+})
+export type DirectoryInfoWithPath = typeof DirectoryInfoWithPath.infer
+
+export const DirectoryItem = type.or(DirectoryInfo, FileInfo)
+export type DirectoryItem = typeof DirectoryItem.infer
+
+export const DirectoryContent = DirectoryItem.array()
+export type DirectoryContent = typeof DirectoryContent.infer
--- a/apps/drive-web/src/vite-env.d.ts
+++ b/apps/drive-web/src/vite-env.d.ts
@@ -2,8 +2,11 @@

 declare global {
 	interface ImportMetaEnv {
-		readonly VITE_CONVEX_URL: string
-		readonly VITE_CONVEX_SITE_URL: string
+		readonly VITE_API_URL: string
+	}
+
+	interface ImportMeta {
+		readonly env: ImportMetaEnv
 	}
 }