From 1ae649850a326dff52fa7ddb1a39acf51e73407c Mon Sep 17 00:00:00 2001
From: kenneth <kenneth@nym.sh>
Date: Sat, 18 Oct 2025 19:55:14 +0000
Subject: [PATCH] feat: make dir path breadcrumb generic

---
 ...rumb.tsx => directory-path-breadcrumb.tsx} | 51 ++++++++++---------
 apps/drive-web/src/files/use-file-drop.ts     |  1 -
 .../directories.$directoryId.tsx              |  6 ++-
 .../trash.directories.$directoryId.tsx        |  4 +-
 4 files changed, 32 insertions(+), 30 deletions(-)
 rename apps/drive-web/src/directories/{directory-page/file-path-breadcrumb.tsx => directory-path-breadcrumb.tsx} (66%)

diff --git a/apps/drive-web/src/directories/directory-page/file-path-breadcrumb.tsx b/apps/drive-web/src/directories/directory-path-breadcrumb.tsx
similarity index 66%
rename from apps/drive-web/src/directories/directory-page/file-path-breadcrumb.tsx
rename to apps/drive-web/src/directories/directory-path-breadcrumb.tsx
index 0da4a2c..b12c2c4 100644
--- a/apps/drive-web/src/directories/directory-page/file-path-breadcrumb.tsx
+++ b/apps/drive-web/src/directories/directory-path-breadcrumb.tsx
@@ -3,8 +3,10 @@ import type {
 	DirectoryHandle,
 	DirectoryPathComponent,
 } from "@fileone/convex/filesystem"
+import type { DirectoryInfo } from "@fileone/convex/types"
 import { Link } from "@tanstack/react-router"
-import { Fragment, useContext } from "react"
+import type { PrimitiveAtom } from "jotai"
+import { Fragment } from "react"
 import {
 	Breadcrumb,
 	BreadcrumbItem,
@@ -12,27 +14,36 @@ import {
 	BreadcrumbList,
 	BreadcrumbPage,
 	BreadcrumbSeparator,
-} from "../../components/ui/breadcrumb"
+} from "@/components/ui/breadcrumb"
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
-} from "../../components/ui/tooltip"
-import { useFileDrop } from "../../files/use-file-drop"
-import { cn } from "../../lib/utils"
-import { DirectoryPageContext } from "./context"
-import { dragInfoAtom } from "./state"
+} from "@/components/ui/tooltip"
+import type { FileDragInfo } from "@/files/use-file-drop"
+import { useFileDrop } from "@/files/use-file-drop"
+import { cn } from "@/lib/utils"
 
-export function FilePathBreadcrumb({
+export function DirectoryPathBreadcrumb({
+	directory,
 	rootLabel,
 	directoryUrlFn,
+	fileDragInfoAtom,
 }: {
+	directory: DirectoryInfo
 	rootLabel: string
 	directoryUrlFn: (directory: Id<"directories">) => string
+	fileDragInfoAtom: PrimitiveAtom<FileDragInfo | null>
 }) {
-	const { rootDirectory, directory } = useContext(DirectoryPageContext)
-
-	const breadcrumbItems: React.ReactNode[] = []
+	const breadcrumbItems: React.ReactNode[] = [
+		<FilePathBreadcrumbItem
+			key={directory.path[0].handle.id}
+			component={directory.path[0]}
+			rootLabel={rootLabel}
+			directoryUrlFn={directoryUrlFn}
+			fileDragInfoAtom={fileDragInfoAtom}
+		/>,
+	]
 	for (let i = 1; i < directory.path.length - 1; i++) {
 		breadcrumbItems.push(
 			<Fragment key={directory.path[i]?.handle.id}>
@@ -41,6 +52,7 @@ export function FilePathBreadcrumb({
 					component={directory.path[i]!}
 					rootLabel={rootLabel}
 					directoryUrlFn={directoryUrlFn}
+					fileDragInfoAtom={fileDragInfoAtom}
 				/>
 			</Fragment>,
 		)
@@ -49,17 +61,6 @@ export function FilePathBreadcrumb({
 	return (
 		<Breadcrumb>
 			<BreadcrumbList>
-				{rootDirectory._id === directory._id ? (
-					<BreadcrumbItem>
-						<BreadcrumbPage>{rootLabel}</BreadcrumbPage>
-					</BreadcrumbItem>
-				) : (
-					<FilePathBreadcrumbItem
-						component={directory.path[0]!}
-						rootLabel={rootLabel}
-						directoryUrlFn={directoryUrlFn}
-					/>
-				)}
 				{breadcrumbItems}
 				<BreadcrumbSeparator />
 				<BreadcrumbItem>
@@ -74,20 +75,20 @@ function FilePathBreadcrumbItem({
 	component,
 	rootLabel,
 	directoryUrlFn,
+	fileDragInfoAtom,
 }: {
 	component: DirectoryPathComponent
 	rootLabel: string
 	directoryUrlFn: (directory: Id<"directories">) => string
+	fileDragInfoAtom: PrimitiveAtom<FileDragInfo | null>
 }) {
 	const { isDraggedOver, dropHandlers } = useFileDrop({
 		destItem: component.handle as DirectoryHandle,
-		dragInfoAtom,
+		dragInfoAtom: fileDragInfoAtom,
 	})
 
 	const dirName = component.name || rootLabel
 
-	console.log({ dirName, isDraggedOver, dropHandlers })
-
 	return (
 		<Tooltip open={isDraggedOver}>
 			<TooltipTrigger asChild>
diff --git a/apps/drive-web/src/files/use-file-drop.ts b/apps/drive-web/src/files/use-file-drop.ts
index 3ab2373..f2bee92 100644
--- a/apps/drive-web/src/files/use-file-drop.ts
+++ b/apps/drive-web/src/files/use-file-drop.ts
@@ -88,7 +88,6 @@ export function useFileDrop({
 
 	const handleDragOver = (e: React.DragEvent) => {
 		const dragInfo = store.get(dragInfoAtom)
-		console.log({ dragInfo, destItem })
 		if (dragInfo && destItem) {
 			e.preventDefault()
 			e.dataTransfer.dropEffect = "move"
diff --git a/apps/drive-web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx b/apps/drive-web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx
index 61b6b3e..4a98138 100644
--- a/apps/drive-web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx
+++ b/apps/drive-web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx
@@ -40,9 +40,9 @@ import { WithAtom } from "@/components/with-atom"
 import { DirectoryPageContext } from "@/directories/directory-page/context"
 import { DirectoryContentTable } from "@/directories/directory-page/directory-content-table"
 import { DirectoryPageSkeleton } from "@/directories/directory-page/directory-page-skeleton"
-import { FilePathBreadcrumb } from "@/directories/directory-page/file-path-breadcrumb"
 import { NewDirectoryDialog } from "@/directories/directory-page/new-directory-dialog"
 import { RenameFileDialog } from "@/directories/directory-page/rename-file-dialog"
+import { DirectoryPathBreadcrumb } from "@/directories/directory-path-breadcrumb"
 import { FilePreviewDialog } from "@/files/file-preview-dialog"
 import { inProgressFileUploadCountAtom } from "@/files/store"
 import { UploadFileDialog } from "@/files/upload-file-dialog"
@@ -146,9 +146,11 @@ function RouteComponent() {
 			value={{ rootDirectory, directory, directoryContent }}
 		>
 			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
-				<FilePathBreadcrumb
+				<DirectoryPathBreadcrumb
+					directory={directory}
 					rootLabel="All Files"
 					directoryUrlFn={directoryUrlById}
+					fileDragInfoAtom={fileDragInfoAtom}
 				/>
 				<div className="ml-auto flex flex-row gap-2">
 					<NewDirectoryItemDropdown />
diff --git a/apps/drive-web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx b/apps/drive-web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx
index bd0720e..4df4958 100644
--- a/apps/drive-web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx
+++ b/apps/drive-web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx
@@ -35,7 +35,7 @@ import { WithAtom } from "@/components/with-atom"
 import { DirectoryPageContext } from "@/directories/directory-page/context"
 import { DirectoryContentTable } from "@/directories/directory-page/directory-content-table"
 import { DirectoryPageSkeleton } from "@/directories/directory-page/directory-page-skeleton"
-import { FilePathBreadcrumb } from "@/directories/directory-page/file-path-breadcrumb"
+import { DirectoryPathBreadcrumb } from "@/directories/directory-path-breadcrumb"
 import { FilePreviewDialog } from "@/files/file-preview-dialog"
 import type { FileDragInfo } from "@/files/use-file-drop"
 import { backgroundTaskProgressAtom } from "../../../dashboard/state"
@@ -108,7 +108,7 @@ function RouteComponent() {
 			value={{ rootDirectory, directory, directoryContent }}
 		>
 			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
-				<FilePathBreadcrumb
+				<DirectoryPathBreadcrumb
 					rootLabel="Trash"
 					directoryUrlFn={directoryUrlById}
 				/>