feat: basic directory navigation

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

@@ -1,6 +1,8 @@
 import { api } from "@fileone/convex/_generated/api"
+import type { Doc } from "@fileone/convex/_generated/dataModel"
 import type { DirectoryItem } from "@fileone/convex/model/directories"
 import { useMutation } from "@tanstack/react-query"
+import { Link } from "@tanstack/react-router"
 import {
 	type ColumnDef,
 	flexRender,
@@ -81,12 +83,7 @@ const columns: ColumnDef<DirectoryItem>[] = [
 				case "file":
 					return <FileNameCell initialName={row.original.doc.name} />
 				case "directory":
-					return (
-						<div className="flex w-full items-center gap-2">
-							<DirectoryIcon className="size-4" />
-							{row.original.doc.name}
-						</div>
-					)
+					return <DirectoryNameCell directory={row.original.doc} />
 			}
 		},
 		size: 1000,
@@ -116,11 +113,11 @@ const columns: ColumnDef<DirectoryItem>[] = [
 	},
 ]
 
-export function FileTable() {
+export function FileTable({ path }: { path: string }) {
 	return (
 		<FileTableContextMenu>
 			<div className="w-full">
-				<FileTableContent />
+				<FileTableContent path={path} />
 			</div>
 		</FileTableContextMenu>
 	)
@@ -184,8 +181,8 @@ export function FileTableContextMenu({
 	)
 }
 
-export function FileTableContent() {
-	const directory = useQuery(api.files.fetchDirectoryContent, {})
+export function FileTableContent({ path }: { path: string }) {
+	const directory = useQuery(api.files.fetchDirectoryContent, { path })
 	const optimisticDeletedItems = useAtomValue(optimisticDeletedItemsAtom)
 	const setContextMenuTargetItem = useSetAtom(contextMenuTargeItemAtom)
 
@@ -377,6 +374,17 @@ function NewItemRow() {
 	)
 }
 
+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">

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

@@ -1,5 +1,7 @@
 import { api } from "@fileone/convex/_generated/api"
+import { splitPath } from "@fileone/path"
 import { useMutation } from "@tanstack/react-query"
+import { useParams } from "@tanstack/react-router"
 import { useMutation as useConvexMutation } from "convex/react"
 import { useSetAtom } from "jotai"
 import {
@@ -8,7 +10,7 @@ import {
 	PlusIcon,
 	UploadCloudIcon,
 } from "lucide-react"
-import { type ChangeEvent, useRef } from "react"
+import { type ChangeEvent, Fragment, useRef } from "react"
 import { toast } from "sonner"
 import {
 	DropdownMenu,
@@ -29,16 +31,23 @@ import { Button } from "../components/ui/button"
 import { FileTable } from "./file-table"
 import { newItemKindAtom } from "./state"
 
-export function FilesPage() {
+export function FilesPage({ path }: { path: string }) {
 	return (
 		<>
-			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
+			<header className="flex py-1 shrink-0 items-center gap-2 border-b px-4 w-full">
 				<Breadcrumb>
 					<BreadcrumbList>
 						<BreadcrumbItem>
 							<BreadcrumbPage>All Files</BreadcrumbPage>
 						</BreadcrumbItem>
-						<BreadcrumbSeparator />
+						{splitPath(path).map((p) => (
+							<Fragment key={p}>
+								<BreadcrumbSeparator />
+								<BreadcrumbItem>
+									<BreadcrumbPage>{p}</BreadcrumbPage>
+								</BreadcrumbItem>
+							</Fragment>
+						))}
 					</BreadcrumbList>
 				</Breadcrumb>
 				<div className="ml-auto flex flex-row gap-2">
@@ -47,7 +56,7 @@ export function FilesPage() {
 				</div>
 			</header>
 			<div className="w-full">
-				<FileTable />
+				<FileTable path={path} />
 			</div>
 		</>
 	)