feat: basic recent file browsing

apps/drive-web/src/files/file-grid.tsx

@@ -0,0 +1,19 @@
+import type { Doc } from "@fileone/convex/dataModel"
+import { TextFileIcon } from "../components/icons/text-file-icon"
+import { MiddleTruncatedText } from "../components/ui/middle-truncated-text"
+
+export function FileGrid({ files }: { files: Doc<"files">[] }) {
+	return (
+		<div className="grid auto-cols-max grid-flow-col gap-4">
+			{files.map((file) => (
+				<div
+					key={file._id}
+					className="flex flex-col gap-2 items-center justify-center w-24"
+				>
+					<TextFileIcon className="size-10" />
+					<MiddleTruncatedText>{file.name}</MiddleTruncatedText>
+				</div>
+			))}
+		</div>
+	)
+}