feat: impl file path breadcrumb nav

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

@@ -1,7 +1,7 @@
 import { api } from "@fileone/convex/_generated/api"
-import { splitPath } from "@fileone/path"
+import { baseName, splitPath } from "@fileone/path"
 import { useMutation } from "@tanstack/react-query"
-import { useParams } from "@tanstack/react-router"
+import { Link } from "@tanstack/react-router"
 import { useMutation as useConvexMutation } from "convex/react"
 import { useSetAtom } from "jotai"
 import {
@@ -23,6 +23,7 @@ import { TextFileIcon } from "../components/icons/text-file-icon"
 import {
 	Breadcrumb,
 	BreadcrumbItem,
+	BreadcrumbLink,
 	BreadcrumbList,
 	BreadcrumbPage,
 	BreadcrumbSeparator,
@@ -35,21 +36,7 @@ export function FilesPage({ path }: { path: string }) {
 	return (
 		<>
 			<header className="flex py-1 shrink-0 items-center gap-2 border-b px-4 w-full">
-				<Breadcrumb>
+				<FilePathBreadcrumb path={path} />
-					<BreadcrumbList>
-						<BreadcrumbItem>
-							<BreadcrumbPage>All Files</BreadcrumbPage>
-						</BreadcrumbItem>
-						{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">
 					<NewDirectoryItemDropdown />
 					<UploadFileButton />
@@ -62,6 +49,36 @@ export function FilesPage({ path }: { path: string }) {
 	)
 }
 
+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)