Basic virtualization support

app/gui/package.json

@@ -44,6 +44,7 @@
     "playwright:install": "playwright install chromium"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "3.13.6",
     "@ag-grid-community/client-side-row-model": "^32.3.3",
     "@ag-grid-community/core": "^32.3.3",
     "@ag-grid-community/styles": "^32.3.3",

app/gui/src/dashboard/components/Page.tsx

@@ -1,10 +1,6 @@
 /** @file A page. */
 import * as React from 'react'
 
-import * as authProvider from '#/providers/AuthProvider'
-
-import Chat from '#/layouts/Chat'
-import ChatPlaceholder from '#/layouts/ChatPlaceholder'
 import InfoBar from '#/layouts/InfoBar'
 
 import TheModal from '#/components/dashboard/TheModal'
@@ -18,13 +14,8 @@ export interface PageProps extends Readonly<React.PropsWithChildren> {
 
 /** A page. */
 export default function Page(props: PageProps) {
-  const { hideInfoBar = false, children, hideChat = false } = props
+  const { hideInfoBar = false, children } = props
   const [isHelpChatOpen, setIsHelpChatOpen] = React.useState(false)
-  const session = authProvider.useUserSession()
-
-  const doCloseChat = () => {
-    setIsHelpChatOpen(false)
-  }
 
   return (
     <>
@@ -34,18 +25,6 @@ export default function Page(props: PageProps) {
           <InfoBar isHelpChatOpen={isHelpChatOpen} setIsHelpChatOpen={setIsHelpChatOpen} />
         </div>
       )}
-      {!hideChat && (
-        <>
-          {/* `session.accessToken` MUST be present in order for the `Chat` component to work. */}
-          {(
-            !hideInfoBar &&
-            session?.type === authProvider.UserSessionType.full &&
-            $config.CHAT_URL != null
-          ) ?
-            <Chat isOpen={isHelpChatOpen} doClose={doCloseChat} endpoint={$config.CHAT_URL} />
-          : <ChatPlaceholder hideLoginButtons isOpen={isHelpChatOpen} doClose={doCloseChat} />}
-        </>
-      )}
       <Portal>
         <div className="select-none text-xs text-primary">
           <TheModal />

app/gui/src/dashboard/components/Scroller/Scroller.tsx

@@ -167,6 +167,7 @@ export function Scroller(props: ScrollerProps) {
 
   const [measureRef] = useMeasureCallback({
     isDisabled: !showShadows,
+    useRAF: false,
     onResize: () => {
       const container = containerRef.current
 

app/gui/src/dashboard/components/dashboard/AssetRow.tsx

@@ -31,12 +31,6 @@
 
 import { Text } from '#/components/AriaComponents'
 import { IndefiniteSpinner } from '#/components/Spinner'
-import {
-  useDeleteAssetsMutationState,
-  useMoveAssetsMutationState,
-  useRestoreAssetsMutationState,
-} from '#/hooks/backendBatchedHooks'
-import { useBackendMutationState } from '#/hooks/backendHooks'
 import { useDragDelayAction } from '#/hooks/dragDelayHooks'
 import { BUSY_PROJECT_STATES } from '#/hooks/projectHooks'
 import { useSyncRef } from '#/hooks/syncRefHooks'
@@ -228,18 +222,26 @@
   const { user } = useFullUserSession()
   const setSelectedAssets = useSetSelectedAssets()
   const getAsset = useGetAsset()
-  const selected = useStore(driveStore, ({ visuallySelectedKeys, selectedIds }) =>
-    (visuallySelectedKeys ?? selectedIds).has(id),
-  )
-  const isSoleSelected = useStore(
-    driveStore,
-    ({ selectedIds, visuallySelectedKeys }) =>
-      selected && (visuallySelectedKeys ?? selectedIds).size === 1,
-  )
-  const allowContextMenu = useStore(
-    driveStore,
-    ({ selectedIds }) => selectedIds.size === 0 || !selected || isSoleSelected,
-  )
+  const { isSoleSelected, isNewlyCreated, allowContextMenu, selected, insertionVisibility } =
+    useStore(driveStore, ({ visuallySelectedKeys, selectedIds, newestFolderId, pasteData }) => {
+      const selected = (visuallySelectedKeys ?? selectedIds).has(id)
+      const isSoleSelected = selected && (visuallySelectedKeys ?? selectedIds).size === 1
+      const isNewlyCreated = selected && newestFolderId === item.id
+
+      return {
+        selected,
+        isSoleSelected,
+        isNewlyCreated,
+        allowContextMenu: isSoleSelected,
+        insertionVisibility:
+          (
+            pasteData?.type === 'move' &&
+            pasteData.data.assets.some((asset) => asset.id === item.id)
+          ) ?
+            Visibility.faded
+          : Visibility.visible,
+      }
+    })
   const setCurrentDirectoryId = useSetCurrentDirectoryId()
   const draggableProps = dragAndDropHooks.useDraggable({ isDisabled: !selected })
   const { setModal, unsetModal } = modalProvider.useSetModal()
@@ -253,57 +255,48 @@
   )
   const setLabelsDragPayload = useSetLabelsDragPayload()
 
-  const isNewlyCreated = useStore(driveStore, ({ newestFolderId }) => newestFolderId === item.id)
   const isEditingName = innerRowState.isEditingName || isNewlyCreated
 
   const rowState = object.merge(innerRowState, { isEditingName })
 
-  const isDeletingSingleAsset =
-    useBackendMutationState(backend, 'deleteAsset', {
-      predicate: ({ state: { variables } }) => variables?.[0] === item.id,
-      select: () => null,
-    }).length !== 0
-  const isDeletingMultipleAssets =
-    useDeleteAssetsMutationState(backend, {
-      predicate: ({ state: { variables: [assetIds = []] = [] } }) => assetIds.includes(item.id),
-      select: () => null,
-    }).length !== 0
+  const isDeletingSingleAsset = false
+  // useBackendMutationState(backend, 'deleteAsset', {
+  //   predicate: ({ state: { variables } }) => variables?.[0] === item.id,
+  //   select: () => null,
+  // }).length !== 0
+  const isDeletingMultipleAssets = false
+  // useDeleteAssetsMutationState(backend, {
+  //   predicate: ({ state: { variables: [assetIds = []] = [] } }) => assetIds.includes(item.id),
+  //   select: () => null,
+  // }).length !== 0
   const isDeleting = isDeletingSingleAsset || isDeletingMultipleAssets
-  const isRestoringSingleAsset =
-    useBackendMutationState(backend, 'undoDeleteAsset', {
-      predicate: ({ state: { variables } }) => variables?.[0] === item.id,
-      select: () => null,
-    }).length !== 0
-  const isRestoringMultipleAssets =
-    useRestoreAssetsMutationState(backend, {
-      predicate: ({ state: { variables = { ids: [], parentId: null } } }) =>
-        variables.ids.includes(item.id),
-      select: () => null,
-    }).length !== 0
+  const isRestoringSingleAsset = false
+  // useBackendMutationState(backend, 'undoDeleteAsset', {
+  //   predicate: ({ state: { variables } }) => variables?.[0] === item.id,
+  //   select: () => null,
+  // }).length !== 0
+  const isRestoringMultipleAssets = false
+  // useRestoreAssetsMutationState(backend, {
+  //   predicate: ({ state: { variables = { ids: [], parentId: null } } }) =>
+  //     variables.ids.includes(item.id),
+  //   select: () => null,
+  // }).length !== 0
   const isRestoring = isRestoringSingleAsset || isRestoringMultipleAssets
-  const isUpdatingSingleAsset =
-    useBackendMutationState(backend, 'updateAsset', {
-      predicate: ({ state: { variables } }) => variables?.[0] === item.id,
-      select: () => null,
-    }).length !== 0
-  const isMovingMultipleAssets =
-    useMoveAssetsMutationState(backend, {
-      predicate: ({ state: { variables: [assetIds = []] = [] } }) => assetIds.includes(item.id),
-      select: () => null,
-    }).length !== 0
+  const isUpdatingSingleAsset = false
+  // useBackendMutationState(backend, 'updateAsset', {
+  //   predicate: ({ state: { variables } }) => variables?.[0] === item.id,
+  //   select: () => null,
+  // }).length !== 0
+  const isMovingMultipleAssets = false
+  // useMoveAssetsMutationState(backend, {
+  //   predicate: ({ state: { variables: [assetIds = []] = [] } }) => assetIds.includes(item.id),
+  //   select: () => null,
+  // }).length !== 0
 
   const isUpdating = isUpdatingSingleAsset || isMovingMultipleAssets
 
-  const insertionVisibility = useStore(driveStore, (driveState) => {
-    return (
-        driveState.pasteData?.type === 'move' &&
-          driveState.pasteData.data.assets.some((asset) => asset.id === item.id)
-      ) ?
-        Visibility.faded
-      : Visibility.visible
-  })
   const visibility =
     isDeleting || isRestoring || isUpdating ? Visibility.faded : insertionVisibility
 
   const setSelected = useEventCallback((newSelected: boolean) => {
     const { selectedAssets } = driveStore.getState()
@@ -424,7 +417,7 @@
               }
             }}
             className={tailwindMerge.twMerge(
-              'h-table-row rounded-full transition-all ease-in-out rounded-rows-child [contain-intrinsic-size:44px] [content-visibility:auto]',
+              'h-table-row rounded-full transition-all ease-in-out rounded-rows-child',
               visibility,
               (isDraggedOver || selected) && 'selected',
             )}

app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx

@@ -3,13 +3,14 @@ import FolderIcon from '#/assets/folder.svg'
 import { Button } from '#/components/AriaComponents'
 import type { AssetColumnProps } from '#/components/dashboard/column'
 import EditableSpan from '#/components/EditableSpan'
-import { useGetAssetChildren } from '#/layouts/Drive/assetsTableItemsHooks'
+import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useDriveStore, useSetCurrentDirectoryId } from '#/providers/DriveProvider'
 import { useText } from '#/providers/TextProvider'
 import { titleSchema, type DirectoryAsset } from '#/services/Backend'
 import { merger } from '#/utilities/object'
-import { twMerge } from '#/utilities/tailwindMerge'
+import { twJoin } from '#/utilities/tailwindMerge'
 import { useTransition } from 'react'
+import { useGetAssetChildren } from '../../layouts/Drive/assetsTableItemsHooks'
 
 /** Props for a {@link DirectoryNameColumn}. */
 export interface DirectoryNameColumnProps extends AssetColumnProps {
@@ -30,20 +31,37 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
   const setCurrentDirectoryId = useSetCurrentDirectoryId()
   const getAssetChildren = useGetAssetChildren()
 
-  const setIsEditing = (isEditingName: boolean) => {
+  const setIsEditing = useEventCallback((isEditingName: boolean) => {
     if (isEditable) {
       setRowState(merger({ isEditingName }))
     }
 
     if (!isEditingName) {
       driveStore.setState({ newestFolderId: null })
     }
-  }
+  })
 
-  const doRename = async (newTitle: string) => {
+  const doRename = useEventCallback(async (newTitle: string) => {
     await renameAsset(item.id, newTitle)
     setIsEditing(false)
-  }
+  })
+
+  const onPress = useEventCallback(() => {
+    startNavigation(() => {
+      setCurrentDirectoryId({ current: item.id, parent: item.parentId })
+    })
+  })
+
+  const schema = useEventCallback(() => {
+    return titleSchema({
+      asset: item,
+      siblings: getAssetChildren(item.parentId),
+    })
+  })
+
+  const onCancel = useEventCallback(() => {
+    setIsEditing(false)
+  })
 
   return (
     <div
@@ -63,30 +81,19 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
         tooltipPlacement="left"
         testId="directory-row-navigate-button"
         className="mx-1 transition-transform duration-arrow"
-        onPress={() => {
-          startNavigation(() => {
-            setCurrentDirectoryId({ current: item.id, parent: item.parentId })
-          })
-        }}
+        onPress={onPress}
       />
 
       <EditableSpan
         data-testid="asset-row-name"
         editable={rowState.isEditingName}
-        className={twMerge(
-          'cursor-pointer bg-transparent font-naming',
+        className={twJoin(
+          'bg-transparent font-naming',
           rowState.isEditingName ? 'cursor-text' : 'cursor-pointer',
         )}
-        schema={() =>
-          titleSchema({
-            asset: item,
-            siblings: getAssetChildren(item.parentId),
-          })
-        }
+        schema={schema}
         onSubmit={doRename}
-        onCancel={() => {
-          setIsEditing(false)
-        }}
+        onCancel={onCancel}
       >
         {item.title}
       </EditableSpan>

app/gui/src/dashboard/components/dashboard/column/columnUtils.ts

@@ -60,7 +60,7 @@ const NORMAL_COLUMN_CSS_CLASSES = `px-cell-x py ${COLUMN_CSS_CLASSES}`
 
 /** CSS classes for every column. */
 export const COLUMN_CSS_CLASS: Readonly<Record<Column, string>> = {
-  [Column.name]: `z-10 sticky left-0 bg-dashboard rounded-rows-skip-level min-w-96 h-full p-0 border-l-0 after:absolute after:right-0 after:top-0 after:bottom-0 after:border-r-[1.5px] after:border-primary/5 ${COLUMN_CSS_CLASSES}`,
+  [Column.name]: `bg-dashboard rounded-rows-skip-level min-w-96 h-full p-0 border-l-0 after:absolute after:right-0 after:top-0 after:bottom-0 after:border-r-[1.5px] after:border-primary/5 ${COLUMN_CSS_CLASSES}`,
   [Column.modified]: `min-w-drive-modified-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
   [Column.sharedWith]: `min-w-drive-shared-with-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
   [Column.labels]: `min-w-drive-labels-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,