fix: broken dir path breadcrumb links

packages/web/src/directories/directory-page/file-path-breadcrumb.tsx

@@ -1,6 +1,7 @@
+import type { Id } from "@fileone/convex/_generated/dataModel"
 import type {
 	DirectoryHandle,
-	PathComponent,
+	DirectoryPathComponent,
 } from "@fileone/convex/model/filesystem"
 import { Link } from "@tanstack/react-router"
 import { Fragment, useContext } from "react"
@@ -22,7 +23,13 @@ import { cn } from "../../lib/utils"
 import { DirectoryPageContext } from "./context"
 import { dragInfoAtom } from "./state"
 
-export function FilePathBreadcrumb({ rootLabel }: { rootLabel: string }) {
+export function FilePathBreadcrumb({
+	rootLabel,
+	directoryUrlFn,
+}: {
+	rootLabel: string
+	directoryUrlFn: (directory: Id<"directories">) => string
+}) {
 	const { rootDirectory, directory } = useContext(DirectoryPageContext)
 
 	const breadcrumbItems: React.ReactNode[] = []
@@ -33,6 +40,7 @@ export function FilePathBreadcrumb({ rootLabel }: { rootLabel: string }) {
 				<FilePathBreadcrumbItem
 					component={directory.path[i]!}
 					rootLabel={rootLabel}
+					directoryUrlFn={directoryUrlFn}
 				/>
 			</Fragment>,
 		)
@@ -49,6 +57,7 @@ export function FilePathBreadcrumb({ rootLabel }: { rootLabel: string }) {
 					<FilePathBreadcrumbItem
 						component={directory.path[0]!}
 						rootLabel={rootLabel}
+						directoryUrlFn={directoryUrlFn}
 					/>
 				)}
 				{breadcrumbItems}
@@ -64,9 +73,11 @@ export function FilePathBreadcrumb({ rootLabel }: { rootLabel: string }) {
 function FilePathBreadcrumbItem({
 	component,
 	rootLabel,
+	directoryUrlFn,
 }: {
-	component: PathComponent
+	component: DirectoryPathComponent
 	rootLabel: string
+	directoryUrlFn: (directory: Id<"directories">) => string
 }) {
 	const { isDraggedOver, dropHandlers } = useFileDrop({
 		destItem: component.handle as DirectoryHandle,
@@ -83,7 +94,7 @@ function FilePathBreadcrumbItem({
 					{...dropHandlers}
 				>
 					<BreadcrumbLink asChild>
-						<Link to={`/directories/${component.handle.id}`}>
+						<Link to={directoryUrlFn(component.handle.id)}>
 							{dirName}
 						</Link>
 					</BreadcrumbLink>

packages/web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx

@@ -104,6 +104,11 @@ function RouteComponent() {
 		[],
 	)
 
+	const directoryUrlById = useCallback(
+		(directoryId: Id<"directories">) => `/directories/${directoryId}`,
+		[],
+	)
+
 	const handleContextMenuRequest = (
 		row: Row<FileSystemItem>,
 		table: Table<FileSystemItem>,
@@ -126,7 +131,10 @@ function RouteComponent() {
 			value={{ rootDirectory, directory, directoryContent }}
 		>
 			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
-				<FilePathBreadcrumb rootLabel="All Files" />
+				<FilePathBreadcrumb
+					rootLabel="All Files"
+					directoryUrlFn={directoryUrlById}
+				/>
 				<div className="ml-auto flex flex-row gap-2">
 					<NewDirectoryItemDropdown />
 					<UploadFileButton />

packages/web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx

@@ -11,7 +11,7 @@ import {
 	useMutation as useConvexMutation,
 	useQuery as useConvexQuery,
 } from "convex/react"
-import { atom, useAtom, useAtomValue, useSetAtom, useStore } from "jotai"
+import { atom, useAtom, useSetAtom, useStore } from "jotai"
 import { ShredderIcon, TrashIcon, UndoIcon } from "lucide-react"
 import { useCallback, useEffect } from "react"
 import { toast } from "sonner"
@@ -75,6 +75,11 @@ function RouteComponent() {
 		[],
 	)
 
+	const directoryUrlById = useCallback(
+		(directoryId: Id<"directories">) => `/trash/directories/${directoryId}`,
+		[],
+	)
+
 	if (!directory || !directoryContent || !rootDirectory) {
 		return <DirectoryPageSkeleton />
 	}
@@ -97,7 +102,10 @@ function RouteComponent() {
 			value={{ rootDirectory, directory, directoryContent }}
 		>
 			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
-				<FilePathBreadcrumb rootLabel="Trash" />
+				<FilePathBreadcrumb
+					rootLabel="Trash"
+					directoryUrlFn={directoryUrlById}
+				/>
 				<div className="ml-auto flex flex-row gap-2">
 					<EmptyTrashButton />
 				</div>