Add back root directory for Trash category (#12802)

- Add back root directory for Trash category

# Important Notes
None

Author: somebody1234

app/gui/src/dashboard/hooks/backendBatchedHooks.ts

@@ -1,5 +1,6 @@
 /** @file Hooks to do batched backend operations. */
 import { backendQueryOptions, mutationOptions } from '#/hooks/backendHooks'
+import type { TrashCategory } from '#/layouts/CategorySwitcher/Category'
 import { getMessageOrToString } from '#/utilities/error'
 import { useMutationState, type Mutation, type QueryClient } from '@tanstack/react-query'
 import {
@@ -295,11 +296,15 @@ export function useMoveAssetsMutationState<Result>(
 }
 
 /** Get a list of all items in the trash. */
-export async function getAllTrashedItems(queryClient: QueryClient, backend: Backend) {
+export async function getAllTrashedItems(
+  queryClient: QueryClient,
+  backend: Backend,
+  category: TrashCategory,
+) {
   return await queryClient.ensureQueryData(
     backendQueryOptions(backend, 'listDirectory', [
       {
-        parentId: null,
+        parentId: category.homeDirectoryId,
         labels: null,
         filterBy: FilterBy.trashed,
         recentProjects: false,

app/gui/src/dashboard/layouts/AssetsTable.tsx

@@ -258,14 +258,14 @@ function AssetsTable(props: AssetsTableProps) {
   const addAssetsLabelsMutation = useMutationCallback(addAssetsLabelsMutationOptions(backend))
   const removeAssetsLabelsMutation = useMutationCallback(removeAssetsLabelsMutationOptions(backend))
 
-  const { currentDirectoryId, setCurrentDirectoryId } = useDirectoryIds({
+  const { queryDirectoryId, currentDirectoryId, setCurrentDirectoryId } = useDirectoryIds({
     category,
   })
   const listDirectoryRefetchInterval = useListDirectoryRefetchInterval()
   const { data: assets = [] } = useSuspenseQuery({
     ...listDirectoryQueryOptions({
       backend,
-      parentId: currentDirectoryId,
+      parentId: queryDirectoryId,
       category,
       refetchInterval: listDirectoryRefetchInterval,
     }),
@@ -1264,6 +1264,11 @@ function AssetsTable(props: AssetsTableProps) {
       : getText('assetsDropFilesDescription', droppedFilesCount)
     : getText('assetsDropzoneDescription')
 
+  const specialEmptyText =
+    query.query !== '' ? getText('noFilesMatchTheCurrentFilters')
+    : currentDirectoryId !== category.homeDirectoryId ? getText('thisFolderIsEmpty')
+    : null
+
   const table = (
     <div className="flex flex-none flex-col">
       <table className="isolate table-fixed border-collapse rounded-rows">
@@ -1277,16 +1282,10 @@ function AssetsTable(props: AssetsTableProps) {
             <td colSpan={columns.length} className="h-table-row bg-transparent">
               <Text className="px-cell-x placeholder" disableLineHeightCompensation>
                 {category.type === 'trash' ?
-                  query.query !== '' ?
-                    getText('noFilesMatchTheCurrentFilters')
-                  : getText('yourTrashIsEmpty')
+                  (specialEmptyText ?? getText('yourTrashIsEmpty'))
                 : category.type === 'recent' ?
-                  query.query !== '' ?
-                    getText('noFilesMatchTheCurrentFilters')
-                  : getText('youHaveNoRecentProjects')
-                : query.query !== '' ?
-                  getText('noFilesMatchTheCurrentFilters')
-                : getText('youHaveNoFiles')}
+                  (specialEmptyText ?? getText('youHaveNoRecentProjects'))
+                : (specialEmptyText ?? getText('youHaveNoFiles'))}
               </Text>
             </td>
           </tr>

app/gui/src/dashboard/layouts/Drive/Categories/Category.ts

@@ -57,7 +57,7 @@ const TRASH_CATEGORY_SCHEMA = z
   .object({
     type: z.literal('trash'),
     id: z.literal('trash'),
-    homeDirectoryId: z.null(),
+    homeDirectoryId: DIRECTORY_ID_SCHEMA,
   })
   .merge(EACH_CATEGORY_SCHEMA)
   .readonly()

app/gui/src/dashboard/layouts/Drive/Categories/categoriesHooks.tsx

@@ -18,14 +18,16 @@ import { useUser } from '#/providers/AuthProvider'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useOffline } from '#/hooks/offlineHooks'
 import { useSearchParamsState } from '#/hooks/searchParamsStateHooks'
-import { useBackend, useLocalBackend } from '#/providers/BackendProvider'
+import { useBackend, useLocalBackend, useRemoteBackend } from '#/providers/BackendProvider'
 import { useLocalStorageState } from '#/providers/LocalStorageProvider'
 import { useText } from '#/providers/TextProvider'
 import type Backend from '#/services/Backend'
 import { Path, type DirectoryId } from '#/services/Backend'
 import { newDirectoryId } from '#/services/LocalBackend'
+import { organizationIdToDirectoryId } from '#/services/RemoteBackend'
 import { getFileName } from '#/utilities/fileInfo'
 import LocalStorage from '#/utilities/LocalStorage'
+import { useSuspenseQuery } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
 import { createContext, useContext } from 'react'
 import invariant from 'tiny-invariant'
@@ -85,6 +87,13 @@ export type CloudCategoryResult = ReturnType<typeof useCloudCategoryList>
 export function useCloudCategoryList() {
   const user = useUser()
   const { getText } = useText()
+  const backend = useRemoteBackend()
+  const { data: organization } = useSuspenseQuery({
+    queryKey: [backend.type, 'getOrganization'],
+    queryFn: () => backend.getOrganization(),
+  })
+  const organizationRootDirectoryId =
+    organization != null ? organizationIdToDirectoryId(organization.id) : user.rootDirectoryId
 
   const cloudCategory: CloudCategory = {
     type: 'cloud',
@@ -107,7 +116,7 @@ export function useCloudCategoryList() {
     id: 'trash',
     label: getText('trashCategory'),
     icon: Trash2Icon,
-    homeDirectoryId: null,
+    homeDirectoryId: organizationRootDirectoryId,
   }
 
   const predefinedCloudCategories: AnyCloudCategory[] = [

app/gui/src/dashboard/layouts/Drive/directoryIdsHooks.ts

@@ -13,13 +13,16 @@ export function useDirectoryIds(options: UseDirectoryIdsOptions) {
   const { category } = options
   const user = useUser()
   const rootDirectoryId = category.homeDirectoryId ?? user.rootDirectoryId
-  const currentDirectoryId = useCurrentDirectoryId().current ?? rootDirectoryId
+  /** The id of the directory to use in the "list directory" query. */
+  const queryDirectoryId = useCurrentDirectoryId().current ?? category.homeDirectoryId
+  const currentDirectoryId = queryDirectoryId ?? rootDirectoryId
   const parentDirectoryId = useCurrentDirectoryId().parent ?? rootDirectoryId
   const setCurrentDirectoryId = useSetCurrentDirectoryId()
 
   return {
     setCurrentDirectoryId,
     rootDirectoryId,
+    queryDirectoryId,
     currentDirectoryId,
     parentDirectoryId,
   } as const

app/gui/src/dashboard/pages/dashboard/Drive/DriveBar/DriveBarToolbar.tsx

@@ -35,6 +35,7 @@ import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useOffline } from '#/hooks/offlineHooks'
 import { AssetPanelToggle } from '#/layouts/AssetPanel'
 import AssetSearchBar from '#/layouts/AssetSearchBar'
+import type { TrashCategory } from '#/layouts/CategorySwitcher/Category'
 import {
   canTransferBetweenCategories,
   isCloudCategory,
@@ -314,7 +315,7 @@ export function DriveBarToolbar(props: DriveBarToolbarProps) {
 interface TrashFolderToolbarProps extends PropsWithChildren {
   readonly shouldBeDisabled: boolean
   readonly backend: Backend
-  readonly category: Category
+  readonly category: TrashCategory
 }
 
 /**
@@ -327,7 +328,7 @@ function TrashFolderToolbar(props: TrashFolderToolbarProps) {
   const rootDirectoryQueryOptions = listDirectoryQueryOptions({
     backend,
     category,
-    parentId: null,
+    parentId: category.homeDirectoryId,
     refetchInterval: null,
   })
 
@@ -340,7 +341,7 @@ function TrashFolderToolbar(props: TrashFolderToolbarProps) {
   const deleteAssetsMutation = useMutationCallback(deleteAssetsMutationOptions(backend))
 
   const clearTrash = useEventCallback(async () => {
-    const allTrashedItems = await getAllTrashedItems(queryClient, backend)
+    const allTrashedItems = await getAllTrashedItems(queryClient, backend, category)
     await deleteAssetsMutation([allTrashedItems.map((item) => item.id), true])
   })