drexa/drive
1
0
Fork 0
mirror of https://github.com/get-drexa/drive.git synced 2025-11-30 21:41:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make dir path breadcrumb generic

Browse Source
This commit is contained in:
Kenneth
2025-10-18 19:55:14 +00:00
parent cd9dee9371
commit 1ae649850a
4 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/drive-web/src/directories/directory-page/file-path-breadcrumb.tsx → apps/drive-web/src/directories/directory-path-breadcrumb.tsx
View File

@@ -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>

1
apps/drive-web/src/files/use-file-drop.ts
View File

@@ -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"

6
apps/drive-web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx
View File

@@ -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 />

4
apps/drive-web/src/routes/_authenticated/_sidebar-layout/trash.directories.$directoryId.tsx
View File

@@ -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}
/>