feat: basic directory navigation

2025-09-17 00:04:12 +00:00
parent c7fb40e8eb
commit 44ce32fd84
17 changed files with 456 additions and 47 deletions
--- a/packages/web/src/files/file-table.tsx
+++ b/packages/web/src/files/file-table.tsx
@@ -1,6 +1,8 @@
 import { api } from "@fileone/convex/_generated/api"
+import type { Doc } from "@fileone/convex/_generated/dataModel"
 import type { DirectoryItem } from "@fileone/convex/model/directories"
 import { useMutation } from "@tanstack/react-query"
+import { Link } from "@tanstack/react-router"
 import {
 	type ColumnDef,
 	flexRender,
@@ -81,12 +83,7 @@ const columns: ColumnDef<DirectoryItem>[] = [
 				case "file":
 					return <FileNameCell initialName={row.original.doc.name} />
 				case "directory":
-					return (
-						<div className="flex w-full items-center gap-2">
-							<DirectoryIcon className="size-4" />
-							{row.original.doc.name}
-						</div>
-					)
+					return <DirectoryNameCell directory={row.original.doc} />
 			}
 		},
 		size: 1000,
@@ -116,11 +113,11 @@ const columns: ColumnDef<DirectoryItem>[] = [
 	},
 ]

-export function FileTable() {
+export function FileTable({ path }: { path: string }) {
 	return (
 		<FileTableContextMenu>
 			<div className="w-full">
-				<FileTableContent />
+				<FileTableContent path={path} />
 			</div>
 		</FileTableContextMenu>
 	)
@@ -184,8 +181,8 @@ export function FileTableContextMenu({
 	)
 }

-export function FileTableContent() {
-	const directory = useQuery(api.files.fetchDirectoryContent, {})
+export function FileTableContent({ path }: { path: string }) {
+	const directory = useQuery(api.files.fetchDirectoryContent, { path })
 	const optimisticDeletedItems = useAtomValue(optimisticDeletedItemsAtom)
 	const setContextMenuTargetItem = useSetAtom(contextMenuTargeItemAtom)

@@ -377,6 +374,17 @@ function NewItemRow() {
 	)
 }

+function DirectoryNameCell({ directory }: { directory: Doc<"directories"> }) {
+	return (
+		<div className="flex w-full items-center gap-2">
+			<DirectoryIcon className="size-4" />
+			<Link className="hover:underline" to={`/files/${directory.path}`}>
+				{directory.name}
+			</Link>
+		</div>
+	)
+}
+
 function FileNameCell({ initialName }: { initialName: string }) {
 	return (
 		<div className="flex w-full items-center gap-2">
--- a/packages/web/src/files/files-page.tsx
+++ b/packages/web/src/files/files-page.tsx
@@ -1,5 +1,7 @@
 import { api } from "@fileone/convex/_generated/api"
+import { splitPath } from "@fileone/path"
 import { useMutation } from "@tanstack/react-query"
+import { useParams } from "@tanstack/react-router"
 import { useMutation as useConvexMutation } from "convex/react"
 import { useSetAtom } from "jotai"
 import {
@@ -8,7 +10,7 @@ import {
 	PlusIcon,
 	UploadCloudIcon,
 } from "lucide-react"
-import { type ChangeEvent, useRef } from "react"
+import { type ChangeEvent, Fragment, useRef } from "react"
 import { toast } from "sonner"
 import {
 	DropdownMenu,
@@ -29,16 +31,23 @@ import { Button } from "../components/ui/button"
 import { FileTable } from "./file-table"
 import { newItemKindAtom } from "./state"

-export function FilesPage() {
+export function FilesPage({ path }: { path: string }) {
 	return (
 		<>
-			<header className="flex py-2 shrink-0 items-center gap-2 border-b px-4 w-full">
+			<header className="flex py-1 shrink-0 items-center gap-2 border-b px-4 w-full">
 				<Breadcrumb>
 					<BreadcrumbList>
 						<BreadcrumbItem>
 							<BreadcrumbPage>All Files</BreadcrumbPage>
 						</BreadcrumbItem>
-						<BreadcrumbSeparator />
+						{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">
@@ -47,7 +56,7 @@ export function FilesPage() {
 				</div>
 			</header>
 			<div className="w-full">
-				<FileTable />
+				<FileTable path={path} />
 			</div>
 		</>
 	)
--- a/packages/web/src/routeTree.gen.ts
+++ b/packages/web/src/routeTree.gen.ts
@@ -14,7 +14,7 @@ import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
 import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
 import { Route as LoginCallbackRouteImport } from './routes/login_.callback'
 import { Route as AuthenticatedSidebarLayoutRouteImport } from './routes/_authenticated/_sidebar-layout'
-import { Route as AuthenticatedSidebarLayoutFilesRouteImport } from './routes/_authenticated/_sidebar-layout/files'
+import { Route as AuthenticatedSidebarLayoutFilesSplatRouteImport } from './routes/_authenticated/_sidebar-layout/files.$'

 const LoginRoute = LoginRouteImport.update({
  id: '/login',
@@ -40,10 +40,10 @@ const AuthenticatedSidebarLayoutRoute =
    id: '/_sidebar-layout',
    getParentRoute: () => AuthenticatedRoute,
  } as any)
-const AuthenticatedSidebarLayoutFilesRoute =
-  AuthenticatedSidebarLayoutFilesRouteImport.update({
-    id: '/files',
-    path: '/files',
+const AuthenticatedSidebarLayoutFilesSplatRoute =
+  AuthenticatedSidebarLayoutFilesSplatRouteImport.update({
+    id: '/files/$',
+    path: '/files/$',
    getParentRoute: () => AuthenticatedSidebarLayoutRoute,
  } as any)

@@ -51,13 +51,13 @@ export interface FileRoutesByFullPath {
  '/login': typeof LoginRoute
  '/login/callback': typeof LoginCallbackRoute
  '/': typeof AuthenticatedIndexRoute
-  '/files': typeof AuthenticatedSidebarLayoutFilesRoute
+  '/files/$': typeof AuthenticatedSidebarLayoutFilesSplatRoute
 }
 export interface FileRoutesByTo {
  '/login': typeof LoginRoute
  '/login/callback': typeof LoginCallbackRoute
  '/': typeof AuthenticatedIndexRoute
-  '/files': typeof AuthenticatedSidebarLayoutFilesRoute
+  '/files/$': typeof AuthenticatedSidebarLayoutFilesSplatRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
@@ -66,13 +66,13 @@ export interface FileRoutesById {
  '/_authenticated/_sidebar-layout': typeof AuthenticatedSidebarLayoutRouteWithChildren
  '/login_/callback': typeof LoginCallbackRoute
  '/_authenticated/': typeof AuthenticatedIndexRoute
-  '/_authenticated/_sidebar-layout/files': typeof AuthenticatedSidebarLayoutFilesRoute
+  '/_authenticated/_sidebar-layout/files/$': typeof AuthenticatedSidebarLayoutFilesSplatRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/login' | '/login/callback' | '/' | '/files'
+  fullPaths: '/login' | '/login/callback' | '/' | '/files/$'
  fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/login/callback' | '/' | '/files'
+  to: '/login' | '/login/callback' | '/' | '/files/$'
  id:
    | '__root__'
    | '/_authenticated'
@@ -80,7 +80,7 @@ export interface FileRouteTypes {
    | '/_authenticated/_sidebar-layout'
    | '/login_/callback'
    | '/_authenticated/'
-    | '/_authenticated/_sidebar-layout/files'
+    | '/_authenticated/_sidebar-layout/files/$'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -126,23 +126,24 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AuthenticatedSidebarLayoutRouteImport
      parentRoute: typeof AuthenticatedRoute
    }
-    '/_authenticated/_sidebar-layout/files': {
-      id: '/_authenticated/_sidebar-layout/files'
-      path: '/files'
-      fullPath: '/files'
-      preLoaderRoute: typeof AuthenticatedSidebarLayoutFilesRouteImport
+    '/_authenticated/_sidebar-layout/files/$': {
+      id: '/_authenticated/_sidebar-layout/files/$'
+      path: '/files/$'
+      fullPath: '/files/$'
+      preLoaderRoute: typeof AuthenticatedSidebarLayoutFilesSplatRouteImport
      parentRoute: typeof AuthenticatedSidebarLayoutRoute
    }
  }
 }

 interface AuthenticatedSidebarLayoutRouteChildren {
-  AuthenticatedSidebarLayoutFilesRoute: typeof AuthenticatedSidebarLayoutFilesRoute
+  AuthenticatedSidebarLayoutFilesSplatRoute: typeof AuthenticatedSidebarLayoutFilesSplatRoute
 }

 const AuthenticatedSidebarLayoutRouteChildren: AuthenticatedSidebarLayoutRouteChildren =
  {
-    AuthenticatedSidebarLayoutFilesRoute: AuthenticatedSidebarLayoutFilesRoute,
+    AuthenticatedSidebarLayoutFilesSplatRoute:
+      AuthenticatedSidebarLayoutFilesSplatRoute,
  }

 const AuthenticatedSidebarLayoutRouteWithChildren =
--- a/packages/web/src/routes/_authenticated/_sidebar-layout/files.$.tsx
+++ b/packages/web/src/routes/_authenticated/_sidebar-layout/files.$.tsx
@@ -0,0 +1,15 @@
+import { joinPath, PATH_SEPARATOR } from "@fileone/path"
+import { createFileRoute } from "@tanstack/react-router"
+import { FilesPage } from "@/files/files-page"
+
+export const Route = createFileRoute("/_authenticated/_sidebar-layout/files/$")(
+	{
+		component: RouteComponent,
+	},
+)
+
+function RouteComponent() {
+	const { _splat } = Route.useParams()
+	const path = _splat ? joinPath("", _splat) : PATH_SEPARATOR
+	return <FilesPage path={path} />
+}
--- a/packages/web/src/routes/_authenticated/_sidebar-layout/files.tsx
+++ b/packages/web/src/routes/_authenticated/_sidebar-layout/files.tsx
@@ -1,6 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router"
-import { FilesPage } from "@/files/files-page"
-
-export const Route = createFileRoute("/_authenticated/_sidebar-layout/files")({
-	component: FilesPage,
-})