From 318cc2d81b09636a9b1e9fa0a0550088c9ce17c8 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Wed, 17 Jan 2024 08:13:15 +1000
Subject: [PATCH] Inline `Table`, `TableRow` and `TableColumn` (#8760)

These components are a legacy remnant of the old design, where `Table` needed to be reusable because there was a separate table for each asset type.

# Important Notes
None
---
 .../lib/dashboard/src/components/Table.tsx    | 356 ----------
 .../dashboard/src/components/TableColumn.tsx  |  31 -
 .../lib/dashboard/src/components/TableRow.tsx | 187 ------
 .../src/components/dashboard/AssetRow.tsx     | 264 +++++---
 .../src/components/dashboard/column.ts        |  52 +-
 .../NameColumn.tsx}                           |   0
 .../src/components/dashboard/columnHeading.ts |   7 +-
 .../columnHeading/ModifiedColumnHeading.tsx   |   7 +-
 .../columnHeading/NameColumnHeading.tsx       |   7 +-
 .../layouts/dashboard/AssetContextMenu.tsx    |  10 +-
 .../src/layouts/dashboard/AssetsTable.tsx     | 608 ++++++++++--------
 .../dashboard/AssetsTableContextMenu.tsx      | 196 ++++++
 12 files changed, 731 insertions(+), 994 deletions(-)
 delete mode 100644 app/ide-desktop/lib/dashboard/src/components/Table.tsx
 delete mode 100644 app/ide-desktop/lib/dashboard/src/components/TableColumn.tsx
 delete mode 100644 app/ide-desktop/lib/dashboard/src/components/TableRow.tsx
 rename app/ide-desktop/lib/dashboard/src/components/dashboard/{AssetNameColumn.tsx => column/NameColumn.tsx} (100%)
 create mode 100644 app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTableContextMenu.tsx

diff --git a/app/ide-desktop/lib/dashboard/src/components/Table.tsx b/app/ide-desktop/lib/dashboard/src/components/Table.tsx
deleted file mode 100644
index d24a26ebf167..000000000000
--- a/app/ide-desktop/lib/dashboard/src/components/Table.tsx
+++ /dev/null
@@ -1,356 +0,0 @@
-/** @file A table that projects an object into each column.
- * This is intended to be specialized into components for specific item types, rather than
- * being used directly. */
-import * as React from 'react'
-
-import * as shortcutsProvider from '#/providers/ShortcutsProvider'
-import * as set from '#/utilities/set'
-import * as shortcutsModule from '#/utilities/shortcuts'
-
-import Spinner, * as spinner from '#/components/Spinner'
-import type * as tableColumn from '#/components/TableColumn'
-import type * as tableRow from '#/components/TableRow'
-import TableRow from '#/components/TableRow'
-
-// =================
-// === Constants ===
-// =================
-
-/** The size of the loading spinner. */
-const LOADING_SPINNER_SIZE = 36
-
-// =============================
-// === Partial `Props` types ===
-// =============================
-
-/** `state: State`. */
-interface StateProp<State> {
-    state: State
-}
-
-/** `initialRowState: RowState`. */
-interface InitialRowStateProp<RowState> {
-    initialRowState: RowState
-}
-
-/** `selectedKeys` and `setSelectedKeys` when they are present. */
-interface InternalSelectedKeysProps<Key> {
-    selectedKeys: Set<Key>
-    setSelectedKeys: React.Dispatch<React.SetStateAction<Set<Key>>>
-}
-
-/** The absence of `selectedKeys` and `setSelectedKeys`. */
-interface InternalNoSelectedKeysProps {
-    selectedKeys?: never
-    setSelectedKeys?: never
-}
-
-// =============
-// === Table ===
-// =============
-
-/** Props for a {@link Table}. */
-interface InternalTableProps<T, State = never, RowState = never, Key extends string = string> {
-    rowComponent?: (props: tableRow.TableRowProps<T, State, RowState, Key>) => JSX.Element | null
-    scrollContainerRef?: React.RefObject<HTMLDivElement>
-    headerRowRef?: React.RefObject<HTMLTableRowElement>
-    footer?: React.ReactNode
-    items: T[]
-    filter?: ((item: T) => boolean) | null
-    state?: State
-    initialRowState?: RowState
-    getKey: (item: T) => Key
-    selectedKeys?: Set<Key>
-    setSelectedKeys?: React.Dispatch<React.SetStateAction<Set<Key>>>
-    columns: tableColumn.TableColumn<T, State, RowState, Key>[]
-    isLoading: boolean
-    placeholder?: JSX.Element
-    className?: string
-    onContextMenu: (
-        selectedKeys: Set<Key>,
-        event: React.MouseEvent<HTMLDivElement>,
-        setSelectedKeys: (items: Set<Key>) => void
-    ) => void
-    draggableRows?: boolean
-    onDragLeave?: React.DragEventHandler
-    onRowDragStart?: (event: React.DragEvent<HTMLTableRowElement>, item: T, key: Key) => void
-    onRowDrag?: (event: React.DragEvent<HTMLTableRowElement>, item: T, key: Key) => void
-    onRowDragOver?: (event: React.DragEvent<HTMLTableRowElement>, item: T, key: Key) => void
-    onRowDragEnd?: (event: React.DragEvent<HTMLTableRowElement>, item: T, key: Key) => void
-    onRowDrop?: (event: React.DragEvent<HTMLTableRowElement>, item: T, key: Key) => void
-}
-
-/** Props for a {@link Table}. */
-export type TableProps<
-    T,
-    State = never,
-    RowState = never,
-    Key extends string = string,
-> = InternalTableProps<T, State, RowState, Key> &
-    ([RowState] extends [never] ? unknown : InitialRowStateProp<RowState>) &
-    ([State] extends [never] ? unknown : StateProp<State>) &
-    (InternalNoSelectedKeysProps | InternalSelectedKeysProps<Key>)
-
-/** Table that projects an object into each column. */
-export default function Table<T, State = never, RowState = never, Key extends string = string>(
-    props: TableProps<T, State, RowState, Key>
-) {
-    const { rowComponent: RowComponent = TableRow, scrollContainerRef, headerRowRef } = props
-    const { footer, items, filter, getKey } = props
-    const { selectedKeys: rawSelectedKeys, setSelectedKeys: rawSetSelectedKeys, columns } = props
-    const { isLoading, placeholder, onContextMenu, draggableRows, onDragLeave } = props
-    const { onRowDragStart, onRowDrag, onRowDragOver, onRowDragEnd, onRowDrop } = props
-    const { className, initialRowState, state } = props
-    const rowProps = { className, initialRowState, state }
-
-    const { shortcuts } = shortcutsProvider.useShortcuts()
-    const [spinnerState, setSpinnerState] = React.useState(spinner.SpinnerState.initial)
-    // This should not be made mutable for the sake of optimization, otherwise its value may
-    // be different after `await`ing an I/O operation. Also, a change in its value should trigger
-    // a re-render.
-    const [fallbackSelectedKeys, fallbackSetSelectedKeys] = React.useState(() => new Set<Key>())
-    const [selectedKeys, setSelectedKeys] =
-        rawSelectedKeys != null
-            ? [rawSelectedKeys, rawSetSelectedKeys]
-            : [fallbackSelectedKeys, fallbackSetSelectedKeys]
-    const [previouslySelectedKey, setPreviouslySelectedKey] = React.useState<Key | null>(null)
-    const bodyRef = React.useRef<HTMLTableSectionElement>(null)
-
-    // This is required to prevent the table body from overlapping the table header, because
-    // the table header is transparent.
-    React.useEffect(() => {
-        const body = bodyRef.current
-        const scrollContainer = scrollContainerRef?.current
-        if (body != null && scrollContainer != null) {
-            let isClipPathUpdateQueued = false
-            const updateClipPath = () => {
-                isClipPathUpdateQueued = false
-                body.style.clipPath = `inset(${scrollContainer.scrollTop}px 0 0 0)`
-            }
-            const onScroll = () => {
-                if (!isClipPathUpdateQueued) {
-                    isClipPathUpdateQueued = true
-                    requestAnimationFrame(updateClipPath)
-                }
-            }
-            updateClipPath()
-            scrollContainer.addEventListener('scroll', onScroll)
-            return () => {
-                scrollContainer.removeEventListener('scroll', onScroll)
-            }
-        } else {
-            return
-        }
-    }, [/* should never change */ scrollContainerRef])
-
-    React.useEffect(() => {
-        const onDocumentClick = (event: MouseEvent) => {
-            if (
-                !shortcuts.matchesMouseAction(
-                    shortcutsModule.MouseAction.selectAdditional,
-                    event
-                ) &&
-                !shortcuts.matchesMouseAction(
-                    shortcutsModule.MouseAction.selectAdditionalRange,
-                    event
-                ) &&
-                selectedKeys.size !== 0
-            ) {
-                setSelectedKeys(new Set())
-            }
-        }
-        document.addEventListener('click', onDocumentClick)
-        return () => {
-            document.removeEventListener('click', onDocumentClick)
-        }
-    }, [selectedKeys, /* should never change */ setSelectedKeys, shortcuts])
-
-    React.useEffect(() => {
-        if (isLoading) {
-            // Ensure the spinner stays in the "initial" state for at least one frame,
-            // to ensure the CSS animation begins at the initial state.
-            requestAnimationFrame(() => {
-                setSpinnerState(spinner.SpinnerState.loadingFast)
-            })
-        } else {
-            setSpinnerState(spinner.SpinnerState.initial)
-        }
-    }, [isLoading])
-
-    const onRowClick = React.useCallback(
-        (
-            innerRowProps: tableRow.TableRowInnerProps<T, State, RowState, Key>,
-            event: React.MouseEvent
-        ) => {
-            const { key } = innerRowProps
-            event.stopPropagation()
-            const getNewlySelectedKeys = () => {
-                if (previouslySelectedKey == null) {
-                    return [key]
-                } else {
-                    const index1 = items.findIndex(
-                        innerItem => getKey(innerItem) === previouslySelectedKey
-                    )
-                    const index2 = items.findIndex(innerItem => getKey(innerItem) === key)
-                    const selectedItems =
-                        index1 <= index2
-                            ? items.slice(index1, index2 + 1)
-                            : items.slice(index2, index1 + 1)
-                    return selectedItems.map(getKey)
-                }
-            }
-            if (shortcuts.matchesMouseAction(shortcutsModule.MouseAction.selectRange, event)) {
-                setSelectedKeys(new Set(getNewlySelectedKeys()))
-            } else if (
-                shortcuts.matchesMouseAction(
-                    shortcutsModule.MouseAction.selectAdditionalRange,
-                    event
-                )
-            ) {
-                setSelectedKeys(
-                    oldSelectedItems => new Set([...oldSelectedItems, ...getNewlySelectedKeys()])
-                )
-            } else if (
-                shortcuts.matchesMouseAction(shortcutsModule.MouseAction.selectAdditional, event)
-            ) {
-                setSelectedKeys(oldSelectedItems => {
-                    const newItems = new Set(oldSelectedItems)
-                    if (oldSelectedItems.has(key)) {
-                        newItems.delete(key)
-                    } else {
-                        newItems.add(key)
-                    }
-                    return newItems
-                })
-            } else {
-                setSelectedKeys(new Set([key]))
-            }
-            setPreviouslySelectedKey(key)
-        },
-        [
-            items,
-            previouslySelectedKey,
-            shortcuts,
-            /* should never change */ setSelectedKeys,
-            /* should never change */ getKey,
-        ]
-    )
-
-    const headerRow = (
-        <tr ref={headerRowRef} className="sticky top-0">
-            {columns.map(column => {
-                // This is a React component, even though it does not contain JSX.
-                // eslint-disable-next-line no-restricted-syntax
-                const Heading = column.heading
-                return (
-                    <th
-                        key={column.id}
-                        className={`text-sm font-semibold ${column.className ?? ''}`}
-                    >
-                        <Heading
-                            // @ts-expect-error The following line is safe; the type error occurs
-                            // because a property with a conditional type is being destructured.
-                            state={props.state}
-                        />
-                    </th>
-                )
-            })}
-        </tr>
-    )
-
-    const itemRows = isLoading ? (
-        <tr className="h-8">
-            <td colSpan={columns.length} className="bg-transparent">
-                <div className="grid justify-around w-full">
-                    <Spinner size={LOADING_SPINNER_SIZE} state={spinnerState} />
-                </div>
-            </td>
-        </tr>
-    ) : (
-        items.map(item => {
-            const key = getKey(item)
-            const isSelected = selectedKeys.has(key)
-            const isSoleSelectedItem = selectedKeys.size === 1 && isSelected
-            return (
-                <RowComponent
-                    {...rowProps}
-                    columns={columns}
-                    // The following two lines are safe; the type error occurs because a property
-                    // with a conditional type is being destructured.
-                    // eslint-disable-next-line no-restricted-syntax
-                    state={rowProps.state as never}
-                    // eslint-disable-next-line no-restricted-syntax
-                    initialRowState={rowProps.initialRowState as never}
-                    key={key}
-                    keyProp={key}
-                    item={item}
-                    hidden={filter != null ? !filter(item) : false}
-                    selected={isSelected}
-                    setSelected={selected => {
-                        setSelectedKeys(oldSelectedKeys =>
-                            set.withPresence(oldSelectedKeys, key, selected)
-                        )
-                    }}
-                    isSoleSelectedItem={isSoleSelectedItem}
-                    allowContextMenu={selectedKeys.size === 0 || !isSelected || isSoleSelectedItem}
-                    onClick={onRowClick}
-                    onContextMenu={(_innerProps, event) => {
-                        if (!isSelected) {
-                            event.preventDefault()
-                            event.stopPropagation()
-                            setPreviouslySelectedKey(key)
-                            setSelectedKeys(new Set([key]))
-                        }
-                    }}
-                    draggable={draggableRows}
-                    onDragStart={event => {
-                        if (onRowDragStart != null) {
-                            if (!selectedKeys.has(key)) {
-                                setPreviouslySelectedKey(key)
-                                setSelectedKeys(new Set([key]))
-                            }
-                            onRowDragStart(event, item, key)
-                        }
-                    }}
-                    onDrag={event => {
-                        onRowDrag?.(event, item, key)
-                    }}
-                    onDragOver={event => {
-                        onRowDragOver?.(event, item, key)
-                    }}
-                    onDragEnd={event => {
-                        onRowDragEnd?.(event, item, key)
-                    }}
-                    onDrop={event => {
-                        onRowDrop?.(event, item, key)
-                    }}
-                />
-            )
-        })
-    )
-
-    return (
-        <div
-            className="grow flex flex-col"
-            onContextMenu={event => {
-                onContextMenu(selectedKeys, event, setSelectedKeys)
-            }}
-            onDragLeave={onDragLeave}
-        >
-            <table className="rounded-rows table-fixed border-collapse">
-                <thead>{headerRow}</thead>
-                <tbody ref={bodyRef}>
-                    {itemRows}
-                    {placeholder && (
-                        <tr className="h-8 hidden first:table-row">
-                            <td colSpan={columns.length} className="bg-transparent">
-                                {placeholder}
-                            </td>
-                        </tr>
-                    )}
-                </tbody>
-            </table>
-            {footer}
-        </div>
-    )
-}
diff --git a/app/ide-desktop/lib/dashboard/src/components/TableColumn.tsx b/app/ide-desktop/lib/dashboard/src/components/TableColumn.tsx
deleted file mode 100644
index e902fc96ea8a..000000000000
--- a/app/ide-desktop/lib/dashboard/src/components/TableColumn.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-/** @file Types for columns in a `Table`. */
-
-// =============
-// === Types ===
-// =============
-
-/** Props for a {@link TableColumn}. */
-export interface TableColumnProps<T, State = never, RowState = never, Key extends string = string> {
-    keyProp: Key
-    item: T
-    setItem: React.Dispatch<React.SetStateAction<T>>
-    selected: boolean
-    setSelected: (selected: boolean) => void
-    isSoleSelectedItem: boolean
-    state: State
-    rowState: RowState
-    setRowState: React.Dispatch<React.SetStateAction<RowState>>
-}
-
-/** Props for a {@link TableColumn}. */
-export interface TableColumnHeadingProps<State = never> {
-    state: State
-}
-
-/** Metadata describing how to render a column of the table. */
-export interface TableColumn<T, State = never, RowState = never, Key extends string = string> {
-    id: string
-    className?: string
-    heading: (props: TableColumnHeadingProps<State>) => JSX.Element
-    render: (props: TableColumnProps<T, State, RowState, Key>) => JSX.Element
-}
diff --git a/app/ide-desktop/lib/dashboard/src/components/TableRow.tsx b/app/ide-desktop/lib/dashboard/src/components/TableRow.tsx
deleted file mode 100644
index 77b66fd67326..000000000000
--- a/app/ide-desktop/lib/dashboard/src/components/TableRow.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-/** @file A row in a `Table`. */
-import * as React from 'react'
-
-import * as modalProvider from '#/providers/ModalProvider'
-
-import type * as tableColumn from '#/components/TableColumn'
-
-// =============================
-// === Partial `Props` types ===
-// =============================
-
-/** `state: State`. */
-interface StateProp<State> {
-    state: State
-}
-
-/** `tablerowState` and `setTableRowState`. */
-interface InternalTableRowStateProps<TableRowState> {
-    rowState: TableRowState
-    setRowState: React.Dispatch<React.SetStateAction<TableRowState>>
-}
-
-/** `initialRowState: RowState`. */
-interface InitialRowStateProp<RowState> {
-    initialRowState: RowState
-}
-
-// ================
-// === TableRow ===
-// ================
-
-/** Common properties for state and setters passed to event handlers on a {@link TableRow}. */
-interface InternalTableRowInnerProps<T, Key extends string = string> {
-    key: Key
-    item: T
-    setItem: React.Dispatch<React.SetStateAction<T>>
-}
-
-/** State and setters passed to event handlers on a {@link TableRow}. */
-export type TableRowInnerProps<
-    T,
-    State = never,
-    RowState = never,
-    Key extends string = string,
-> = InternalTableRowInnerProps<T, Key> &
-    ([RowState] extends never ? unknown : InternalTableRowStateProps<RowState>) &
-    ([State] extends never ? unknown : StateProp<State>)
-
-/** Props for a {@link TableRow}. */
-interface InternalBaseTableRowProps<T, State = never, RowState = never, Key extends string = string>
-    extends Omit<JSX.IntrinsicElements['tr'], 'onClick' | 'onContextMenu'> {
-    keyProp: Key
-    tableRowRef?: React.RefObject<HTMLTableRowElement>
-    item: T
-    /** Pass this in only if `item` also needs to be updated in the parent component. */
-    setItem?: React.Dispatch<React.SetStateAction<T>>
-    state?: State
-    hidden: boolean
-    initialRowState?: RowState
-    /** Pass this in only if `rowState` also needs to be updated in the parent component. */
-    setRowState?: React.Dispatch<React.SetStateAction<RowState>>
-    columns: tableColumn.TableColumn<T, State, RowState, Key>[]
-    selected: boolean
-    setSelected: (selected: boolean) => void
-    isSoleSelectedItem: boolean
-    allowContextMenu: boolean
-    onClick: (props: TableRowInnerProps<T, State, RowState, Key>, event: React.MouseEvent) => void
-    onContextMenu?: (
-        props: TableRowInnerProps<T, State, RowState, Key>,
-        event: React.MouseEvent<HTMLTableRowElement>
-    ) => void
-}
-
-/** Props for a {@link TableRow}. */
-export type TableRowProps<
-    T,
-    State = never,
-    TableRowState = never,
-    Key extends string = string,
-> = InternalBaseTableRowProps<T, State, TableRowState, Key> &
-    ([State] extends [never] ? unknown : StateProp<State>) &
-    ([TableRowState] extends [never] ? unknown : InitialRowStateProp<TableRowState>)
-
-/** A row of a table. This is required because each row may store its own state. */
-export default function TableRow<T, State = never, RowState = never, Key extends string = string>(
-    props: TableRowProps<T, State, RowState, Key>
-) {
-    const {
-        keyProp: key,
-        tableRowRef,
-        item: rawItem,
-        setItem: rawSetItem,
-        state,
-        initialRowState,
-        setRowState: rawSetRowState,
-        columns,
-        hidden,
-        selected,
-        setSelected,
-        isSoleSelectedItem,
-        // This prop is unused here, but is useful for components wrapping this component.
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        allowContextMenu,
-        onClick,
-        onContextMenu,
-        className,
-        ...passthrough
-    } = props
-    const { unsetModal } = modalProvider.useSetModal()
-
-    const [fallbackItem, fallbackSetItem] = React.useState(rawItem)
-    /** The item represented by this row. This may change as backend requests are sent. */
-    const [item, setItem] =
-        rawSetItem != null ? [rawItem, rawSetItem] : [fallbackItem, fallbackSetItem]
-    /** This is SAFE, as the type is defined such that they MUST be present when `RowState` is not
-     * `never`.
-     * See the type definitions of {@link TableRowProps} and `TableProps`. */
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const [fallbackRowState, fallbackSetRowState] = React.useState<RowState>(initialRowState!)
-    /** The internal state for this row. This may change as backend requests are sent. */
-    const [rowState, setRowState] =
-        initialRowState != null && rawSetRowState != null
-            ? [initialRowState, rawSetRowState]
-            : [fallbackRowState, fallbackSetRowState]
-
-    React.useEffect(() => {
-        if (rawSetItem == null) {
-            setItem(rawItem)
-        }
-    }, [rawItem, /* should never change */ setItem, /* should never change */ rawSetItem])
-
-    const innerProps: TableRowInnerProps<T, State, RowState, Key> = {
-        key,
-        item,
-        setItem,
-        // This is SAFE, as the type is defined such that they MUST be present when `State` is not
-        //`never`.
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        state: state!,
-        rowState,
-        setRowState,
-    }
-
-    return hidden ? null : (
-        <tr
-            ref={tableRowRef}
-            tabIndex={-1}
-            onClick={event => {
-                unsetModal()
-                onClick(innerProps, event)
-            }}
-            onContextMenu={event => {
-                onContextMenu?.(innerProps, event)
-            }}
-            className={`h-8 transition duration-300 ease-in-out ${className ?? ''} ${
-                selected ? 'selected' : ''
-            }`}
-            {...passthrough}
-        >
-            {columns.map(column => {
-                // This is a React component even though it does not contain JSX.
-                // eslint-disable-next-line no-restricted-syntax
-                const Render = column.render
-                return (
-                    <td key={column.id} className={column.className ?? ''}>
-                        <Render
-                            keyProp={key}
-                            item={item}
-                            setItem={setItem}
-                            selected={selected}
-                            setSelected={setSelected}
-                            isSoleSelectedItem={isSoleSelectedItem}
-                            /** This is SAFE, as the type is defined such that they MUST be
-                             * present if it is specified as a generic parameter.
-                             * See the type definitions of {@link TableRowProps} and
-                             * `TableProps`. */
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                            state={state!}
-                            rowState={rowState}
-                            setRowState={setRowState}
-                        />
-                    </td>
-                )
-            })}
-        </tr>
-    )
-}
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/AssetRow.tsx b/app/ide-desktop/lib/dashboard/src/components/dashboard/AssetRow.tsx
index ba2e1c7fd5ab..679fb94f45ce 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/AssetRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/AssetRow.tsx
@@ -1,4 +1,4 @@
-/** @file A {@link TableRow} for an arbitrary asset. */
+/** @file A table row for an arbitrary asset. */
 import * as React from 'react'
 
 import BlankIcon from 'enso-assets/blank.svg'
@@ -24,9 +24,8 @@ import * as permissions from '#/utilities/permissions'
 import * as set from '#/utilities/set'
 import Visibility, * as visibilityModule from '#/utilities/visibility'
 
+import type * as column from '#/components/dashboard/column'
 import StatelessSpinner, * as statelessSpinner from '#/components/StatelessSpinner'
-import type * as tableRow from '#/components/TableRow'
-import TableRow from '#/components/TableRow'
 
 // =================
 // === Constants ===
@@ -43,20 +42,42 @@ const EMPTY_DIRECTORY_PLACEHOLDER = <span className="px-2 opacity-75">This folde
 // === AssetRow ===
 // ================
 
+/** Common properties for state and setters passed to event handlers on an {@link AssetRow}. */
+export interface AssetRowInnerProps {
+    key: backendModule.AssetId
+    item: assetTreeNode.AssetTreeNode
+    setItem: React.Dispatch<React.SetStateAction<assetTreeNode.AssetTreeNode>>
+    state: assetsTable.AssetsTableState
+    rowState: assetsTable.AssetRowState
+    setRowState: React.Dispatch<React.SetStateAction<assetsTable.AssetRowState>>
+}
+
 /** Props for an {@link AssetRow}. */
 export interface AssetRowProps
-    extends tableRow.TableRowProps<
-        assetTreeNode.AssetTreeNode,
-        assetsTable.AssetsTableState,
-        assetsTable.AssetRowState,
-        backendModule.AssetId
-    > {}
+    extends Omit<JSX.IntrinsicElements['tr'], 'onClick' | 'onContextMenu'> {
+    keyProp: backendModule.AssetId
+    tableRowRef?: React.RefObject<HTMLTableRowElement>
+    item: assetTreeNode.AssetTreeNode
+    state: assetsTable.AssetsTableState
+    hidden: boolean
+    initialRowState: assetsTable.AssetRowState
+    columns: column.AssetColumn[]
+    selected: boolean
+    setSelected: (selected: boolean) => void
+    isSoleSelectedItem: boolean
+    allowContextMenu: boolean
+    onClick: (props: AssetRowInnerProps, event: React.MouseEvent) => void
+    onContextMenu?: (
+        props: AssetRowInnerProps,
+        event: React.MouseEvent<HTMLTableRowElement>
+    ) => void
+}
 
 /** A row containing an {@link backendModule.AnyAsset}. */
 export default function AssetRow(props: AssetRowProps) {
     const { keyProp: key, item: rawItem, initialRowState, hidden, selected } = props
     const { isSoleSelectedItem, setSelected, allowContextMenu, onContextMenu, state } = props
-    const { columns } = props
+    const { tableRowRef, columns, onClick } = props
     const { visibilities, assetEvents, dispatchAssetEvent, dispatchAssetListEvent } = state
     const { setAssetSettingsPanelProps, doToggleDirectoryExpansion, doCopy, doCut, doPaste } = state
 
@@ -504,108 +525,139 @@ export default function AssetRow(props: AssetRowProps) {
         case backendModule.AssetType.project:
         case backendModule.AssetType.file:
         case backendModule.AssetType.secret: {
+            const innerProps: AssetRowInnerProps = {
+                key,
+                item,
+                setItem,
+                state,
+                rowState,
+                setRowState,
+            }
             return (
                 <>
-                    <TableRow
-                        className={`${visibilityModule.CLASS_NAME[visibility]} ${
-                            isDraggedOver ? 'selected' : ''
-                        }`}
-                        {...props}
-                        hidden={hidden || insertionVisibility === Visibility.hidden}
-                        onContextMenu={(innerProps, event) => {
-                            if (allowContextMenu) {
-                                event.preventDefault()
-                                event.stopPropagation()
-                                onContextMenu?.(innerProps, event)
-                                setModal(
-                                    <AssetContextMenu
-                                        innerProps={innerProps}
-                                        event={event}
-                                        eventTarget={
-                                            event.target instanceof HTMLElement
-                                                ? event.target
-                                                : event.currentTarget
-                                        }
-                                        doCopy={doCopy}
-                                        doCut={doCut}
-                                        doPaste={doPaste}
-                                        doDelete={doDelete}
-                                    />
-                                )
-                            } else {
-                                onContextMenu?.(innerProps, event)
-                            }
-                        }}
-                        item={item}
-                        setItem={setItem}
-                        initialRowState={rowState}
-                        setRowState={setRowState}
-                        onDragEnter={event => {
-                            if (dragOverTimeoutHandle.current != null) {
-                                window.clearTimeout(dragOverTimeoutHandle.current)
-                            }
-                            if (backendModule.assetIsDirectory(asset)) {
-                                dragOverTimeoutHandle.current = window.setTimeout(() => {
+                    {!hidden && insertionVisibility !== Visibility.hidden && (
+                        <tr
+                            ref={tableRowRef}
+                            tabIndex={-1}
+                            onClick={event => {
+                                unsetModal()
+                                onClick(innerProps, event)
+                            }}
+                            onContextMenu={event => {
+                                if (allowContextMenu) {
+                                    event.preventDefault()
+                                    event.stopPropagation()
+                                    onContextMenu?.(innerProps, event)
+                                    setModal(
+                                        <AssetContextMenu
+                                            innerProps={innerProps}
+                                            event={event}
+                                            eventTarget={
+                                                event.target instanceof HTMLElement
+                                                    ? event.target
+                                                    : event.currentTarget
+                                            }
+                                            doCopy={doCopy}
+                                            doCut={doCut}
+                                            doPaste={doPaste}
+                                            doDelete={doDelete}
+                                        />
+                                    )
+                                } else {
+                                    onContextMenu?.(innerProps, event)
+                                }
+                            }}
+                            className={`h-8 transition duration-300 ease-in-out ${
+                                visibilityModule.CLASS_NAME[visibility]
+                            } ${isDraggedOver || selected ? 'selected' : ''}`}
+                            onDragEnter={event => {
+                                if (dragOverTimeoutHandle.current != null) {
+                                    window.clearTimeout(dragOverTimeoutHandle.current)
+                                }
+                                if (backendModule.assetIsDirectory(asset)) {
+                                    dragOverTimeoutHandle.current = window.setTimeout(() => {
+                                        doToggleDirectoryExpansion(
+                                            asset.id,
+                                            item.key,
+                                            asset.title,
+                                            true
+                                        )
+                                    }, DRAG_EXPAND_DELAY_MS)
+                                }
+                                // Required because `dragover` does not fire on `mouseenter`.
+                                onDragOver(event)
+                            }}
+                            onDragOver={event => {
+                                props.onDragOver?.(event)
+                                onDragOver(event)
+                            }}
+                            onDragEnd={event => {
+                                clearDragState()
+                                props.onDragEnd?.(event)
+                            }}
+                            onDragLeave={event => {
+                                if (
+                                    dragOverTimeoutHandle.current != null &&
+                                    (!(event.relatedTarget instanceof Node) ||
+                                        !event.currentTarget.contains(event.relatedTarget))
+                                ) {
+                                    window.clearTimeout(dragOverTimeoutHandle.current)
+                                }
+                                clearDragState()
+                                props.onDragLeave?.(event)
+                            }}
+                            onDrop={event => {
+                                props.onDrop?.(event)
+                                clearDragState()
+                                const [directoryKey, directoryId, directoryTitle] =
+                                    item.item.type === backendModule.AssetType.directory
+                                        ? [item.key, item.item.id, asset.title]
+                                        : [item.directoryKey, item.directoryId, null]
+                                const payload = drag.ASSET_ROWS.lookup(event)
+                                if (
+                                    payload != null &&
+                                    payload.every(innerItem => innerItem.key !== directoryKey)
+                                ) {
+                                    event.preventDefault()
+                                    event.stopPropagation()
+                                    unsetModal()
                                     doToggleDirectoryExpansion(
-                                        asset.id,
-                                        item.key,
-                                        asset.title,
+                                        directoryId,
+                                        directoryKey,
+                                        directoryTitle,
                                         true
                                     )
-                                }, DRAG_EXPAND_DELAY_MS)
-                            }
-                            // Required because `dragover` does not fire on `mouseenter`.
-                            onDragOver(event)
-                        }}
-                        onDragOver={event => {
-                            props.onDragOver?.(event)
-                            onDragOver(event)
-                        }}
-                        onDragEnd={event => {
-                            clearDragState()
-                            props.onDragEnd?.(event)
-                        }}
-                        onDragLeave={event => {
-                            if (
-                                dragOverTimeoutHandle.current != null &&
-                                (!(event.relatedTarget instanceof Node) ||
-                                    !event.currentTarget.contains(event.relatedTarget))
-                            ) {
-                                window.clearTimeout(dragOverTimeoutHandle.current)
-                            }
-                            clearDragState()
-                            props.onDragLeave?.(event)
-                        }}
-                        onDrop={event => {
-                            props.onDrop?.(event)
-                            clearDragState()
-                            const [directoryKey, directoryId, directoryTitle] =
-                                item.item.type === backendModule.AssetType.directory
-                                    ? [item.key, item.item.id, asset.title]
-                                    : [item.directoryKey, item.directoryId, null]
-                            const payload = drag.ASSET_ROWS.lookup(event)
-                            if (
-                                payload != null &&
-                                payload.every(innerItem => innerItem.key !== directoryKey)
-                            ) {
-                                event.preventDefault()
-                                event.stopPropagation()
-                                unsetModal()
-                                doToggleDirectoryExpansion(
-                                    directoryId,
-                                    directoryKey,
-                                    directoryTitle,
-                                    true
+                                    dispatchAssetEvent({
+                                        type: AssetEventType.move,
+                                        newParentKey: directoryKey,
+                                        newParentId: directoryId,
+                                        ids: new Set(payload.map(dragItem => dragItem.key)),
+                                    })
+                                }
+                            }}
+                        >
+                            {columns.map(column => {
+                                // This is a React component even though it does not contain JSX.
+                                // eslint-disable-next-line no-restricted-syntax
+                                const Render = column.render
+                                return (
+                                    <td key={column.id} className={column.className ?? ''}>
+                                        <Render
+                                            keyProp={key}
+                                            item={item}
+                                            setItem={setItem}
+                                            selected={selected}
+                                            setSelected={setSelected}
+                                            isSoleSelectedItem={isSoleSelectedItem}
+                                            state={state}
+                                            rowState={rowState}
+                                            setRowState={setRowState}
+                                        />
+                                    </td>
                                 )
-                                dispatchAssetEvent({
-                                    type: AssetEventType.move,
-                                    newParentKey: directoryKey,
-                                    newParentId: directoryId,
-                                    ids: new Set(payload.map(dragItem => dragItem.key)),
-                                })
-                            }
-                        }}
-                    />
+                            })}
+                        </tr>
+                    )}
                     {selected && allowContextMenu && insertionVisibility !== Visibility.hidden && (
                         // This is a copy of the context menu, since the context menu registers keyboard
                         // shortcut handlers. This is a bit of a hack, however it is preferable to duplicating
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/column.ts b/app/ide-desktop/lib/dashboard/src/components/dashboard/column.ts
index 1b83367c0952..219ffdbb5b78 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/column.ts
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/column.ts
@@ -1,36 +1,54 @@
 /** @file Column types and column display modes. */
-
 import type * as assetsTable from '#/layouts/dashboard/AssetsTable'
 import type * as backendModule from '#/services/backend'
 import type * as assetTreeNode from '#/utilities/assetTreeNode'
 
-import AssetNameColumn from '#/components/dashboard/AssetNameColumn'
 import * as columnUtils from '#/components/dashboard/column/columnUtils'
 import DocsColumn from '#/components/dashboard/column/DocsColumn'
 import LabelsColumn from '#/components/dashboard/column/LabelsColumn'
 import LastModifiedColumn from '#/components/dashboard/column/LastModifiedColumn'
+import NameColumn from '#/components/dashboard/column/NameColumn'
 import PlaceholderColumn from '#/components/dashboard/column/PlaceholderColumn'
 import SharedWithColumn from '#/components/dashboard/column/SharedWithColumn'
-import type * as tableColumn from '#/components/TableColumn'
 
-// ==========================
-// === LastModifiedColumn ===
-// ==========================
+// ===================
+// === AssetColumn ===
+// ===================
+
+/** Props for an arbitrary variant of {@link backendModule.Asset}. */
+export interface AssetColumnProps {
+    keyProp: backendModule.AssetId
+    item: assetTreeNode.AssetTreeNode
+    setItem: React.Dispatch<React.SetStateAction<assetTreeNode.AssetTreeNode>>
+    selected: boolean
+    setSelected: (selected: boolean) => void
+    isSoleSelectedItem: boolean
+    state: assetsTable.AssetsTableState
+    rowState: assetsTable.AssetRowState
+    setRowState: React.Dispatch<React.SetStateAction<assetsTable.AssetRowState>>
+}
+
+/** Props for a {@link AssetColumn}. */
+export interface AssetColumnHeadingProps {
+    state: assetsTable.AssetsTableState
+}
+
+/** Metadata describing how to render a column of the table. */
+export interface AssetColumn {
+    id: string
+    className?: string
+    heading: (props: AssetColumnHeadingProps) => JSX.Element
+    render: (props: AssetColumnProps) => JSX.Element
+}
 
-/** {@link tableColumn.TableColumnProps} for an unknown variant of {@link backendModule.Asset}. */
-export type AssetColumnProps = tableColumn.TableColumnProps<
-    assetTreeNode.AssetTreeNode,
-    assetsTable.AssetsTableState,
-    assetsTable.AssetRowState,
-    backendModule.AssetId
->
+// =======================
+// === COLUMN_RENDERER ===
+// =======================
 
-/** React components for every column except for the name column. */
-// This is not a React component even though it contains JSX.
-// eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-unused-vars
+/** React components for every column. */
 export const COLUMN_RENDERER: Record<columnUtils.Column, (props: AssetColumnProps) => JSX.Element> =
     {
-        [columnUtils.Column.name]: AssetNameColumn,
+        [columnUtils.Column.name]: NameColumn,
         [columnUtils.Column.modified]: LastModifiedColumn,
         [columnUtils.Column.sharedWith]: SharedWithColumn,
         [columnUtils.Column.labels]: LabelsColumn,
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/AssetNameColumn.tsx b/app/ide-desktop/lib/dashboard/src/components/dashboard/column/NameColumn.tsx
similarity index 100%
rename from app/ide-desktop/lib/dashboard/src/components/dashboard/AssetNameColumn.tsx
rename to app/ide-desktop/lib/dashboard/src/components/dashboard/column/NameColumn.tsx
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading.ts b/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading.ts
index bb1bc84233aa..067e7c9c0868 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading.ts
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading.ts
@@ -1,7 +1,5 @@
 /** @file A lookup containing a component for the corresponding heading for each column type. */
-
-import type * as assetsTable from '#/layouts/dashboard/AssetsTable'
-
+import type * as column from '#/components/dashboard/column'
 import * as columnUtils from '#/components/dashboard/column/columnUtils'
 import AccessedByProjectsColumnHeading from '#/components/dashboard/columnHeading/AccessedByProjectsColumnHeading'
 import AccessedDataColumnHeading from '#/components/dashboard/columnHeading/AccessedDataColumnHeading'
@@ -10,11 +8,10 @@ import LabelsColumnHeading from '#/components/dashboard/columnHeading/LabelsColu
 import ModifiedColumnHeading from '#/components/dashboard/columnHeading/ModifiedColumnHeading'
 import NameColumnHeading from '#/components/dashboard/columnHeading/NameColumnHeading'
 import SharedWithColumnHeading from '#/components/dashboard/columnHeading/SharedWithColumnHeading'
-import type * as tableColumn from '#/components/TableColumn'
 
 export const COLUMN_HEADING: Record<
     columnUtils.Column,
-    (props: tableColumn.TableColumnHeadingProps<assetsTable.AssetsTableState>) => JSX.Element
+    (props: column.AssetColumnHeadingProps) => JSX.Element
 > = {
     [columnUtils.Column.name]: NameColumnHeading,
     [columnUtils.Column.modified]: ModifiedColumnHeading,
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading/ModifiedColumnHeading.tsx b/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading/ModifiedColumnHeading.tsx
index 7cf7cfb67349..818869f18ac9 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading/ModifiedColumnHeading.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading/ModifiedColumnHeading.tsx
@@ -4,17 +4,14 @@ import * as React from 'react'
 import SortAscendingIcon from 'enso-assets/sort_ascending.svg'
 import TimeIcon from 'enso-assets/time.svg'
 
-import type * as assetsTable from '#/layouts/dashboard/AssetsTable'
 import * as sorting from '#/utilities/sorting'
 
+import type * as column from '#/components/dashboard/column'
 import * as columnUtils from '#/components/dashboard/column/columnUtils'
 import SvgMask from '#/components/SvgMask'
-import type * as tableColumn from '#/components/TableColumn'
 
 /** A heading for the "Modified" column. */
-export default function ModifiedColumnHeading(
-    props: tableColumn.TableColumnHeadingProps<assetsTable.AssetsTableState>
-): JSX.Element {
+export default function ModifiedColumnHeading(props: column.AssetColumnHeadingProps): JSX.Element {
     const { state } = props
     const { sortColumn, setSortColumn, sortDirection, setSortDirection } = state
     const [isHovered, setIsHovered] = React.useState(false)
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading/NameColumnHeading.tsx b/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading/NameColumnHeading.tsx
index 15bc13e8c991..fa8b6eaa2fb9 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading/NameColumnHeading.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/columnHeading/NameColumnHeading.tsx
@@ -3,16 +3,13 @@ import * as React from 'react'
 
 import SortAscendingIcon from 'enso-assets/sort_ascending.svg'
 
-import type * as assetsTable from '#/layouts/dashboard/AssetsTable'
 import * as sorting from '#/utilities/sorting'
 
+import type * as column from '#/components/dashboard/column'
 import * as columnUtils from '#/components/dashboard/column/columnUtils'
-import type * as tableColumn from '#/components/TableColumn'
 
 /** A heading for the "Name" column. */
-export default function NameColumnHeading(
-    props: tableColumn.TableColumnHeadingProps<assetsTable.AssetsTableState>
-): JSX.Element {
+export default function NameColumnHeading(props: column.AssetColumnHeadingProps): JSX.Element {
     const { state } = props
     const { sortColumn, setSortColumn, sortDirection, setSortDirection } = state
     const [isHovered, setIsHovered] = React.useState(false)
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetContextMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetContextMenu.tsx
index 48db7a537b94..0f1274aafff5 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetContextMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetContextMenu.tsx
@@ -6,7 +6,6 @@ import * as toast from 'react-toastify'
 import AssetEventType from '#/events/AssetEventType'
 import AssetListEventType from '#/events/AssetListEventType'
 import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
-import type * as assetsTable from '#/layouts/dashboard/AssetsTable'
 import Category from '#/layouts/dashboard/CategorySwitcher/Category'
 import GlobalContextMenu from '#/layouts/dashboard/GlobalContextMenu'
 import ManageLabelsModal from '#/layouts/dashboard/ManageLabelsModal'
@@ -18,7 +17,6 @@ import * as loggerProvider from '#/providers/LoggerProvider'
 import * as modalProvider from '#/providers/ModalProvider'
 import * as backendModule from '#/services/backend'
 import * as remoteBackendModule from '#/services/remoteBackend'
-import type * as assetTreeNode from '#/utilities/assetTreeNode'
 import * as http from '#/utilities/http'
 import * as object from '#/utilities/object'
 import * as permissions from '#/utilities/permissions'
@@ -27,9 +25,9 @@ import * as shortcuts from '#/utilities/shortcuts'
 import ContextMenu from '#/components/ContextMenu'
 import ContextMenus from '#/components/ContextMenus'
 import ContextMenuSeparator from '#/components/ContextMenuSeparator'
+import type * as assetRow from '#/components/dashboard/AssetRow'
 import ConfirmDeleteModal from '#/components/dashboard/ConfirmDeleteModal'
 import MenuEntry from '#/components/MenuEntry'
-import type * as tableRow from '#/components/TableRow'
 
 // ========================
 // === AssetContextMenu ===
@@ -38,11 +36,7 @@ import type * as tableRow from '#/components/TableRow'
 /** Props for a {@link AssetContextMenu}. */
 export interface AssetContextMenuProps {
     hidden?: boolean
-    innerProps: tableRow.TableRowInnerProps<
-        assetTreeNode.AssetTreeNode,
-        assetsTable.AssetsTableState,
-        assetsTable.AssetRowState
-    >
+    innerProps: assetRow.AssetRowInnerProps
     event: Pick<React.MouseEvent, 'pageX' | 'pageY'>
     eventTarget: HTMLElement | null
     doDelete: () => void
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTable.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTable.tsx
index c6b7c797f274..69cea382d7c2 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTable.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTable.tsx
@@ -12,8 +12,8 @@ import * as eventHooks from '#/hooks/eventHooks'
 import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 import type * as assetSearchBar from '#/layouts/dashboard/assetSearchBar'
 import type * as assetSettingsPanel from '#/layouts/dashboard/AssetSettingsPanel'
+import AssetsTableContextMenu from '#/layouts/dashboard/AssetsTableContextMenu'
 import Category from '#/layouts/dashboard/CategorySwitcher/Category'
-import GlobalContextMenu from '#/layouts/dashboard/GlobalContextMenu'
 import * as authProvider from '#/providers/AuthProvider'
 import * as backendProvider from '#/providers/BackendProvider'
 import * as localStorageProvider from '#/providers/LocalStorageProvider'
@@ -38,35 +38,27 @@ import * as uniqueString from '#/utilities/uniqueString'
 import Visibility from '#/utilities/visibility'
 
 import Button from '#/components/Button'
-import ContextMenu from '#/components/ContextMenu'
-import ContextMenus from '#/components/ContextMenus'
-import AssetNameColumn from '#/components/dashboard/AssetNameColumn'
+import type * as assetRow from '#/components/dashboard/AssetRow'
 import AssetRow from '#/components/dashboard/AssetRow'
 import * as columnModule from '#/components/dashboard/column'
 import * as columnUtils from '#/components/dashboard/column/columnUtils'
+import NameColumn from '#/components/dashboard/column/NameColumn'
 import * as columnHeading from '#/components/dashboard/columnHeading'
-import ConfirmDeleteModal from '#/components/dashboard/ConfirmDeleteModal'
 import Label from '#/components/dashboard/Label'
 import DragModal from '#/components/DragModal'
-import MenuEntry from '#/components/MenuEntry'
-import Table from '#/components/Table'
+import Spinner, * as spinner from '#/components/Spinner'
 
 // =================
 // === Constants ===
 // =================
 
+/** The size of the loading spinner. */
+const LOADING_SPINNER_SIZE = 36
 /** The number of pixels the header bar should shrink when the extra column selector is visible. */
 const TABLE_HEADER_WIDTH_SHRINKAGE_PX = 116
 /** A value that represents that the first argument is less than the second argument, in a
  * sorting function. */
 const COMPARE_LESS_THAN = -1
-/** The user-facing name of this asset type. */
-const ASSET_TYPE_NAME = 'item'
-/** The user-facing plural name of this asset type. */
-const ASSET_TYPE_NAME_PLURAL = 'items'
-// This is a function, even though it is not syntactically a function.
-// eslint-disable-next-line no-restricted-syntax
-const pluralize = string.makePluralize(ASSET_TYPE_NAME, ASSET_TYPE_NAME_PLURAL)
 /** The default placeholder row. */
 const PLACEHOLDER = (
     <span className="opacity-75">
@@ -383,6 +375,12 @@ export default function AssetsTable(props: AssetsTableProps) {
         )
     })
     const isCloud = backend.type === backendModule.BackendType.remote
+    const placeholder =
+        category === Category.trash
+            ? TRASH_PLACEHOLDER
+            : query.query !== ''
+            ? QUERY_PLACEHOLDER
+            : PLACEHOLDER
     const scrollContainerRef = React.useRef<HTMLDivElement>(null)
     const headerRowRef = React.useRef<HTMLTableRowElement>(null)
     const assetTreeRef = React.useRef<assetTreeNode.AssetTreeNode>(assetTree)
@@ -1577,160 +1575,35 @@ export default function AssetsTable(props: AssetsTableProps) {
         ]
     )
 
-    const doRenderContextMenu = React.useCallback(
-        (
-            innerSelectedKeys: Set<backendModule.AssetId>,
-            event: Pick<React.MouseEvent<Element, MouseEvent>, 'pageX' | 'pageY'>,
-            innerSetSelectedKeys: (items: Set<backendModule.AssetId>) => void,
-            hidden: boolean
-        ) => {
-            const pluralized = pluralize(innerSelectedKeys.size)
-            // This works because all items are mutated, ensuring their value stays
-            // up to date.
-            const ownsAllSelectedAssets =
-                isCloud ||
-                (organization != null &&
-                    Array.from(innerSelectedKeys, key => {
-                        const userPermissions = nodeMapRef.current.get(key)?.item.permissions
-                        const selfPermission = userPermissions?.find(
-                            permission => permission.user.user_email === organization.email
-                        )
-                        return selfPermission?.permission === permissions.PermissionAction.own
-                    }).every(isOwner => isOwner))
-            // This is not a React component even though it contains JSX.
-            // eslint-disable-next-line no-restricted-syntax
-            const doDeleteAll = () => {
-                if (isCloud) {
-                    unsetModal()
-                    dispatchAssetEvent({
-                        type: AssetEventType.delete,
-                        ids: innerSelectedKeys,
-                    })
-                } else {
-                    setModal(
-                        <ConfirmDeleteModal
-                            description={`${innerSelectedKeys.size} selected ${pluralized}`}
-                            doDelete={() => {
-                                innerSetSelectedKeys(new Set())
-                                dispatchAssetEvent({
-                                    type: AssetEventType.delete,
-                                    ids: innerSelectedKeys,
-                                })
-                            }}
-                        />
-                    )
-                }
-            }
-            // This is not a React component even though it contains JSX.
-            // eslint-disable-next-line no-restricted-syntax
-            const doRestoreAll = () => {
-                unsetModal()
-                dispatchAssetEvent({
-                    type: AssetEventType.restore,
-                    ids: innerSelectedKeys,
-                })
-            }
-            if (category === Category.trash) {
-                return innerSelectedKeys.size === 0 ? (
-                    <></>
-                ) : (
-                    <ContextMenus key={uniqueString.uniqueString()} hidden={hidden} event={event}>
-                        <ContextMenu hidden={hidden}>
-                            <MenuEntry
-                                hidden={hidden}
-                                action={shortcutsModule.KeyboardAction.restoreAllFromTrash}
-                                doAction={doRestoreAll}
-                            />
-                        </ContextMenu>
-                    </ContextMenus>
-                )
-            } else if (category !== Category.home) {
-                return null
-            } else {
-                const deleteAction = isCloud
-                    ? shortcutsModule.KeyboardAction.moveAllToTrash
-                    : shortcutsModule.KeyboardAction.deleteAll
-                return (
-                    <ContextMenus key={uniqueString.uniqueString()} hidden={hidden} event={event}>
-                        {innerSelectedKeys.size !== 0 && (
-                            <ContextMenu hidden={hidden}>
-                                {ownsAllSelectedAssets && (
-                                    <MenuEntry
-                                        hidden={hidden}
-                                        action={deleteAction}
-                                        doAction={doDeleteAll}
-                                    />
-                                )}
-                                {isCloud && (
-                                    <MenuEntry
-                                        hidden={hidden}
-                                        action={shortcutsModule.KeyboardAction.copyAll}
-                                        doAction={doCopy}
-                                    />
-                                )}
-                                {isCloud && ownsAllSelectedAssets && (
-                                    <MenuEntry
-                                        hidden={hidden}
-                                        action={shortcutsModule.KeyboardAction.cutAll}
-                                        doAction={doCut}
-                                    />
-                                )}
-                                {pasteData != null && pasteData.data.size > 0 && (
-                                    <MenuEntry
-                                        hidden={hidden}
-                                        action={shortcutsModule.KeyboardAction.pasteAll}
-                                        doAction={() => {
-                                            const [firstKey] = innerSelectedKeys
-                                            const selectedNode =
-                                                innerSelectedKeys.size === 1 && firstKey != null
-                                                    ? nodeMapRef.current.get(firstKey)
-                                                    : null
-                                            if (
-                                                selectedNode?.item.type ===
-                                                backendModule.AssetType.directory
-                                            ) {
-                                                doPaste(selectedNode.key, selectedNode.item.id)
-                                            } else {
-                                                doPaste(rootDirectoryId, rootDirectoryId)
-                                            }
-                                        }}
-                                    />
-                                )}
-                            </ContextMenu>
-                        )}
-                        <GlobalContextMenu
-                            hidden={hidden}
-                            hasCopyData={pasteData != null}
-                            directoryKey={null}
-                            directoryId={null}
-                            dispatchAssetListEvent={dispatchAssetListEvent}
-                            doPaste={doPaste}
-                        />
-                    </ContextMenus>
-                )
-            }
-        },
+    const hiddenContextMenu = React.useMemo(
+        () => (
+            <AssetsTableContextMenu
+                hidden
+                category={category}
+                pasteData={pasteData}
+                selectedKeys={selectedKeys}
+                nodeMapRef={nodeMapRef}
+                event={{ pageX: 0, pageY: 0 }}
+                setSelectedKeys={setSelectedKeys}
+                dispatchAssetEvent={dispatchAssetEvent}
+                dispatchAssetListEvent={dispatchAssetListEvent}
+                doCopy={doCopy}
+                doCut={doCut}
+                doPaste={doPaste}
+            />
+        ),
         [
-            isCloud,
             category,
             pasteData,
+            selectedKeys,
             doCopy,
             doCut,
             doPaste,
-            organization,
-            rootDirectoryId,
             /* should never change */ dispatchAssetEvent,
             /* should never change */ dispatchAssetListEvent,
-            /* should never change */ setModal,
-            /* should never change */ unsetModal,
         ]
     )
 
-    const hiddenContextMenu = React.useMemo(
-        () => doRenderContextMenu(selectedKeys, { pageX: 0, pageY: 0 }, setSelectedKeys, true),
-        [doRenderContextMenu, selectedKeys]
-    )
-
     const onDragOver = (event: React.DragEvent<Element>) => {
         const payload = drag.ASSET_ROWS.lookup(event)
         const filtered = payload?.filter(item => item.asset.parentId !== rootDirectoryId)
@@ -1795,104 +1668,197 @@ export default function AssetsTable(props: AssetsTableProps) {
         ]
     )
 
-    return (
-        <div ref={scrollContainerRef} className="flex-1 overflow-auto">
-            <div className="flex flex-col w-min min-w-full h-full">
-                {backend.type !== backendModule.BackendType.local && (
-                    <div className="sticky top-0 h-0">
-                        <div className="block sticky right-0 ml-auto w-29 px-2 pt-2.25 pb-1.75 z-1">
-                            <div className="inline-flex gap-3">
-                                {columnUtils.EXTRA_COLUMNS.map(column => (
-                                    <Button
-                                        key={column}
-                                        active={extraColumns.has(column)}
-                                        image={columnUtils.EXTRA_COLUMN_IMAGES[column]}
-                                        onClick={event => {
-                                            event.stopPropagation()
-                                            const newExtraColumns = new Set(extraColumns)
-                                            if (extraColumns.has(column)) {
-                                                newExtraColumns.delete(column)
-                                            } else {
-                                                newExtraColumns.add(column)
-                                            }
-                                            setExtraColumns(newExtraColumns)
-                                        }}
-                                    />
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                )}
-                {hiddenContextMenu}
-                <Table<
-                    assetTreeNode.AssetTreeNode,
-                    AssetsTableState,
-                    AssetRowState,
-                    backendModule.AssetId
-                >
-                    scrollContainerRef={scrollContainerRef}
-                    headerRowRef={headerRowRef}
-                    footer={
-                        <div
-                            className="grow"
-                            onDragEnter={onDragOver}
-                            onDragOver={onDragOver}
-                            onDrop={event => {
-                                const payload = drag.ASSET_ROWS.lookup(event)
-                                const filtered = payload?.filter(
-                                    item => item.asset.parentId !== rootDirectoryId
-                                )
-                                if (filtered != null && filtered.length > 0) {
-                                    event.preventDefault()
-                                    event.stopPropagation()
-                                    unsetModal()
-                                    dispatchAssetEvent({
-                                        type: AssetEventType.move,
-                                        newParentKey: rootDirectoryId,
-                                        newParentId: rootDirectoryId,
-                                        ids: new Set(filtered.map(dragItem => dragItem.asset.id)),
-                                    })
-                                }
-                            }}
-                        />
-                    }
-                    rowComponent={AssetRow}
-                    items={displayItems}
-                    filter={node => visibilities.get(node.key) !== Visibility.hidden}
-                    isLoading={isLoading}
-                    state={state}
-                    initialRowState={INITIAL_ROW_STATE}
-                    getKey={assetTreeNode.AssetTreeNode.getKey}
-                    selectedKeys={selectedKeys}
-                    setSelectedKeys={setSelectedKeys}
-                    placeholder={
-                        category === Category.trash
-                            ? TRASH_PLACEHOLDER
-                            : query.query !== ''
-                            ? QUERY_PLACEHOLDER
-                            : PLACEHOLDER
+    const [spinnerState, setSpinnerState] = React.useState(spinner.SpinnerState.initial)
+    const [previouslySelectedKey, setPreviouslySelectedKey] =
+        React.useState<backendModule.AssetId | null>(null)
+    const bodyRef = React.useRef<HTMLTableSectionElement>(null)
+
+    // This is required to prevent the table body from overlapping the table header, because
+    // the table header is transparent.
+    React.useEffect(() => {
+        const body = bodyRef.current
+        const scrollContainer = scrollContainerRef.current
+        if (body != null && scrollContainer != null) {
+            let isClipPathUpdateQueued = false
+            const updateClipPath = () => {
+                isClipPathUpdateQueued = false
+                body.style.clipPath = `inset(${scrollContainer.scrollTop}px 0 0 0)`
+            }
+            const onScroll = () => {
+                if (!isClipPathUpdateQueued) {
+                    isClipPathUpdateQueued = true
+                    requestAnimationFrame(updateClipPath)
+                }
+            }
+            updateClipPath()
+            scrollContainer.addEventListener('scroll', onScroll)
+            return () => {
+                scrollContainer.removeEventListener('scroll', onScroll)
+            }
+        } else {
+            return
+        }
+    }, [/* should never change */ scrollContainerRef])
+
+    React.useEffect(() => {
+        const onDocumentClick = (event: MouseEvent) => {
+            if (
+                !shortcuts.matchesMouseAction(
+                    shortcutsModule.MouseAction.selectAdditional,
+                    event
+                ) &&
+                !shortcuts.matchesMouseAction(
+                    shortcutsModule.MouseAction.selectAdditionalRange,
+                    event
+                ) &&
+                selectedKeys.size !== 0
+            ) {
+                setSelectedKeys(new Set())
+            }
+        }
+        document.addEventListener('click', onDocumentClick)
+        return () => {
+            document.removeEventListener('click', onDocumentClick)
+        }
+    }, [selectedKeys, /* should never change */ setSelectedKeys, shortcuts])
+
+    React.useEffect(() => {
+        if (isLoading) {
+            // Ensure the spinner stays in the "initial" state for at least one frame,
+            // to ensure the CSS animation begins at the initial state.
+            requestAnimationFrame(() => {
+                setSpinnerState(spinner.SpinnerState.loadingFast)
+            })
+        } else {
+            setSpinnerState(spinner.SpinnerState.initial)
+        }
+    }, [isLoading])
+
+    const onRowClick = React.useCallback(
+        (innerRowProps: assetRow.AssetRowInnerProps, event: React.MouseEvent) => {
+            const { key } = innerRowProps
+            event.stopPropagation()
+            const getNewlySelectedKeys = () => {
+                if (previouslySelectedKey == null) {
+                    return [key]
+                } else {
+                    const index1 = displayItems.findIndex(
+                        innerItem =>
+                            assetTreeNode.AssetTreeNode.getKey(innerItem) === previouslySelectedKey
+                    )
+                    const index2 = displayItems.findIndex(
+                        innerItem => assetTreeNode.AssetTreeNode.getKey(innerItem) === key
+                    )
+                    const selectedItems =
+                        index1 <= index2
+                            ? displayItems.slice(index1, index2 + 1)
+                            : displayItems.slice(index2, index1 + 1)
+                    return selectedItems.map(assetTreeNode.AssetTreeNode.getKey)
+                }
+            }
+            if (shortcuts.matchesMouseAction(shortcutsModule.MouseAction.selectRange, event)) {
+                setSelectedKeys(new Set(getNewlySelectedKeys()))
+            } else if (
+                shortcuts.matchesMouseAction(
+                    shortcutsModule.MouseAction.selectAdditionalRange,
+                    event
+                )
+            ) {
+                setSelectedKeys(
+                    oldSelectedItems => new Set([...oldSelectedItems, ...getNewlySelectedKeys()])
+                )
+            } else if (
+                shortcuts.matchesMouseAction(shortcutsModule.MouseAction.selectAdditional, event)
+            ) {
+                setSelectedKeys(oldSelectedItems => {
+                    const newItems = new Set(oldSelectedItems)
+                    if (oldSelectedItems.has(key)) {
+                        newItems.delete(key)
+                    } else {
+                        newItems.add(key)
                     }
-                    columns={columnUtils.getColumnList(backend.type, extraColumns).map(column => ({
-                        id: column,
-                        className: columnUtils.COLUMN_CSS_CLASS[column],
-                        heading: columnHeading.COLUMN_HEADING[column],
-                        render: columnModule.COLUMN_RENDERER[column],
-                    }))}
-                    onContextMenu={(innerSelectedKeys, event, innerSetSelectedKeys) => {
-                        event.preventDefault()
-                        event.stopPropagation()
-                        const modal = doRenderContextMenu(
-                            innerSelectedKeys,
-                            event,
-                            innerSetSelectedKeys,
-                            false
+                    return newItems
+                })
+            } else {
+                setSelectedKeys(new Set([key]))
+            }
+            setPreviouslySelectedKey(key)
+        },
+        [displayItems, previouslySelectedKey, shortcuts, /* should never change */ setSelectedKeys]
+    )
+
+    const columns = columnUtils.getColumnList(backend.type, extraColumns).map(column => ({
+        id: column,
+        className: columnUtils.COLUMN_CSS_CLASS[column],
+        heading: columnHeading.COLUMN_HEADING[column],
+        render: columnModule.COLUMN_RENDERER[column],
+    }))
+
+    const headerRow = (
+        <tr ref={headerRowRef} className="sticky top-0">
+            {columns.map(column => {
+                // This is a React component, even though it does not contain JSX.
+                // eslint-disable-next-line no-restricted-syntax
+                const Heading = column.heading
+                return (
+                    <th key={column.id} className={`text-sm font-semibold ${column.className}`}>
+                        <Heading state={state} />
+                    </th>
+                )
+            })}
+        </tr>
+    )
+
+    const itemRows = isLoading ? (
+        <tr className="h-8">
+            <td colSpan={columns.length} className="bg-transparent">
+                <div className="grid justify-around w-full">
+                    <Spinner size={LOADING_SPINNER_SIZE} state={spinnerState} />
+                </div>
+            </td>
+        </tr>
+    ) : (
+        displayItems.map(item => {
+            const key = assetTreeNode.AssetTreeNode.getKey(item)
+            const isSelected = selectedKeys.has(key)
+            const isSoleSelectedItem = selectedKeys.size === 1 && isSelected
+            return (
+                <AssetRow
+                    columns={columns}
+                    // The following two lines are safe; the type error occurs because a property
+                    // with a conditional type is being destructured.
+                    // eslint-disable-next-line no-restricted-syntax
+                    state={state as never}
+                    // eslint-disable-next-line no-restricted-syntax
+                    initialRowState={INITIAL_ROW_STATE as never}
+                    key={key}
+                    keyProp={key}
+                    item={item}
+                    hidden={visibilities.get(item.key) === Visibility.hidden}
+                    selected={isSelected}
+                    setSelected={selected => {
+                        setSelectedKeys(oldSelectedKeys =>
+                            set.withPresence(oldSelectedKeys, key, selected)
                         )
-                        if (modal != null) {
-                            setModal(modal)
+                    }}
+                    isSoleSelectedItem={isSoleSelectedItem}
+                    allowContextMenu={selectedKeys.size === 0 || !isSelected || isSoleSelectedItem}
+                    onClick={onRowClick}
+                    onContextMenu={(_innerProps, event) => {
+                        if (!isSelected) {
+                            event.preventDefault()
+                            event.stopPropagation()
+                            setPreviouslySelectedKey(key)
+                            setSelectedKeys(new Set([key]))
                         }
                     }}
-                    draggableRows
-                    onRowDragStart={event => {
+                    draggable={true}
+                    onDragStart={event => {
+                        if (!selectedKeys.has(key)) {
+                            setPreviouslySelectedKey(key)
+                            setSelectedKeys(new Set([key]))
+                        }
+
                         setSelectedKeys(oldSelectedKeys => {
                             const nodes = assetTree
                                 .preorderTraversal()
@@ -1913,7 +1879,7 @@ export default function AssetsTable(props: AssetsTableProps) {
                                         }}
                                     >
                                         {nodes.map(node => (
-                                            <AssetNameColumn
+                                            <NameColumn
                                                 key={node.key}
                                                 keyProp={node.key}
                                                 item={node.with({ depth: 0 })}
@@ -1934,7 +1900,7 @@ export default function AssetsTable(props: AssetsTableProps) {
                             return oldSelectedKeys
                         })
                     }}
-                    onRowDragOver={(event, _, key) => {
+                    onDragOver={event => {
                         setSelectedKeys(oldSelectedKeys => {
                             const payload = drag.LABELS.lookup(event)
                             if (payload != null) {
@@ -1968,7 +1934,7 @@ export default function AssetsTable(props: AssetsTableProps) {
                             return oldSelectedKeys
                         })
                     }}
-                    onRowDragEnd={() => {
+                    onDragEnd={() => {
                         setSelectedKeys(oldSelectedKeys => {
                             window.setTimeout(() => {
                                 dispatchAssetEvent({
@@ -1980,7 +1946,7 @@ export default function AssetsTable(props: AssetsTableProps) {
                             return oldSelectedKeys
                         })
                     }}
-                    onRowDrop={(event, _, key) => {
+                    onDrop={event => {
                         setSelectedKeys(oldSelectedKeys => {
                             const ids = oldSelectedKeys.has(key) ? oldSelectedKeys : new Set([key])
                             const payload = drag.LABELS.lookup(event)
@@ -2020,26 +1986,120 @@ export default function AssetsTable(props: AssetsTableProps) {
                             return oldSelectedKeys
                         })
                     }}
-                    onDragLeave={event => {
-                        const payload = drag.LABELS.lookup(event)
-                        if (
-                            payload != null &&
-                            event.relatedTarget instanceof Node &&
-                            !event.currentTarget.contains(event.relatedTarget)
-                        ) {
-                            setSelectedKeys(oldSelectedKeys => {
-                                window.setTimeout(() => {
-                                    dispatchAssetEvent({
-                                        type: AssetEventType.temporarilyAddLabels,
-                                        ids: oldSelectedKeys,
-                                        labelNames: set.EMPTY,
-                                    })
-                                })
-                                return oldSelectedKeys
-                            })
-                        }
-                    }}
                 />
+            )
+        })
+    )
+
+    const table = (
+        <div
+            className="grow flex flex-col"
+            onContextMenu={event => {
+                event.preventDefault()
+                event.stopPropagation()
+                setModal(
+                    <AssetsTableContextMenu
+                        category={category}
+                        pasteData={pasteData}
+                        selectedKeys={selectedKeys}
+                        nodeMapRef={nodeMapRef}
+                        event={event}
+                        setSelectedKeys={setSelectedKeys}
+                        dispatchAssetEvent={dispatchAssetEvent}
+                        dispatchAssetListEvent={dispatchAssetListEvent}
+                        doCopy={doCopy}
+                        doCut={doCut}
+                        doPaste={doPaste}
+                    />
+                )
+            }}
+            onDragLeave={event => {
+                const payload = drag.LABELS.lookup(event)
+                if (
+                    payload != null &&
+                    event.relatedTarget instanceof Node &&
+                    !event.currentTarget.contains(event.relatedTarget)
+                ) {
+                    setSelectedKeys(oldSelectedKeys => {
+                        window.setTimeout(() => {
+                            dispatchAssetEvent({
+                                type: AssetEventType.temporarilyAddLabels,
+                                ids: oldSelectedKeys,
+                                labelNames: set.EMPTY,
+                            })
+                        })
+                        return oldSelectedKeys
+                    })
+                }
+            }}
+        >
+            <table className="rounded-rows table-fixed border-collapse">
+                <thead>{headerRow}</thead>
+                <tbody ref={bodyRef}>
+                    {itemRows}
+                    <tr className="h-8 hidden first:table-row">
+                        <td colSpan={columns.length} className="bg-transparent">
+                            {placeholder}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div
+                className="grow"
+                onDragEnter={onDragOver}
+                onDragOver={onDragOver}
+                onDrop={event => {
+                    const payload = drag.ASSET_ROWS.lookup(event)
+                    const filtered = payload?.filter(
+                        item => item.asset.parentId !== rootDirectoryId
+                    )
+                    if (filtered != null && filtered.length > 0) {
+                        event.preventDefault()
+                        event.stopPropagation()
+                        unsetModal()
+                        dispatchAssetEvent({
+                            type: AssetEventType.move,
+                            newParentKey: rootDirectoryId,
+                            newParentId: rootDirectoryId,
+                            ids: new Set(filtered.map(dragItem => dragItem.asset.id)),
+                        })
+                    }
+                }}
+            />
+        </div>
+    )
+
+    return (
+        <div ref={scrollContainerRef} className="flex-1 overflow-auto">
+            <div className="flex flex-col w-min min-w-full h-full">
+                {backend.type !== backendModule.BackendType.local && (
+                    <div className="sticky top-0 h-0">
+                        <div className="block sticky right-0 ml-auto w-29 px-2 pt-2.25 pb-1.75 z-1">
+                            <div className="inline-flex gap-3">
+                                {columnUtils.EXTRA_COLUMNS.map(column => (
+                                    <Button
+                                        key={column}
+                                        active={extraColumns.has(column)}
+                                        image={columnUtils.EXTRA_COLUMN_IMAGES[column]}
+                                        onClick={event => {
+                                            event.stopPropagation()
+                                            const newExtraColumns = new Set(extraColumns)
+                                            if (extraColumns.has(column)) {
+                                                newExtraColumns.delete(column)
+                                            } else {
+                                                newExtraColumns.add(column)
+                                            }
+                                            setExtraColumns(newExtraColumns)
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                )}
+                {hiddenContextMenu}
+                {table}
             </div>
         </div>
     )
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTableContextMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTableContextMenu.tsx
new file mode 100644
index 000000000000..5bba166adecb
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTableContextMenu.tsx
@@ -0,0 +1,196 @@
+/** @file A context menu for an `AssetsTable`, when no row is selected, or multiple rows
+ * are selected. */
+import * as React from 'react'
+
+import type * as assetEvent from '#/events/assetEvent'
+import AssetEventType from '#/events/AssetEventType'
+import type * as assetListEvent from '#/events/assetListEvent'
+import Category from '#/layouts/dashboard/CategorySwitcher/Category'
+import GlobalContextMenu from '#/layouts/dashboard/GlobalContextMenu'
+import * as authProvider from '#/providers/AuthProvider'
+import * as backendProvider from '#/providers/BackendProvider'
+import * as modalProvider from '#/providers/ModalProvider'
+import * as backendModule from '#/services/backend'
+import type * as assetTreeNode from '#/utilities/assetTreeNode'
+import type * as pasteDataModule from '#/utilities/pasteData'
+import * as permissions from '#/utilities/permissions'
+import * as shortcuts from '#/utilities/shortcuts'
+import * as string from '#/utilities/string'
+import * as uniqueString from '#/utilities/uniqueString'
+
+import ContextMenu from '#/components/ContextMenu'
+import ContextMenus from '#/components/ContextMenus'
+import ConfirmDeleteModal from '#/components/dashboard/ConfirmDeleteModal'
+import MenuEntry from '#/components/MenuEntry'
+
+// =================
+// === Constants ===
+// =================
+
+/** The user-facing name of this asset type. */
+const ASSET_TYPE_NAME = 'item'
+/** The user-facing plural name of this asset type. */
+const ASSET_TYPE_NAME_PLURAL = 'items'
+// This is a function, even though does not look like one.
+// eslint-disable-next-line no-restricted-syntax
+const pluralize = string.makePluralize(ASSET_TYPE_NAME, ASSET_TYPE_NAME_PLURAL)
+
+/** Props for an {@link AssetsTableContextMenu}. */
+export interface AssetsTableContextMenuProps {
+    hidden?: boolean
+    category: Category
+    pasteData: pasteDataModule.PasteData<Set<backendModule.AssetId>> | null
+    selectedKeys: Set<backendModule.AssetId>
+    setSelectedKeys: (items: Set<backendModule.AssetId>) => void
+    nodeMapRef: React.MutableRefObject<
+        ReadonlyMap<backendModule.AssetId, assetTreeNode.AssetTreeNode>
+    >
+    event: Pick<React.MouseEvent<Element, MouseEvent>, 'pageX' | 'pageY'>
+    dispatchAssetEvent: (event: assetEvent.AssetEvent) => void
+    dispatchAssetListEvent: (event: assetListEvent.AssetListEvent) => void
+    doCopy: () => void
+    doCut: () => void
+    doPaste: (newParentKey: backendModule.AssetId, newParentId: backendModule.DirectoryId) => void
+}
+
+/** A context menu for an `AssetsTable`, when no row is selected, or multiple rows
+ * are selected. */
+export default function AssetsTableContextMenu(props: AssetsTableContextMenuProps) {
+    const { category, pasteData, selectedKeys, setSelectedKeys, nodeMapRef, event } = props
+    const { dispatchAssetEvent, dispatchAssetListEvent, hidden = false } = props
+    const { doCopy, doCut, doPaste } = props
+    const { backend } = backendProvider.useBackend()
+    const { organization } = authProvider.useNonPartialUserSession()
+    const { setModal, unsetModal } = modalProvider.useSetModal()
+    const rootDirectoryId = React.useMemo(
+        () => organization?.rootDirectoryId ?? backendModule.DirectoryId(''),
+        [organization]
+    )
+    const isCloud = backend.type === backendModule.BackendType.remote
+
+    const pluralized = pluralize(selectedKeys.size)
+    // This works because all items are mutated, ensuring their value stays
+    // up to date.
+    const ownsAllSelectedAssets =
+        isCloud ||
+        (organization != null &&
+            Array.from(selectedKeys, key => {
+                const userPermissions = nodeMapRef.current.get(key)?.item.permissions
+                const selfPermission = userPermissions?.find(
+                    permission => permission.user.user_email === organization.email
+                )
+                return selfPermission?.permission === permissions.PermissionAction.own
+            }).every(isOwner => isOwner))
+    // This is not a React component even though it contains JSX.
+    // eslint-disable-next-line no-restricted-syntax
+    const doDeleteAll = () => {
+        if (isCloud) {
+            unsetModal()
+            dispatchAssetEvent({
+                type: AssetEventType.delete,
+                ids: selectedKeys,
+            })
+        } else {
+            setModal(
+                <ConfirmDeleteModal
+                    description={`${selectedKeys.size} selected ${pluralized}`}
+                    doDelete={() => {
+                        setSelectedKeys(new Set())
+                        dispatchAssetEvent({
+                            type: AssetEventType.delete,
+                            ids: selectedKeys,
+                        })
+                    }}
+                />
+            )
+        }
+    }
+    // This is not a React component even though it contains JSX.
+    // eslint-disable-next-line no-restricted-syntax
+    const doRestoreAll = () => {
+        unsetModal()
+        dispatchAssetEvent({
+            type: AssetEventType.restore,
+            ids: selectedKeys,
+        })
+    }
+    if (category === Category.trash) {
+        return selectedKeys.size === 0 ? (
+            <></>
+        ) : (
+            <ContextMenus key={uniqueString.uniqueString()} hidden={hidden} event={event}>
+                <ContextMenu hidden={hidden}>
+                    <MenuEntry
+                        hidden={hidden}
+                        action={shortcuts.KeyboardAction.restoreAllFromTrash}
+                        doAction={doRestoreAll}
+                    />
+                </ContextMenu>
+            </ContextMenus>
+        )
+    } else if (category !== Category.home) {
+        return null
+    } else {
+        const deleteAction = isCloud
+            ? shortcuts.KeyboardAction.moveAllToTrash
+            : shortcuts.KeyboardAction.deleteAll
+        return (
+            <ContextMenus key={uniqueString.uniqueString()} hidden={hidden} event={event}>
+                {selectedKeys.size !== 0 && (
+                    <ContextMenu hidden={hidden}>
+                        {ownsAllSelectedAssets && (
+                            <MenuEntry
+                                hidden={hidden}
+                                action={deleteAction}
+                                doAction={doDeleteAll}
+                            />
+                        )}
+                        {isCloud && (
+                            <MenuEntry
+                                hidden={hidden}
+                                action={shortcuts.KeyboardAction.copyAll}
+                                doAction={doCopy}
+                            />
+                        )}
+                        {isCloud && ownsAllSelectedAssets && (
+                            <MenuEntry
+                                hidden={hidden}
+                                action={shortcuts.KeyboardAction.cutAll}
+                                doAction={doCut}
+                            />
+                        )}
+                        {pasteData != null && pasteData.data.size > 0 && (
+                            <MenuEntry
+                                hidden={hidden}
+                                action={shortcuts.KeyboardAction.pasteAll}
+                                doAction={() => {
+                                    const [firstKey] = selectedKeys
+                                    const selectedNode =
+                                        selectedKeys.size === 1 && firstKey != null
+                                            ? nodeMapRef.current.get(firstKey)
+                                            : null
+                                    if (
+                                        selectedNode?.item.type ===
+                                        backendModule.AssetType.directory
+                                    ) {
+                                        doPaste(selectedNode.key, selectedNode.item.id)
+                                    } else {
+                                        doPaste(rootDirectoryId, rootDirectoryId)
+                                    }
+                                }}
+                            />
+                        )}
+                    </ContextMenu>
+                )}
+                <GlobalContextMenu
+                    hidden={hidden}
+                    hasCopyData={pasteData != null}
+                    directoryKey={null}
+                    directoryId={null}
+                    dispatchAssetListEvent={dispatchAssetListEvent}
+                    doPaste={doPaste}
+                />
+            </ContextMenus>
+        )
+    }
+}