fix: broken dir path breadcrumb links

packages/convex/model/directories.ts

@@ -6,14 +6,13 @@ import type {
 import * as Err from "./error"
 import {
 	type DirectoryHandle,
-	type FilePath,
+	type DirectoryPath,
 	type FileSystemItem,
 	FileType,
 	newDirectoryHandle,
-	type ReverseFilePath,
 } from "./filesystem"
 
-export type DirectoryInfo = Doc<"directories"> & { path: FilePath }
+export type DirectoryInfo = Doc<"directories"> & { path: DirectoryPath }
 
 export async function fetchRoot(ctx: AuthenticatedQueryCtx) {
 	return await ctx.db
@@ -50,7 +49,7 @@ export async function fetch(
 		)
 	}
 
-	const path: ReverseFilePath = [
+	const path: DirectoryPath = [
 		{
 			handle: newDirectoryHandle(directoryId),
 			name: directory.name,
@@ -70,7 +69,7 @@ export async function fetch(
 		}
 	}
 
-	return { ...directory, path: path.reverse() as FilePath }
+	return { ...directory, path: path.reverse() as DirectoryPath }
 }
 
 export async function fetchContent(

packages/convex/model/filesystem.ts

@@ -29,6 +29,10 @@ export type FilePathComponent = {
 	name: string
 }
 export type PathComponent = FilePathComponent | DirectoryPathComponent
+export type DirectoryPath = [
+	DirectoryPathComponent,
+	...DirectoryPathComponent[],
+]
 export type FilePath = [...DirectoryPathComponent[], PathComponent]
 export type ReverseFilePath = [PathComponent, ...DirectoryPathComponent[]]
 
@@ -154,10 +158,8 @@ export async function restoreItems(
 	{ handles }: { handles: FileSystemHandle[] },
 ) {
 	// Collect all items to restore (including nested items)
-	const { fileHandles, directoryHandles } = await collectAllHandlesRecursively(
-		ctx,
-		{ handles },
-	)
+	const { fileHandles, directoryHandles } =
+		await collectAllHandlesRecursively(ctx, { handles })
 
 	// Restore files and directories by unsetting deletedAt
 	const [filesResult, directoriesResult] = await Promise.all([
@@ -183,8 +185,10 @@ export async function deleteItemsPermanently(
 	{ handles }: { handles: FileSystemHandle[] },
 ) {
 	// Collect all items to delete (including nested items)
-	const { fileHandles: fileHandlesToDelete, directoryHandles: directoryHandlesToDelete } = 
-		await collectAllHandlesRecursively(ctx, { handles })
+	const {
+		fileHandles: fileHandlesToDelete,
+		directoryHandles: directoryHandlesToDelete,
+	} = await collectAllHandlesRecursively(ctx, { handles })
 
 	// Delete files and directories using their respective models
 	const [filesResult, directoriesResult] = await Promise.all([

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>