drexa/drive
1
0
Fork 0
mirror of https://github.com/get-drexa/drive.git synced 2025-12-01 05:51:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: basic recent file browsing

Browse Source
This commit is contained in:
Kenneth
2025-10-28 20:26:12 +00:00
parent 7fe5184e81
commit a8c7a8f60b
9 changed files with 109 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/drive-web/src/components/ui/middle-truncated-text.tsx Normal file
View File

@@ -0,0 +1,13 @@
function MiddleTruncatedText({ children }: { children: string }) {
const LAST_PART_LENGTH = 3
const lastPart = children.slice(children.length - LAST_PART_LENGTH)
const firstPart = children.slice(0, children.length - LAST_PART_LENGTH)
return (
<p className="max-w-full flex">
<span className="flex-1 truncate">{firstPart}</span>
<span className="w-min">{lastPart}</span>
</p>
)
}
export { MiddleTruncatedText }

10
apps/drive-web/src/dashboard/dashboard-sidebar.tsx
View File

@@ -3,8 +3,8 @@ import { Link, useLocation } from "@tanstack/react-router"
import { useQuery as useConvexQuery } from "convex/react"
import { useAtomValue } from "jotai"
import {
ClockIcon,
FilesIcon,
HomeIcon,
LogOutIcon,
SettingsIcon,
TrashIcon,
@@ -66,10 +66,10 @@ function MainSidebarMenu() {
return (
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild isActive={isActive("/")}>
<Link to="/">
<HomeIcon />
<span>Home</span>
<SidebarMenuButton asChild isActive={isActive("/recent")}>
<Link to="/recent">
<ClockIcon />
<span>Recent</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>

19
apps/drive-web/src/files/file-grid.tsx Normal file
View File

@@ -0,0 +1,19 @@
import type { Doc } from "@fileone/convex/dataModel"
import { TextFileIcon } from "../components/icons/text-file-icon"
import { MiddleTruncatedText } from "../components/ui/middle-truncated-text"
export function FileGrid({ files }: { files: Doc<"files">[] }) {
return (
<div className="grid auto-cols-max grid-flow-col gap-4">
{files.map((file) => (
<div
key={file._id}
className="flex flex-col gap-2 items-center justify-center w-24"
>
<TextFileIcon className="size-10" />
<MiddleTruncatedText>{file.name}</MiddleTruncatedText>
</div>
))}
</div>
)
}

23
apps/drive-web/src/routeTree.gen.ts
View File

@@ -15,6 +15,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 AuthenticatedSidebarLayoutRecentRouteImport } from './routes/_authenticated/_sidebar-layout/recent'
import { Route as AuthenticatedSidebarLayoutHomeRouteImport } from './routes/_authenticated/_sidebar-layout/home'
import { Route as AuthenticatedSidebarLayoutDirectoriesDirectoryIdRouteImport } from './routes/_authenticated/_sidebar-layout/directories.$directoryId'
import { Route as AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRouteImport } from './routes/_authenticated/_sidebar-layout/trash.directories.$directoryId'
@@ -48,6 +49,12 @@ const AuthenticatedSidebarLayoutRoute =
id: '/_sidebar-layout',
getParentRoute: () => AuthenticatedRoute,
} as any)
const AuthenticatedSidebarLayoutRecentRoute =
AuthenticatedSidebarLayoutRecentRouteImport.update({
id: '/recent',
path: '/recent',
getParentRoute: () => AuthenticatedSidebarLayoutRoute,
} as any)
const AuthenticatedSidebarLayoutHomeRoute =
AuthenticatedSidebarLayoutHomeRouteImport.update({
id: '/home',
@@ -73,6 +80,7 @@ export interface FileRoutesByFullPath {
'/login/callback': typeof LoginCallbackRoute
'/': typeof AuthenticatedIndexRoute
'/home': typeof AuthenticatedSidebarLayoutHomeRoute
'/recent': typeof AuthenticatedSidebarLayoutRecentRoute
'/directories/$directoryId': typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute
'/trash/directories/$directoryId': typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute
}
@@ -82,6 +90,7 @@ export interface FileRoutesByTo {
'/login/callback': typeof LoginCallbackRoute
'/': typeof AuthenticatedIndexRoute
'/home': typeof AuthenticatedSidebarLayoutHomeRoute
'/recent': typeof AuthenticatedSidebarLayoutRecentRoute
'/directories/$directoryId': typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute
'/trash/directories/$directoryId': typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute
}
@@ -94,6 +103,7 @@ export interface FileRoutesById {
'/login_/callback': typeof LoginCallbackRoute
'/_authenticated/': typeof AuthenticatedIndexRoute
'/_authenticated/_sidebar-layout/home': typeof AuthenticatedSidebarLayoutHomeRoute
'/_authenticated/_sidebar-layout/recent': typeof AuthenticatedSidebarLayoutRecentRoute
'/_authenticated/_sidebar-layout/directories/$directoryId': typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute
'/_authenticated/_sidebar-layout/trash/directories/$directoryId': typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute
}
@@ -105,6 +115,7 @@ export interface FileRouteTypes {
| '/login/callback'
| '/'
| '/home'
| '/recent'
| '/directories/$directoryId'
| '/trash/directories/$directoryId'
fileRoutesByTo: FileRoutesByTo
@@ -114,6 +125,7 @@ export interface FileRouteTypes {
| '/login/callback'
| '/'
| '/home'
| '/recent'
| '/directories/$directoryId'
| '/trash/directories/$directoryId'
id:
@@ -125,6 +137,7 @@ export interface FileRouteTypes {
| '/login_/callback'
| '/_authenticated/'
| '/_authenticated/_sidebar-layout/home'
| '/_authenticated/_sidebar-layout/recent'
| '/_authenticated/_sidebar-layout/directories/$directoryId'
| '/_authenticated/_sidebar-layout/trash/directories/$directoryId'
fileRoutesById: FileRoutesById
@@ -180,6 +193,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof AuthenticatedSidebarLayoutRouteImport
parentRoute: typeof AuthenticatedRoute
}
'/_authenticated/_sidebar-layout/recent': {
id: '/_authenticated/_sidebar-layout/recent'
path: '/recent'
fullPath: '/recent'
preLoaderRoute: typeof AuthenticatedSidebarLayoutRecentRouteImport
parentRoute: typeof AuthenticatedSidebarLayoutRoute
}
'/_authenticated/_sidebar-layout/home': {
id: '/_authenticated/_sidebar-layout/home'
path: '/home'
@@ -206,6 +226,7 @@ declare module '@tanstack/react-router' {
interface AuthenticatedSidebarLayoutRouteChildren {
AuthenticatedSidebarLayoutHomeRoute: typeof AuthenticatedSidebarLayoutHomeRoute
AuthenticatedSidebarLayoutRecentRoute: typeof AuthenticatedSidebarLayoutRecentRoute
AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute: typeof AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute
AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute: typeof AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute
}
@@ -213,6 +234,8 @@ interface AuthenticatedSidebarLayoutRouteChildren {
const AuthenticatedSidebarLayoutRouteChildren: AuthenticatedSidebarLayoutRouteChildren =
{
AuthenticatedSidebarLayoutHomeRoute: AuthenticatedSidebarLayoutHomeRoute,
AuthenticatedSidebarLayoutRecentRoute:
AuthenticatedSidebarLayoutRecentRoute,
AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute:
AuthenticatedSidebarLayoutDirectoriesDirectoryIdRoute,
AuthenticatedSidebarLayoutTrashDirectoriesDirectoryIdRoute:

22
apps/drive-web/src/routes/_authenticated/_sidebar-layout/recent.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { api } from "@fileone/convex/api"
import { createFileRoute } from "@tanstack/react-router"
import { useQuery as useConvexQuery } from "convex/react"
import { FileGrid } from "@/files/file-grid"
export const Route = createFileRoute("/_authenticated/_sidebar-layout/recent")({
component: RouteComponent,
})
function RouteComponent() {
const recentFiles = useConvexQuery(api.filesystem.fetchRecentFiles, {
limit: 100,
})
console.log("recentFiles", recentFiles)
return (
<main className="p-4">
<FileGrid files={recentFiles ?? []} />
</main>
)
}

2
apps/drive-web/src/routes/_authenticated/index.tsx
View File

@@ -5,5 +5,5 @@ export const Route = createFileRoute("/_authenticated/")({
})
function RouteComponent() {
return <Navigate replace to="/home" />
return <Navigate replace to="/recent" />
}