feat: basic recent file browsing

apps/drive-web/src/components/ui/middle-truncated-text.tsx

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

apps/drive-web/src/dashboard/dashboard-sidebar.tsx

@@ -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("/")}>
+				<SidebarMenuButton asChild isActive={isActive("/recent")}>
-					<Link to="/">
+					<Link to="/recent">
-						<HomeIcon />
+						<ClockIcon />
-						<span>Home</span>
+						<span>Recent</span>
 					</Link>
 				</SidebarMenuButton>
 			</SidebarMenuItem>

apps/drive-web/src/files/file-grid.tsx

@@ -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>
+	)
+}

apps/drive-web/src/routeTree.gen.ts

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

apps/drive-web/src/routes/_authenticated/_sidebar-layout/recent.tsx

@@ -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>
+	)
+}

apps/drive-web/src/routes/_authenticated/index.tsx

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

packages/convex/filesystem.ts

@@ -188,3 +188,12 @@ export const openFile = authenticatedMutation({
 		return await FileSystem.openFile(ctx, { fileId })
 	},
 })
+
+export const fetchRecentFiles = authenticatedQuery({
+	args: {
+		limit: v.number(),
+	},
+	handler: async (ctx, { limit }) => {
+		return await FileSystem.fetchRecentFiles(ctx, { limit })
+	},
+})

packages/convex/model/filesystem.ts

@@ -265,3 +265,19 @@ export async function openFile(
 		shareToken: newFileShare.shareToken,
 	}
 }
+
+export async function fetchRecentFiles(
+	ctx: AuthenticatedQueryCtx,
+	{ limit }: { limit: number },
+) {
+	return await ctx.db
+		.query("files")
+		.withIndex("byLastAccessedAt", (q) =>
+			q
+				.eq("userId", ctx.user._id)
+				.eq("deletedAt", undefined)
+				.gte("lastAccessedAt", 0),
+		)
+		.order("desc")
+		.take(limit)
+}

packages/convex/schema.ts

@@ -17,7 +17,7 @@ const schema = defineSchema({
 		.index("byDirectoryId", ["userId", "directoryId", "deletedAt"])
 		.index("byUserId", ["userId", "deletedAt"])
 		.index("byDeletedAt", ["deletedAt"])
-		.index("byLastAccessedAt", ["userId", "lastAccessedAt"])
+		.index("byLastAccessedAt", ["userId", "deletedAt", "lastAccessedAt"])
 		.index("uniqueFileInDirectory", [
 			"userId",
 			"directoryId",