refactor: initial frontend wiring for new api

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 },