Improve overall performance

Author: MrFlashAccount

app/common/src/services/Backend.ts

@@ -842,8 +842,6 @@ export function isPlaceholderId(id: AssetId) {
     return false
   }
 
-  console.log('isPlaceholderId id', id, PLACEHOLDER_SIGNATURE in id)
-
   return PLACEHOLDER_SIGNATURE in id
 }
 

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

@@ -81,6 +81,7 @@ export interface AssetRowInnerProps {
 /** Props for an {@link AssetRow}. */
 export interface AssetRowProps {
   readonly isOpened: boolean
+
   readonly isPlaceholder: boolean
   readonly visibility: Visibility | undefined
   readonly id: backendModule.AssetId
@@ -96,6 +97,7 @@ export interface AssetRowProps {
   readonly grabKeyboardFocus: (item: backendModule.AnyAsset) => void
   readonly onClick: (props: AssetRowInnerProps, event: React.MouseEvent) => void
   readonly select: (item: backendModule.AnyAsset) => void
+  readonly isExpanded: boolean
   readonly onDragStart?: (
     event: React.DragEvent<HTMLTableRowElement>,
     item: backendModule.AnyAsset,
@@ -267,6 +269,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
     columns,
     onClick,
     isPlaceholder,
+    isExpanded,
     type,
     asset,
   } = props
@@ -689,7 +692,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                   }
                 }}
                 className={tailwindMerge.twMerge(
-                  'h-table-row rounded-full transition-all ease-in-out rounded-rows-child [contain-intrinsic-size:40px] [content-visibility:auto]',
+                  'h-table-row rounded-full transition-all ease-in-out contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
                   visibility,
                   (isDraggedOver || selected) && 'selected',
                 )}
@@ -830,6 +833,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                     <td key={column} className={columnUtils.COLUMN_CSS_CLASS[column]}>
                       <Render
                         isPlaceholder={isPlaceholder}
+                        isExpanded={isExpanded}
                         keyProp={id}
                         isOpened={isOpened}
                         backendType={backend.type}

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

@@ -6,7 +6,7 @@ import EditableSpan from '#/components/EditableSpan'
 
 import type * as backendModule from '#/services/Backend'
 
-import { useSetIsAssetPanelTemporarilyVisible } from '#/providers/DriveProvider'
+import { useSetIsAssetPanelTemporarilyVisible } from '#/layouts/AssetPanel'
 import * as eventModule from '#/utilities/event'
 import * as indent from '#/utilities/indent'
 import * as object from '#/utilities/object'
@@ -43,8 +43,8 @@ export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
 
   return (
     <div
-      className={tailwindMerge.twMerge(
-        'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y',
+      className={tailwindMerge.twJoin(
+        'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

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

@@ -38,11 +38,10 @@ export interface DirectoryNameColumnProps extends column.AssetColumnProps {
  * This should never happen.
  */
 export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
-  const { item, selected, state, rowState, setRowState, isEditable, depth } = props
-  const { backend, nodeMap, doToggleDirectoryExpansion, expandedDirectoryIds } = state
+  const { item, selected, state, rowState, setRowState, isEditable, depth, isExpanded } = props
+  const { backend, nodeMap, doToggleDirectoryExpansion } = state
   const { getText } = textProvider.useText()
   const driveStore = useDriveStore()
-  const isExpanded = expandedDirectoryIds.includes(item.id)
 
   const updateDirectoryMutation = useMutation(backendMutationOptions(backend, 'updateDirectory'))
 
@@ -67,8 +66,8 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
 
   return (
     <div
-      className={tailwindMerge.twMerge(
-        'group flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y',
+      className={tailwindMerge.twJoin(
+        'group flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {
@@ -93,7 +92,7 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
         variant="custom"
         aria-label={isExpanded ? getText('collapse') : getText('expand')}
         tooltipPlacement="left"
-        className={tailwindMerge.twMerge(
+        className={tailwindMerge.twJoin(
           'm-0 hidden cursor-pointer border-0 transition-transform duration-arrow group-hover:m-name-column-icon group-hover:inline-block',
           isExpanded && 'rotate-90',
         )}

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

@@ -59,8 +59,8 @@ export default function FileNameColumn(props: FileNameColumnProps) {
 
   return (
     <div
-      className={tailwindMerge.twMerge(
-        'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y',
+      className={tailwindMerge.twJoin(
+        'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

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

@@ -95,8 +95,8 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
 
   return (
     <div
-      className={tailwindMerge.twMerge(
-        'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y',
+      className={tailwindMerge.twJoin(
+        'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

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

@@ -52,7 +52,7 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
   return (
     <div
       className={tailwindMerge.twMerge(
-        'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y',
+        'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

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

@@ -33,6 +33,7 @@ export interface AssetColumnProps {
   readonly setRowState: Dispatch<SetStateAction<AssetRowState>>
   readonly isEditable: boolean
   readonly isPlaceholder: boolean
+  readonly isExpanded: boolean
 }
 
 /** Props for a {@link AssetColumn}. */

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

@@ -36,15 +36,12 @@ import * as backendModule from '#/services/Backend'
 import * as localBackendModule from '#/services/LocalBackend'
 
 import { useUploadFileWithToastMutation } from '#/hooks/backendHooks'
-import {
-  usePasteData,
-  useSetAssetPanelProps,
-  useSetIsAssetPanelTemporarilyVisible,
-} from '#/providers/DriveProvider'
+import { usePasteData } from '#/providers/DriveProvider'
 import { normalizePath } from '#/utilities/fileInfo'
 import { mapNonNullish } from '#/utilities/nullable'
 import * as object from '#/utilities/object'
 import * as permissions from '#/utilities/permissions'
+import { useSetAssetPanelProps, useSetIsAssetPanelTemporarilyVisible } from './AssetPanel'
 
 // ========================
 // === AssetContextMenu ===

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

@@ -11,41 +11,32 @@ import versionsIcon from '#/assets/versions.svg'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { useBackend } from '#/providers/BackendProvider'
-import {
-  useAssetPanelProps,
-  useAssetPanelSelectedTab,
-  useIsAssetPanelExpanded,
-  useIsAssetPanelHidden,
-  useSetAssetPanelSelectedTab,
-  useSetIsAssetPanelExpanded,
-} from '#/providers/DriveProvider'
 import { useText } from '#/providers/TextProvider'
-import type Backend from '#/services/Backend'
 import LocalStorage from '#/utilities/LocalStorage'
-import type { AnyAsset, BackendType } from 'enso-common/src/services/Backend'
+import { useStore } from '#/utilities/zustand'
+import type { BackendType } from 'enso-common/src/services/Backend'
 import type { Spring } from 'framer-motion'
 import { AnimatePresence, motion } from 'framer-motion'
 import { memo, startTransition } from 'react'
 import { z } from 'zod'
 import { AssetDocs } from '../AssetDocs'
 import AssetProjectSessions from '../AssetProjectSessions'
-import type { AssetPropertiesSpotlight } from '../AssetProperties'
 import AssetProperties from '../AssetProperties'
 import AssetVersions from '../AssetVersions/AssetVersions'
 import type { Category } from '../CategorySwitcher/Category'
+import {
+  assetPanelStore,
+  useIsAssetPanelExpanded,
+  useSetIsAssetPanelExpanded,
+} from './AssetPanelState'
 import { AssetPanelTabs } from './components/AssetPanelTabs'
 import { AssetPanelToggle } from './components/AssetPanelToggle'
+import { ASSET_PANEL_TABS, type AssetPanelTab } from './types'
 
 const ASSET_SIDEBAR_COLLAPSED_WIDTH = 48
 const ASSET_PANEL_WIDTH = 480
 const ASSET_PANEL_TOTAL_WIDTH = ASSET_PANEL_WIDTH + ASSET_SIDEBAR_COLLAPSED_WIDTH
 
-/** Determines the content of the {@link AssetPanel}. */
-const ASSET_PANEL_TABS = ['settings', 'versions', 'sessions', 'schedules', 'docs'] as const
-
-/** Determines the content of the {@link AssetPanel}. */
-type AssetPanelTab = (typeof ASSET_PANEL_TABS)[number]
-
 declare module '#/utilities/LocalStorage' {
   /** */
   interface LocalStorageData {
@@ -65,15 +56,6 @@ LocalStorage.register({
   isAssetPanelVisible: { schema: z.boolean() },
 })
 
-/** Props supplied by the row. */
-export interface AssetPanelContextProps {
-  readonly backend: Backend | null
-  readonly selectedTab: AssetPanelTab
-  readonly item: AnyAsset | null
-  readonly path: string | null
-  readonly spotlightOn: AssetPropertiesSpotlight | null
-}
-
 /**
  * Props for an {@link AssetPanel}.
  */
@@ -97,7 +79,9 @@ const DEFAULT_TRANSITION_OPTIONS: Spring = {
  * It is used to view and interact with assets in the drive.
  */
 export function AssetPanel(props: AssetPanelProps) {
-  const isHidden = useIsAssetPanelHidden()
+  const isHidden = useStore(assetPanelStore, (state) => state.isAssetPanelHidden, {
+    unsafeEnableTransition: true,
+  })
   const isExpanded = useIsAssetPanelExpanded()
 
   const panelWidth = isExpanded ? ASSET_PANEL_TOTAL_WIDTH : ASSET_SIDEBAR_COLLAPSED_WIDTH
@@ -137,11 +121,21 @@ export function AssetPanel(props: AssetPanelProps) {
 const InternalAssetPanelTabs = memo(function InternalAssetPanelTabs(props: AssetPanelProps) {
   const { category } = props
 
-  const { item, spotlightOn, path } = useAssetPanelProps()
+  const { item, spotlightOn, path } = useStore(assetPanelStore, (state) => ({
+    item: state.assetPanelProps.item,
+    spotlightOn: state.assetPanelProps.spotlightOn,
+    path: state.assetPanelProps.path,
+  }))
 
-  const selectedTab = useAssetPanelSelectedTab()
-  const setSelectedTab = useSetAssetPanelSelectedTab()
-  const isHidden = useIsAssetPanelHidden()
+  const selectedTab = useStore(assetPanelStore, (state) => state.selectedTab, {
+    unsafeEnableTransition: true,
+  })
+  const setSelectedTab = useStore(assetPanelStore, (state) => state.setSelectedTab, {
+    unsafeEnableTransition: true,
+  })
+  const isHidden = useStore(assetPanelStore, (state) => state.isAssetPanelHidden, {
+    unsafeEnableTransition: true,
+  })
 
   const isReadonly = category.type === 'trash'