From a7251eb8d461454231eee61bce117bc298889cef Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Tue, 27 Feb 2024 02:49:49 +1000
Subject: [PATCH] Improve mouse and keyboard UX (#9100)

- Close https://github.com/enso-org/cloud-v2/issues/914
- Add selection brush for selecting multiple assets using mouse
- Port selection brush over from GUI2
- Support <kbd>Ctrl</kbd>-select to select multiple ranges
- Add various actions when *exactly one* asset is selected:
- <kbd>Enter</kbd> for various assets to trigger their double-click actions
- Projects are opened
- Directories are toggled open/closed
- Secrets show the "upsert secret modal"
- <kbd>ArrowLeft</kbd> now collapses the selected folder
- <kbd>ArrowRight</kbd> now expands the selected folder
- <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> change the selected asset to the previous/next asset
- The newly selected asset (technically: any asset that is the only selected asset, whether this is a result of a drag, mouse click, or keypress) is automatically smoothly scrolled to.
- Improvements to the search bar
- <kbd>Escape</kbd> cancels tabbing through suggestions (and discards the selected suggestion)
- <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> behave like <kbd>Shift</kbd>+<kbd>Tab</kbd> and <kbd>Tab</kbd> to move to the previous/next suggestion respectively
- <kbd>Shift</kbd>+<kbd>ArrowUp</kbd> and <kbd>Shift</kbd>+<kbd>ArrowDown</kbd> to select multiple assets using the keyboard
- <kbd>Ctrl</kbd>+<kbd>Space</kbd> to toggle assets using the keyboard
- <kbd>Escape</kbd> to deselect all assets
- Add CSS-only focus ring to highlight most recently selected item, but only when navigating via keyboard
- Enter and double-click to temporarily open the sidebar to edit a Data Link

Optional features that have not yet been implemented:
- Move the "update secret" modal to the sidebar as well

# Important Notes
None
---
 .../src/components/SelectionBrush.tsx         | 184 +++++++
 .../src/components/dashboard/AssetRow.tsx     |  68 +--
 .../dashboard/DataLinkNameColumn.tsx          |   4 +-
 .../src/components/dashboard/column.ts        |   2 +-
 .../lib/dashboard/src/hooks/animationHooks.ts | 115 +++++
 .../src/layouts/dashboard/AssetSearchBar.tsx  |  19 +-
 .../src/layouts/dashboard/AssetsTable.tsx     | 459 +++++++++++++++---
 .../dashboard/src/layouts/dashboard/Drive.tsx |   8 +-
 .../dashboard/Settings/AccountSettingsTab.tsx |   7 +-
 .../Settings/OrganizationSettingsTab.tsx      |   7 +-
 .../layouts/dashboard/UpsertSecretModal.tsx   |   1 +
 .../src/layouts/dashboard/UserBar.tsx         |   1 +
 .../src/layouts/dashboard/UserMenu.tsx        |   7 +-
 .../src/pages/dashboard/Dashboard.tsx         |   8 +-
 .../src/pages/subscribe/Subscribe.tsx         |   2 +-
 .../lib/dashboard/src/tailwind.css            |   2 +-
 .../src/utilities/ShortcutManager.ts          |   2 +-
 .../lib/dashboard/src/utilities/geometry.ts   |  19 +
 .../lib/dashboard/tailwind.config.js          |   5 +-
 19 files changed, 810 insertions(+), 110 deletions(-)
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/SelectionBrush.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/hooks/animationHooks.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/utilities/geometry.ts

diff --git a/app/ide-desktop/lib/dashboard/src/components/SelectionBrush.tsx b/app/ide-desktop/lib/dashboard/src/components/SelectionBrush.tsx
new file mode 100644
index 000000000000..cc9f98a56fd6
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/SelectionBrush.tsx
@@ -0,0 +1,184 @@
+/** @file A selection brush to indicate the area being selected by the mouse drag action. */
+import * as React from 'react'
+
+import * as reactDom from 'react-dom'
+
+import * as animationHooks from '#/hooks/animationHooks'
+
+import * as modalProvider from '#/providers/ModalProvider'
+
+import type * as geometry from '#/utilities/geometry'
+
+// ======================
+// === SelectionBrush ===
+// ======================
+
+/** Props for a {@link SelectionBrush}. */
+export interface SelectionBrushProps {
+  readonly onDrag: (rectangle: geometry.DetailedRectangle, event: MouseEvent) => void
+  readonly onDragEnd: (event: MouseEvent) => void
+  readonly onDragCancel: () => void
+}
+
+/** A selection brush to indicate the area being selected by the mouse drag action. */
+export default function SelectionBrush(props: SelectionBrushProps) {
+  const { onDrag, onDragEnd, onDragCancel } = props
+  const { modalRef } = modalProvider.useModalRef()
+  const isMouseDownRef = React.useRef(false)
+  const didMoveWhileDraggingRef = React.useRef(false)
+  const onDragRef = React.useRef(onDrag)
+  const onDragEndRef = React.useRef(onDragEnd)
+  const onDragCancelRef = React.useRef(onDragCancel)
+  const lastMouseEvent = React.useRef<MouseEvent | null>(null)
+  const [anchor, setAnchor] = React.useState<geometry.Coordinate2D | null>(null)
+  // This will be `null` if `anchor` is `null`.
+  const [position, setPosition] = React.useState<geometry.Coordinate2D | null>(null)
+  const [lastSetAnchor, setLastSetAnchor] = React.useState<geometry.Coordinate2D | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  const anchorAnimFactor = animationHooks.useApproach(anchor != null ? 1 : 0, 60)
+  const hidden =
+    anchor == null ||
+    position == null ||
+    (anchor.left === position.left && anchor.top === position.top)
+
+  React.useEffect(() => {
+    onDragRef.current = onDrag
+  }, [onDrag])
+
+  React.useEffect(() => {
+    onDragEndRef.current = onDragEnd
+  }, [onDragEnd])
+
+  React.useEffect(() => {
+    onDragCancelRef.current = onDragCancel
+  }, [onDragCancel])
+
+  React.useEffect(() => {
+    if (anchor != null) {
+      anchorAnimFactor.skip()
+    }
+  }, [anchorAnimFactor, anchor])
+
+  React.useEffect(() => {
+    const onMouseDown = (event: MouseEvent) => {
+      if (
+        modalRef.current == null &&
+        !(event.target instanceof HTMLInputElement) &&
+        !(event.target instanceof HTMLTextAreaElement) &&
+        (!(event.target instanceof HTMLElement) || !event.target.isContentEditable) &&
+        !(event.target instanceof HTMLButtonElement) &&
+        !(event.target instanceof HTMLAnchorElement)
+      ) {
+        isMouseDownRef.current = true
+        didMoveWhileDraggingRef.current = false
+        lastMouseEvent.current = event
+        const newAnchor = { left: event.pageX, top: event.pageY }
+        setAnchor(newAnchor)
+        setLastSetAnchor(newAnchor)
+        setPosition(newAnchor)
+      }
+    }
+    const onMouseUp = (event: MouseEvent) => {
+      if (didMoveWhileDraggingRef.current) {
+        onDragEndRef.current(event)
+      }
+      // The `setTimeout` is required, otherwise the values are changed before the `onClick` handler
+      // is executed.
+      window.setTimeout(() => {
+        isMouseDownRef.current = false
+        didMoveWhileDraggingRef.current = false
+      })
+      setAnchor(null)
+    }
+    const onMouseMove = (event: MouseEvent) => {
+      if (!(event.buttons & 1)) {
+        isMouseDownRef.current = false
+      }
+      if (isMouseDownRef.current) {
+        // Left click is being held.
+        didMoveWhileDraggingRef.current = true
+        lastMouseEvent.current = event
+        setPosition({ left: event.pageX, top: event.pageY })
+      }
+    }
+    const onClick = (event: MouseEvent) => {
+      if (isMouseDownRef.current && didMoveWhileDraggingRef.current) {
+        event.stopImmediatePropagation()
+      }
+    }
+    const onDragStart = () => {
+      if (isMouseDownRef.current) {
+        isMouseDownRef.current = false
+        onDragCancelRef.current()
+        setAnchor(null)
+      }
+    }
+    document.addEventListener('mousedown', onMouseDown)
+    document.addEventListener('mouseup', onMouseUp)
+    document.addEventListener('dragstart', onDragStart, { capture: true })
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('click', onClick)
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown)
+      document.removeEventListener('mouseup', onMouseUp)
+      document.removeEventListener('dragstart', onDragStart, { capture: true })
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('click', onClick)
+    }
+  }, [/* should never change */ modalRef])
+
+  const rectangle = React.useMemo(() => {
+    if (position != null && lastSetAnchor != null) {
+      const start: geometry.Coordinate2D = {
+        left:
+          position.left * (1 - anchorAnimFactor.value) +
+          lastSetAnchor.left * anchorAnimFactor.value,
+        top:
+          position.top * (1 - anchorAnimFactor.value) + lastSetAnchor.top * anchorAnimFactor.value,
+      }
+      return {
+        left: Math.min(position.left, start.left),
+        top: Math.min(position.top, start.top),
+        right: Math.max(position.left, start.left),
+        bottom: Math.max(position.top, start.top),
+        width: Math.abs(position.left - start.left),
+        height: Math.abs(position.top - start.top),
+        signedWidth: position.left - start.left,
+        signedHeight: position.top - start.top,
+      }
+    } else {
+      return null
+    }
+  }, [anchorAnimFactor.value, lastSetAnchor, position])
+
+  const selectionRectangle = React.useMemo(() => (hidden ? null : rectangle), [hidden, rectangle])
+
+  React.useEffect(() => {
+    if (selectionRectangle != null && lastMouseEvent.current != null) {
+      onDrag(selectionRectangle, lastMouseEvent.current)
+    }
+    // `onChange` is a callback, not a dependency.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectionRectangle])
+
+  const brushStyle =
+    rectangle == null
+      ? {}
+      : {
+          left: `${rectangle.left}px`,
+          top: `${rectangle.top}px`,
+          width: `${rectangle.width}px`,
+          height: `${rectangle.height}px`,
+        }
+
+  return reactDom.createPortal(
+    <div
+      className={`fixed bg-selection-brush pointer-events-none box-content rounded-lg border-transparent z-1 transition-border-margin duration-100 ${
+        hidden ? 'border-0 m-0' : 'border-6 -m-1.5'
+      }`}
+      style={brushStyle}
+    />,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById('enso-dashboard')!
+  )
+}
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 dd5bdb7247a5..d09c3fffefad 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/AssetRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/AssetRow.tsx
@@ -40,10 +40,11 @@ import Visibility, * as visibilityModule from '#/utilities/visibility'
 // === Constants ===
 // =================
 
+/** The height of the header row. */
+const HEADER_HEIGHT_PX = 34
 /** The amount of time (in milliseconds) the drag item must be held over this component
  * to make a directory row expand. */
 const DRAG_EXPAND_DELAY_MS = 500
-
 /** Placeholder row for directories that are empty. */
 const EMPTY_DIRECTORY_PLACEHOLDER = <span className="px-2 opacity-75">This folder is empty.</span>
 
@@ -70,7 +71,8 @@ export interface AssetRowProps
   readonly columns: columnUtils.Column[]
   readonly selected: boolean
   readonly setSelected: (selected: boolean) => void
-  readonly isSoleSelectedItem: boolean
+  readonly isSoleSelected: boolean
+  readonly isKeyboardSelected: boolean
   readonly allowContextMenu: boolean
   readonly onClick: (props: AssetRowInnerProps, event: React.MouseEvent) => void
   readonly onContextMenu?: (
@@ -81,10 +83,11 @@ export interface AssetRowProps
 
 /** A row containing an {@link backendModule.AnyAsset}. */
 export default function AssetRow(props: AssetRowProps) {
-  const { item: rawItem, hidden: hiddenRaw, selected, isSoleSelectedItem, setSelected } = props
-  const { allowContextMenu, onContextMenu, state, columns, onClick } = props
+  const { item: rawItem, hidden: hiddenRaw, selected, isSoleSelected, isKeyboardSelected } = props
+  const { setSelected, allowContextMenu, onContextMenu, state, columns, onClick } = props
   const { visibilities, assetEvents, dispatchAssetEvent, dispatchAssetListEvent } = state
   const { setAssetPanelProps, doToggleDirectoryExpansion, doCopy, doCut, doPaste } = state
+  const { setIsAssetPanelTemporarilyVisible, scrollContainerRef } = state
 
   const { user, userInfo } = authProvider.useNonPartialUserSession()
   const { backend } = backendProvider.useBackend()
@@ -149,10 +152,7 @@ export default function AssetRow(props: AssetRowProps) {
       } catch (error) {
         toastAndLog(`Could not copy '${asset.title}'`, error)
         // Delete the new component representing the asset that failed to insert.
-        dispatchAssetListEvent({
-          type: AssetListEventType.delete,
-          key: item.key,
-        })
+        dispatchAssetListEvent({ type: AssetListEventType.delete, key: item.key })
       }
     },
     [
@@ -184,10 +184,7 @@ export default function AssetRow(props: AssetRowProps) {
           item: asset,
         })
         setItem(oldItem =>
-          oldItem.with({
-            directoryKey: nonNullNewParentKey,
-            directoryId: nonNullNewParentId,
-          })
+          oldItem.with({ directoryKey: nonNullNewParentKey, directoryId: nonNullNewParentId })
         )
         setAsset(object.merger({ parentId: nonNullNewParentId }))
         await backend.updateAsset(
@@ -225,10 +222,16 @@ export default function AssetRow(props: AssetRowProps) {
   )
 
   React.useEffect(() => {
-    if (isSoleSelectedItem) {
+    if (isSoleSelected) {
       setAssetPanelProps({ item, setItem })
+      setIsAssetPanelTemporarilyVisible(false)
     }
-  }, [item, isSoleSelectedItem, /* should never change */ setAssetPanelProps])
+  }, [
+    item,
+    isSoleSelected,
+    /* should never change */ setAssetPanelProps,
+    /* should never change */ setIsAssetPanelTemporarilyVisible,
+  ])
 
   const doDelete = React.useCallback(async () => {
     setInsertionVisibility(Visibility.hidden)
@@ -242,10 +245,7 @@ export default function AssetRow(props: AssetRowProps) {
       })
     }
     try {
-      dispatchAssetListEvent({
-        type: AssetListEventType.willDelete,
-        key: item.key,
-      })
+      dispatchAssetListEvent({ type: AssetListEventType.willDelete, key: item.key })
       if (
         asset.type === backendModule.AssetType.project &&
         backend.type === backendModule.BackendType.local
@@ -263,10 +263,7 @@ export default function AssetRow(props: AssetRowProps) {
         }
       }
       await backend.deleteAsset(asset.id, asset.title)
-      dispatchAssetListEvent({
-        type: AssetListEventType.delete,
-        key: item.key,
-      })
+      dispatchAssetListEvent({ type: AssetListEventType.delete, key: item.key })
     } catch (error) {
       setInsertionVisibility(Visibility.visible)
       toastAndLog(
@@ -287,10 +284,7 @@ export default function AssetRow(props: AssetRowProps) {
     setInsertionVisibility(Visibility.hidden)
     try {
       await backend.undoDeleteAsset(asset.id, asset.title)
-      dispatchAssetListEvent({
-        type: AssetListEventType.delete,
-        key: item.key,
-      })
+      dispatchAssetListEvent({ type: AssetListEventType.delete, key: item.key })
     } catch (error) {
       setInsertionVisibility(Visibility.visible)
       toastAndLog(`Unable to restore ${backendModule.ASSET_TYPE_NAME[asset.type]}`, error)
@@ -558,9 +552,25 @@ export default function AssetRow(props: AssetRowProps) {
             <tr
               draggable
               tabIndex={-1}
-              className={`h-8 transition duration-300 ease-in-out ${
+              ref={element => {
+                if (isSoleSelected && element != null && scrollContainerRef.current != null) {
+                  const rect = element.getBoundingClientRect()
+                  const scrollRect = scrollContainerRef.current.getBoundingClientRect()
+                  const scrollUp = rect.top - (scrollRect.top + HEADER_HEIGHT_PX)
+                  const scrollDown = rect.bottom - scrollRect.bottom
+                  if (scrollUp < 0 || scrollDown > 0) {
+                    scrollContainerRef.current.scrollBy({
+                      top: scrollUp < 0 ? scrollUp : scrollDown,
+                      behavior: 'smooth',
+                    })
+                  }
+                }
+              }}
+              className={`h-8 transition duration-300 ease-in-out rounded-full outline-2 -outline-offset-2 outline-prmary ${
                 visibilityModule.CLASS_NAME[visibility]
-              } ${isDraggedOver || selected ? 'selected' : ''}`}
+              } ${isKeyboardSelected ? 'outline' : ''} ${
+                isDraggedOver || selected ? 'selected' : ''
+              }`}
               onClick={event => {
                 unsetModal()
                 onClick(innerProps, event)
@@ -690,7 +700,7 @@ export default function AssetRow(props: AssetRowProps) {
                       setItem={setItem}
                       selected={selected}
                       setSelected={setSelected}
-                      isSoleSelectedItem={isSoleSelectedItem}
+                      isSoleSelected={isSoleSelected}
                       state={state}
                       rowState={rowState}
                       setRowState={setRowState}
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/DataLinkNameColumn.tsx b/app/ide-desktop/lib/dashboard/src/components/dashboard/DataLinkNameColumn.tsx
index 1273af36a4d6..cba02c1d9a8e 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/DataLinkNameColumn.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/DataLinkNameColumn.tsx
@@ -36,7 +36,7 @@ export interface DataLinkNameColumnProps extends column.AssetColumnProps {}
  * This should never happen. */
 export default function DataLinkNameColumn(props: DataLinkNameColumnProps) {
   const { item, setItem, selected, state, rowState, setRowState } = props
-  const { assetEvents, dispatchAssetListEvent } = state
+  const { assetEvents, dispatchAssetListEvent, setIsAssetPanelTemporarilyVisible } = state
   const toastAndLog = toastAndLogHooks.useToastAndLog()
   const { backend } = backendProvider.useBackend()
   const { shortcutManager } = shortcutManagerProvider.useShortcutManager()
@@ -130,7 +130,7 @@ export default function DataLinkNameColumn(props: DataLinkNameColumnProps) {
           setRowState(object.merger({ isEditingName: true }))
         } else if (eventModule.isDoubleClick(event)) {
           event.stopPropagation()
-          // FIXME: Open sidebar and show DataLinkInput populated with the current value
+          setIsAssetPanelTemporarilyVisible(true)
         }
       }}
     >
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 539d66b94004..59ee46de6909 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/column.ts
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/column.ts
@@ -24,7 +24,7 @@ export interface AssetColumnProps {
   readonly setItem: React.Dispatch<React.SetStateAction<AssetTreeNode>>
   readonly selected: boolean
   readonly setSelected: (selected: boolean) => void
-  readonly isSoleSelectedItem: boolean
+  readonly isSoleSelected: boolean
   readonly state: assetsTable.AssetsTableState
   readonly rowState: assetsTable.AssetRowState
   readonly setRowState: React.Dispatch<React.SetStateAction<assetsTable.AssetRowState>>
diff --git a/app/ide-desktop/lib/dashboard/src/hooks/animationHooks.ts b/app/ide-desktop/lib/dashboard/src/hooks/animationHooks.ts
new file mode 100644
index 000000000000..e63f94c7b971
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/hooks/animationHooks.ts
@@ -0,0 +1,115 @@
+/** @file React Hooks for running a callback on every frame, and smooth interpolation. */
+import * as React from 'react'
+
+// ==============
+// === useRaf ===
+// ==============
+
+/** Details for a callback used in {@link useRaf}. */
+interface RafCallback {
+  readonly fn: (t: number, dt: number) => void
+  readonly priority: number
+}
+
+const RAF_CALLBACKS: RafCallback[] = []
+
+/**
+ * Use `requestAnimationFrame` API to perform animation. The callback will be called every frame
+ * while the `active` watch source returns true value.
+ *
+ * For performing simple easing animations, see [`useApproach`].
+ * @param active - As long as it returns true value, the `fn` callback will be called every frame.
+ * @param fn - The callback to call every animation frame.
+ * @param priority - When multiple callbacks are registered, the one with the lowest priority number
+ * will be called first. Default priority is 0. For callbacks with the same priority, the order of
+ * execution matches the order of registration.
+ */
+export function useRaf(active: boolean, fn: (t: number, dt: number) => void, priority = 0): void {
+  const callback = React.useMemo(() => ({ fn, priority }), [fn, priority])
+  React.useEffect(() => {
+    if (active) {
+      const idx = RAF_CALLBACKS.findIndex(cb => cb.priority > priority)
+      if (idx >= 0) {
+        RAF_CALLBACKS.splice(idx, 0, callback)
+      } else {
+        RAF_CALLBACKS.push(callback)
+        runRaf()
+      }
+      return () => {
+        const i = RAF_CALLBACKS.indexOf(callback)
+        if (i >= 0) {
+          RAF_CALLBACKS.splice(i, 1)
+        }
+      }
+    } else {
+      return
+    }
+  }, [active, callback, priority])
+}
+
+let animTime = 0
+let rafRunning = false
+
+/** Run all callbacks registered by {@link useRaf} in a continuous loop. */
+function tick(time: number) {
+  const lastTime = animTime
+  const delta = Math.max(0, time - lastTime)
+  animTime = time
+  if (RAF_CALLBACKS.length > 0) {
+    requestAnimationFrame(tick)
+    for (const callback of RAF_CALLBACKS) {
+      callback.fn(time, delta)
+    }
+  } else {
+    rafRunning = false
+  }
+}
+
+/** Run the continuous loop using {@link tick}, if it is not already running. */
+function runRaf() {
+  if (!rafRunning) {
+    rafRunning = true
+    animTime = window.performance.now()
+    requestAnimationFrame(tick)
+  }
+}
+
+// ===================
+// === useApproach ===
+// ===================
+
+/**
+ * Animate value over time using exponential approach.
+ * http://badladns.com/stories/exp-approach
+ * @param target - Target value to approach.
+ * @param timeHorizon - Time at which the approach will be at 63% of the target value. Effectively
+ * represents a speed of the approach. Lower values means faster animation.
+ * @param epsilon - The approach will stop when the difference between the current value and the
+ * target value is less than `epsilon`. This is to prevent the animation from running forever.
+ */
+export function useApproach(
+  target: number,
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  timeHorizon: number = 100,
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  epsilon = 0.005
+) {
+  const [value, setValue] = React.useState(target)
+  const targetRef = React.useRef(target)
+
+  React.useEffect(() => {
+    setValue(target)
+    targetRef.current = target
+  }, [target])
+
+  useRaf(target !== value, (_, dt) => {
+    const diff = value - target
+    setValue(Math.abs(diff) <= epsilon ? target : target + diff / Math.exp(dt / timeHorizon))
+  })
+
+  const skip = React.useCallback(() => {
+    setValue(targetRef.current)
+  }, [])
+
+  return { value, skip }
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetSearchBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetSearchBar.tsx
index 37f3499ac55b..976e4884c3e3 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetSearchBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetSearchBar.tsx
@@ -125,12 +125,14 @@ export default function AssetSearchBar(props: AssetSearchBarProps) {
     const onKeyDown = (event: KeyboardEvent) => {
       setIsShiftPressed(event.shiftKey)
       if (areSuggestionsVisibleRef.current) {
-        if (event.key === 'Tab') {
+        if (event.key === 'Tab' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
           event.preventDefault()
+          event.stopImmediatePropagation()
           querySource.current = QuerySource.tabbing
+          const reverse = (event.key === 'Tab' && event.shiftKey) || event.key === 'ArrowUp'
           setSelectedIndex(oldIndex => {
             const length = Math.max(1, suggestionsRef.current.length)
-            if (event.shiftKey) {
+            if (reverse) {
               return oldIndex == null ? length - 1 : (oldIndex + length - 1) % length
             } else {
               return oldIndex == null ? 0 : (oldIndex + 1) % length
@@ -153,7 +155,13 @@ export default function AssetSearchBar(props: AssetSearchBarProps) {
         }
       }
       if (event.key === 'Escape') {
-        searchRef.current?.blur()
+        if (querySource.current === QuerySource.tabbing) {
+          querySource.current = QuerySource.external
+          setQuery(baseQuery.current)
+          setAreSuggestionsVisible(false)
+        } else {
+          searchRef.current?.blur()
+        }
       }
       // Allow `alt` key to be pressed in case it is being used to enter special characters.
       if (
@@ -161,7 +169,8 @@ export default function AssetSearchBar(props: AssetSearchBarProps) {
         !(event.target instanceof HTMLTextAreaElement) &&
         (!(event.target instanceof HTMLElement) || !event.target.isContentEditable) &&
         (!(event.target instanceof Node) || rootRef.current?.contains(event.target) !== true) &&
-        shortcutManager.isTextInputEvent(event)
+        shortcutManager.isTextInputEvent(event) &&
+        event.key !== ' '
       ) {
         searchRef.current?.focus()
       }
@@ -182,7 +191,7 @@ export default function AssetSearchBar(props: AssetSearchBarProps) {
       document.removeEventListener('keydown', onKeyDown)
       document.removeEventListener('keyup', onKeyUp)
     }
-  }, [])
+  }, [setQuery])
 
   // Reset `querySource` after all other effects have run.
   React.useEffect(() => {
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 dd7fa758df9d..152a33e9bfe2 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTable.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/AssetsTable.tsx
@@ -23,6 +23,7 @@ import type * as assetSearchBar from '#/layouts/dashboard/AssetSearchBar'
 import AssetsTableContextMenu from '#/layouts/dashboard/AssetsTableContextMenu'
 import Category from '#/layouts/dashboard/CategorySwitcher/Category'
 import DuplicateAssetsModal from '#/layouts/dashboard/DuplicateAssetsModal'
+import UpsertSecretModal from '#/layouts/dashboard/UpsertSecretModal'
 
 import Button from '#/components/Button'
 import type * as assetRow from '#/components/dashboard/AssetRow'
@@ -33,6 +34,7 @@ import NameColumn from '#/components/dashboard/column/NameColumn'
 import * as columnHeading from '#/components/dashboard/columnHeading'
 import Label from '#/components/dashboard/Label'
 import DragModal from '#/components/DragModal'
+import SelectionBrush from '#/components/SelectionBrush'
 import Spinner, * as spinner from '#/components/Spinner'
 
 import * as backendModule from '#/services/Backend'
@@ -44,6 +46,7 @@ import AssetTreeNode from '#/utilities/AssetTreeNode'
 import * as dateTime from '#/utilities/dateTime'
 import * as drag from '#/utilities/drag'
 import * as fileInfo from '#/utilities/fileInfo'
+import type * as geometry from '#/utilities/geometry'
 import LocalStorage from '#/utilities/LocalStorage'
 import type * as pasteDataModule from '#/utilities/pasteData'
 import PasteType from '#/utilities/PasteType'
@@ -78,8 +81,21 @@ LocalStorage.registerKey('extraColumns', {
 // === Constants ===
 // =================
 
+/** If the drag pointer is less than this distance away from the top or bottom of the
+ * scroll container, then the scroll container automatically scrolls upwards if the cursor is near
+ * the top of the scroll container, or downwards if the cursor is near the bottom. */
+const AUTOSCROLL_THRESHOLD_PX = 50
+/** An arbitrary constant that controls the speed of autoscroll. */
+const AUTOSCROLL_SPEED = 100
+/** The autoscroll speed is `AUTOSCROLL_SPEED / (distance + AUTOSCROLL_DAMPENING)`. */
+const AUTOSCROLL_DAMPENING = 10
+/** The height of the header row. */
+const HEADER_HEIGHT_PX = 34
+/** The height of each row in the table body. MUST be identical to the value as set by the
+ * Tailwind styling. */
+const ROW_HEIGHT_PX = 32
 /** The size of the loading spinner. */
-const LOADING_SPINNER_SIZE = 36
+const LOADING_SPINNER_SIZE_PX = 36
 /** The number of pixels the header bar should shrink when the extra column selector is visible. */
 const TABLE_HEADER_WIDTH_SHRINKAGE_PX = 116
 /** The default placeholder row. */
@@ -135,9 +151,14 @@ const SUGGESTIONS_FOR_TYPE: assetSearchBar.Suggestion[] = [
     deleteFromQuery: query => query.deleteFromLastTerm({ types: ['file'] }),
   },
   {
-    render: () => 'type:connector',
-    addToQuery: query => query.addToLastTerm({ types: ['connector'] }),
-    deleteFromQuery: query => query.deleteFromLastTerm({ types: ['connector'] }),
+    render: () => 'type:secret',
+    addToQuery: query => query.addToLastTerm({ types: ['secret'] }),
+    deleteFromQuery: query => query.deleteFromLastTerm({ types: ['secret'] }),
+  },
+  {
+    render: () => 'type:datalink',
+    addToQuery: query => query.addToLastTerm({ types: ['datalink'] }),
+    deleteFromQuery: query => query.deleteFromLastTerm({ types: ['datalink'] }),
   },
 ]
 const SUGGESTIONS_FOR_NEGATIVE_TYPE: assetSearchBar.Suggestion[] = [
@@ -234,6 +255,17 @@ function insertArbitraryAssetTreeNodeChildren(
   return newNodes === nodes ? item : item.with({ children: newNodes })
 }
 
+// =========================
+// === DragSelectionInfo ===
+// =========================
+
+/** Information related to a drag selection. */
+interface DragSelectionInfo {
+  readonly initialIndex: number
+  readonly start: number
+  readonly end: number
+}
+
 // =============================
 // === Category to filter by ===
 // =============================
@@ -251,6 +283,7 @@ const CATEGORY_TO_FILTER_BY: Readonly<Record<Category, backendModule.FilterBy |
 /** State passed through from a {@link AssetsTable} to every cell. */
 export interface AssetsTableState {
   readonly selectedKeys: React.MutableRefObject<ReadonlySet<backendModule.AssetId>>
+  readonly scrollContainerRef: React.RefObject<HTMLElement>
   readonly visibilities: ReadonlyMap<backendModule.AssetId, Visibility>
   readonly category: Category
   readonly labels: Map<backendModule.LabelName, backendModule.Label>
@@ -266,9 +299,8 @@ export interface AssetsTableState {
   readonly dispatchAssetListEvent: (event: assetListEvent.AssetListEvent) => void
   readonly assetEvents: assetEvent.AssetEvent[]
   readonly dispatchAssetEvent: (event: assetEvent.AssetEvent) => void
-  readonly setAssetPanelProps: React.Dispatch<
-    React.SetStateAction<assetPanel.AssetPanelRequiredProps | null>
-  >
+  readonly setAssetPanelProps: (props: assetPanel.AssetPanelRequiredProps | null) => void
+  readonly setIsAssetPanelTemporarilyVisible: (visible: boolean) => void
   readonly nodeMap: Readonly<
     React.MutableRefObject<ReadonlyMap<backendModule.AssetId, AssetTreeNode>>
   >
@@ -305,6 +337,7 @@ export interface AssetRowState {
 
 /** Props for a {@link AssetsTable}. */
 export interface AssetsTableProps {
+  readonly hidden: boolean
   readonly query: AssetQuery
   readonly setQuery: React.Dispatch<React.SetStateAction<AssetQuery>>
   readonly setCanDownloadFiles: (canDownloadFiles: boolean) => void
@@ -321,9 +354,8 @@ export interface AssetsTableProps {
   readonly dispatchAssetListEvent: (event: assetListEvent.AssetListEvent) => void
   readonly assetEvents: assetEvent.AssetEvent[]
   readonly dispatchAssetEvent: (event: assetEvent.AssetEvent) => void
-  readonly setAssetPanelProps: React.Dispatch<
-    React.SetStateAction<assetPanel.AssetPanelRequiredProps | null>
-  >
+  readonly setAssetPanelProps: (props: assetPanel.AssetPanelRequiredProps | null) => void
+  readonly setIsAssetPanelTemporarilyVisible: (visible: boolean) => void
   readonly doOpenEditor: (
     project: backendModule.ProjectAsset,
     setProject: React.Dispatch<React.SetStateAction<backendModule.ProjectAsset>>,
@@ -335,11 +367,12 @@ export interface AssetsTableProps {
 
 /** The table of project assets. */
 export default function AssetsTable(props: AssetsTableProps) {
-  const { query, setQuery, setCanDownloadFiles, category, allLabels, setSuggestions } = props
-  const { deletedLabelNames, initialProjectName, projectStartupInfo } = props
+  const { hidden, query, setQuery, setCanDownloadFiles, category, allLabels } = props
+  const { setSuggestions, deletedLabelNames, initialProjectName, projectStartupInfo } = props
   const { queuedAssetEvents: rawQueuedAssetEvents } = props
   const { assetListEvents, dispatchAssetListEvent, assetEvents, dispatchAssetEvent } = props
   const { setAssetPanelProps, doOpenEditor, doCloseEditor: rawDoCloseEditor, doCreateLabel } = props
+  const { setIsAssetPanelTemporarilyVisible } = props
 
   const { user, userInfo, accessToken } = authProvider.useNonPartialUserSession()
   const { backend } = backendProvider.useBackend()
@@ -407,8 +440,8 @@ export default function AssetsTable(props: AssetsTableProps) {
         const assetType =
           node.item.type === backendModule.AssetType.directory
             ? 'folder'
-            : node.item.type === backendModule.AssetType.secret
-            ? 'connector'
+            : node.item.type === backendModule.AssetType.dataLink
+            ? 'datalink'
             : String(node.item.type)
         const assetExtension =
           node.item.type !== backendModule.AssetType.file
@@ -561,6 +594,10 @@ export default function AssetsTable(props: AssetsTableProps) {
     processNode(assetTree)
     return map
   }, [assetTree, filter])
+  const visibleItems = React.useMemo(
+    () => displayItems.filter(item => visibilities.get(item.key) !== Visibility.hidden),
+    [displayItems, visibilities]
+  )
 
   React.useEffect(() => {
     if (category === Category.trash) {
@@ -848,6 +885,8 @@ export default function AssetsTable(props: AssetsTableProps) {
 
   const overwriteNodes = React.useCallback(
     (newAssets: backendModule.AnyAsset[]) => {
+      mostRecentlySelectedIndexRef.current = null
+      selectionStartIndexRef.current = null
       // This is required, otherwise we are using an outdated
       // `nameOfProjectToImmediatelyOpen`.
       setNameOfProjectToImmediatelyOpen(oldNameOfProjectToImmediatelyOpen => {
@@ -1072,8 +1111,13 @@ export default function AssetsTable(props: AssetsTableProps) {
   React.useEffect(() => {
     if (selectedKeysRef.current.size !== 1) {
       setAssetPanelProps(null)
+      setIsAssetPanelTemporarilyVisible(false)
     }
-  }, [selectedKeysRef.current.size, /* should never change */ setAssetPanelProps])
+  }, [
+    selectedKeysRef.current.size,
+    /* should never change */ setAssetPanelProps,
+    /* should never change */ setIsAssetPanelTemporarilyVisible,
+  ])
 
   const directoryListAbortControllersRef = React.useRef(
     new Map<backendModule.DirectoryId, AbortController>()
@@ -1180,6 +1224,168 @@ export default function AssetsTable(props: AssetsTableProps) {
     [category, backend]
   )
 
+  const [spinnerState, setSpinnerState] = React.useState(spinner.SpinnerState.initial)
+  const [keyboardSelectedIndex, setKeyboardSelectedIndexRaw] = React.useState<number | null>(null)
+  const mostRecentlySelectedIndexRef = React.useRef<number | null>(null)
+  const selectionStartIndexRef = React.useRef<number | null>(null)
+  const bodyRef = React.useRef<HTMLTableSectionElement>(null)
+
+  const setMostRecentlySelectedIndex = React.useCallback(
+    (index: number | null, isKeyboard = false) => {
+      mostRecentlySelectedIndexRef.current = index
+      setKeyboardSelectedIndexRaw(isKeyboard ? index : null)
+    },
+    []
+  )
+
+  React.useEffect(() => {
+    // This is not a React component, even though it contains JSX.
+    // eslint-disable-next-line no-restricted-syntax
+    const onKeyDown = (event: KeyboardEvent) => {
+      const prevIndex = mostRecentlySelectedIndexRef.current
+      const item = prevIndex == null ? null : visibleItems[prevIndex]
+      if (selectedKeysRef.current.size === 1 && item != null) {
+        switch (event.key) {
+          case 'Enter':
+          case ' ': {
+            if (event.key === ' ' && event.ctrlKey) {
+              const keys = selectedKeysRef.current
+              setSelectedKeys(set.withPresence(keys, item.key, !keys.has(item.key)))
+            } else {
+              switch (item.item.type) {
+                case backendModule.AssetType.directory: {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  doToggleDirectoryExpansion(item.item.id, item.key)
+                  break
+                }
+                case backendModule.AssetType.project: {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  dispatchAssetEvent({
+                    type: AssetEventType.openProject,
+                    id: item.item.id,
+                    runInBackground: false,
+                    shouldAutomaticallySwitchPage: true,
+                  })
+                  break
+                }
+                case backendModule.AssetType.dataLink: {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setIsAssetPanelTemporarilyVisible(true)
+                  break
+                }
+                case backendModule.AssetType.secret: {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  const id = item.item.id
+                  setModal(
+                    <UpsertSecretModal
+                      id={item.item.id}
+                      name={item.item.title}
+                      doCreate={async (_name, value) => {
+                        try {
+                          await backend.updateSecret(id, { value }, item.item.title)
+                        } catch (error) {
+                          toastAndLog(null, error)
+                        }
+                      }}
+                    />
+                  )
+                  break
+                }
+                default: {
+                  break
+                }
+              }
+            }
+            break
+          }
+          case 'ArrowLeft': {
+            if (item.item.type === backendModule.AssetType.directory && item.children != null) {
+              event.preventDefault()
+              event.stopPropagation()
+              doToggleDirectoryExpansion(item.item.id, item.key, null, false)
+            }
+            break
+          }
+          case 'ArrowRight': {
+            if (item.item.type === backendModule.AssetType.directory && item.children == null) {
+              event.preventDefault()
+              event.stopPropagation()
+              doToggleDirectoryExpansion(item.item.id, item.key, null, true)
+            }
+            break
+          }
+        }
+      }
+      switch (event.key) {
+        case ' ': {
+          if (event.ctrlKey && item != null) {
+            const keys = selectedKeysRef.current
+            setSelectedKeys(set.withPresence(keys, item.key, !keys.has(item.key)))
+          }
+          break
+        }
+        case 'Escape': {
+          setSelectedKeys(new Set())
+          setMostRecentlySelectedIndex(null)
+          selectionStartIndexRef.current = null
+          break
+        }
+        case 'ArrowUp':
+        case 'ArrowDown': {
+          event.preventDefault()
+          event.stopPropagation()
+          if (!event.shiftKey) {
+            selectionStartIndexRef.current = null
+          }
+          const index =
+            prevIndex == null
+              ? 0
+              : event.key === 'ArrowUp'
+              ? Math.max(0, prevIndex - 1)
+              : Math.min(visibleItems.length - 1, prevIndex + 1)
+          setMostRecentlySelectedIndex(index, true)
+          if (event.shiftKey) {
+            // On Windows, Ctrl+Shift+Arrow behaves the same as Shift+Arrow.
+            if (selectionStartIndexRef.current == null) {
+              selectionStartIndexRef.current = prevIndex ?? 0
+            }
+            const startIndex = Math.min(index, selectionStartIndexRef.current)
+            const endIndex = Math.max(index, selectionStartIndexRef.current) + 1
+            const selection = visibleItems.slice(startIndex, endIndex)
+            setSelectedKeys(new Set(selection.map(newItem => newItem.key)))
+          } else if (event.ctrlKey) {
+            selectionStartIndexRef.current = null
+          } else {
+            const newItem = visibleItems[index]
+            if (newItem != null) {
+              setSelectedKeys(new Set([newItem.key]))
+            }
+            selectionStartIndexRef.current = null
+          }
+          break
+        }
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [
+    visibleItems,
+    backend,
+    doToggleDirectoryExpansion,
+    /* should never change */ toastAndLog,
+    /* should never change */ setModal,
+    /* should never change */ setMostRecentlySelectedIndex,
+    /* should never change */ setSelectedKeys,
+    /* should never change */ setIsAssetPanelTemporarilyVisible,
+    /* should never change */ dispatchAssetEvent,
+  ])
+
   const getNewProjectName = React.useCallback(
     (templateName: string | null, parentKey: backendModule.DirectoryId | null) => {
       const prefix = `${templateName ?? 'New Project'} `
@@ -1656,6 +1862,7 @@ export default function AssetsTable(props: AssetsTableProps) {
     (): AssetsTableState => ({
       visibilities,
       selectedKeys: selectedKeysRef,
+      scrollContainerRef,
       category,
       labels: allLabels,
       deletedLabelNames,
@@ -1671,6 +1878,7 @@ export default function AssetsTable(props: AssetsTableProps) {
       dispatchAssetEvent,
       dispatchAssetListEvent,
       setAssetPanelProps,
+      setIsAssetPanelTemporarilyVisible,
       nodeMap: nodeMapRef,
       doToggleDirectoryExpansion,
       doOpenManually,
@@ -1700,17 +1908,13 @@ export default function AssetsTable(props: AssetsTableProps) {
       doCut,
       doPaste,
       /* should never change */ setAssetPanelProps,
+      /* should never change */ setIsAssetPanelTemporarilyVisible,
       /* should never change */ setQuery,
       /* should never change */ dispatchAssetEvent,
       /* should never change */ dispatchAssetListEvent,
     ]
   )
 
-  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(() => {
@@ -1752,13 +1956,18 @@ export default function AssetsTable(props: AssetsTableProps) {
         selectedKeysRef.current.size !== 0
       ) {
         setSelectedKeys(new Set())
+        setMostRecentlySelectedIndex(null)
       }
     }
     document.addEventListener('click', onDocumentClick)
     return () => {
       document.removeEventListener('click', onDocumentClick)
     }
-  }, [shortcutManager, setSelectedKeys])
+  }, [
+    shortcutManager,
+    /* should never change */ setSelectedKeys,
+    /* should never change */ setMostRecentlySelectedIndex,
+  ])
 
   React.useEffect(() => {
     if (isLoading) {
@@ -1772,38 +1981,24 @@ export default function AssetsTable(props: AssetsTableProps) {
     }
   }, [isLoading])
 
-  const onRowClick = React.useCallback(
-    (innerRowProps: assetRow.AssetRowInnerProps, event: React.MouseEvent) => {
-      const { key } = innerRowProps
+  const calculateNewKeys = React.useCallback(
+    (
+      event: MouseEvent | React.MouseEvent,
+      keys: backendModule.AssetId[],
+      getRange: () => backendModule.AssetId[]
+    ) => {
       event.stopPropagation()
-      const getNewlySelectedKeys = () => {
-        if (previouslySelectedKey == null) {
-          return [key]
-        } else {
-          const index1 = displayItems.findIndex(
-            innerItem => AssetTreeNode.getKey(innerItem) === previouslySelectedKey
-          )
-          const index2 = displayItems.findIndex(
-            innerItem => AssetTreeNode.getKey(innerItem) === key
-          )
-          const selectedItems =
-            index1 <= index2
-              ? displayItems.slice(index1, index2 + 1)
-              : displayItems.slice(index2, index1 + 1)
-          return selectedItems.map(AssetTreeNode.getKey)
-        }
-      }
       if (
         shortcutManager.matchesMouseAction(shortcutManagerModule.MouseAction.selectRange, event)
       ) {
-        setSelectedKeys(new Set(getNewlySelectedKeys()))
+        return new Set(getRange())
       } else if (
         shortcutManager.matchesMouseAction(
           shortcutManagerModule.MouseAction.selectAdditionalRange,
           event
         )
       ) {
-        setSelectedKeys(new Set([...selectedKeysRef.current, ...getNewlySelectedKeys()]))
+        return new Set([...selectedKeysRef.current, ...getRange()])
       } else if (
         shortcutManager.matchesMouseAction(
           shortcutManagerModule.MouseAction.selectAdditional,
@@ -1811,18 +2006,148 @@ export default function AssetsTable(props: AssetsTableProps) {
         )
       ) {
         const newSelectedKeys = new Set(selectedKeysRef.current)
-        if (selectedKeysRef.current.has(key)) {
-          newSelectedKeys.delete(key)
-        } else {
-          newSelectedKeys.add(key)
+        let count = 0
+        for (const key of keys) {
+          if (selectedKeysRef.current.has(key)) {
+            count += 1
+          }
+        }
+        for (const key of keys) {
+          const add = count * 2 < keys.length
+          set.setPresence(newSelectedKeys, key, add)
         }
-        setSelectedKeys(newSelectedKeys)
+        return newSelectedKeys
       } else {
-        setSelectedKeys(new Set([key]))
+        return new Set(keys)
       }
-      setPreviouslySelectedKey(key)
     },
-    [displayItems, previouslySelectedKey, shortcutManager, setSelectedKeys]
+    [shortcutManager]
+  )
+
+  // Only non-`null` when it is different to`selectedKeys`.
+  const [visuallySelectedKeysOverride, setVisuallySelectedKeysOverride] =
+    React.useState<ReadonlySet<backendModule.AssetId> | null>(null)
+
+  const dragSelectionChangeLoopHandle = React.useRef(0)
+  const dragSelectionRangeRef = React.useRef<DragSelectionInfo | null>(null)
+  const onSelectionDrag = React.useCallback(
+    (rectangle: geometry.DetailedRectangle, event: MouseEvent) => {
+      if (mostRecentlySelectedIndexRef.current != null) {
+        setKeyboardSelectedIndexRaw(null)
+      }
+      cancelAnimationFrame(dragSelectionChangeLoopHandle.current)
+      const scrollContainer = scrollContainerRef.current
+      if (scrollContainer != null) {
+        const rect = scrollContainer.getBoundingClientRect()
+        if (rectangle.signedHeight <= 0 && scrollContainer.scrollTop > 0) {
+          const distanceToTop = Math.max(0, rectangle.top - rect.top - HEADER_HEIGHT_PX)
+          if (distanceToTop < AUTOSCROLL_THRESHOLD_PX) {
+            scrollContainer.scrollTop -= Math.floor(
+              AUTOSCROLL_SPEED / (distanceToTop + AUTOSCROLL_DAMPENING)
+            )
+            dragSelectionChangeLoopHandle.current = requestAnimationFrame(() => {
+              onSelectionDrag(rectangle, event)
+            })
+          }
+        }
+        if (
+          rectangle.signedHeight >= 0 &&
+          scrollContainer.scrollTop + rect.height < scrollContainer.scrollHeight
+        ) {
+          const distanceToBottom = Math.max(0, rect.bottom - rectangle.bottom)
+          if (distanceToBottom < AUTOSCROLL_THRESHOLD_PX) {
+            scrollContainer.scrollTop += Math.floor(
+              AUTOSCROLL_SPEED / (distanceToBottom + AUTOSCROLL_DAMPENING)
+            )
+            dragSelectionChangeLoopHandle.current = requestAnimationFrame(() => {
+              onSelectionDrag(rectangle, event)
+            })
+          }
+        }
+        const overlapsHorizontally = rect.right > rectangle.left && rect.left < rectangle.right
+        const selectionTop = Math.max(0, rectangle.top - rect.top - HEADER_HEIGHT_PX)
+        const selectionBottom = Math.max(
+          0,
+          Math.min(rect.height, rectangle.bottom - rect.top - HEADER_HEIGHT_PX)
+        )
+        const range = dragSelectionRangeRef.current
+        if (!overlapsHorizontally) {
+          dragSelectionRangeRef.current = null
+        } else if (range == null) {
+          const topIndex = (selectionTop + scrollContainer.scrollTop) / ROW_HEIGHT_PX
+          const bottomIndex = (selectionBottom + scrollContainer.scrollTop) / ROW_HEIGHT_PX
+          dragSelectionRangeRef.current = {
+            initialIndex: rectangle.signedHeight < 0 ? bottomIndex : topIndex,
+            start: Math.floor(topIndex),
+            end: Math.ceil(bottomIndex),
+          }
+        } else {
+          const topIndex = (selectionTop + scrollContainer.scrollTop) / ROW_HEIGHT_PX
+          const bottomIndex = (selectionBottom + scrollContainer.scrollTop) / ROW_HEIGHT_PX
+          const endIndex = rectangle.signedHeight < 0 ? topIndex : bottomIndex
+          dragSelectionRangeRef.current = {
+            initialIndex: range.initialIndex,
+            start: Math.floor(Math.min(range.initialIndex, endIndex)),
+            end: Math.ceil(Math.max(range.initialIndex, endIndex)),
+          }
+        }
+        if (range == null) {
+          setVisuallySelectedKeysOverride(null)
+        } else {
+          const keys = displayItems.slice(range.start, range.end).map(node => node.key)
+          setVisuallySelectedKeysOverride(calculateNewKeys(event, keys, () => []))
+        }
+      }
+    },
+    [displayItems, calculateNewKeys]
+  )
+
+  const onSelectionDragEnd = React.useCallback(
+    (event: MouseEvent) => {
+      const range = dragSelectionRangeRef.current
+      if (range != null) {
+        const keys = displayItems.slice(range.start, range.end).map(node => node.key)
+        setSelectedKeys(calculateNewKeys(event, keys, () => []))
+      }
+      setVisuallySelectedKeysOverride(null)
+      dragSelectionRangeRef.current = null
+    },
+    [displayItems, calculateNewKeys, /* should never change */ setSelectedKeys]
+  )
+
+  const onSelectionDragCancel = React.useCallback(() => {
+    setVisuallySelectedKeysOverride(null)
+    dragSelectionRangeRef.current = null
+  }, [])
+
+  const onRowClick = React.useCallback(
+    (innerRowProps: assetRow.AssetRowInnerProps, event: React.MouseEvent) => {
+      const { key } = innerRowProps
+      event.stopPropagation()
+      const newIndex = visibleItems.findIndex(innerItem => AssetTreeNode.getKey(innerItem) === key)
+      const getRange = () => {
+        if (mostRecentlySelectedIndexRef.current == null) {
+          return [key]
+        } else {
+          const index1 = mostRecentlySelectedIndexRef.current
+          const index2 = newIndex
+          const startIndex = Math.min(index1, index2)
+          const endIndex = Math.max(index1, index2) + 1
+          return visibleItems.slice(startIndex, endIndex).map(AssetTreeNode.getKey)
+        }
+      }
+      setSelectedKeys(calculateNewKeys(event, [key], getRange))
+      setMostRecentlySelectedIndex(newIndex)
+      if (!event.shiftKey) {
+        selectionStartIndexRef.current = null
+      }
+    },
+    [
+      visibleItems,
+      calculateNewKeys,
+      /* should never change */ setSelectedKeys,
+      /* should never change */ setMostRecentlySelectedIndex,
+    ]
   )
 
   const columns = columnUtils.getColumnList(backend.type, extraColumns)
@@ -1849,15 +2174,15 @@ export default function AssetsTable(props: AssetsTableProps) {
     <tr className="h-8">
       <td colSpan={columns.length} className="bg-transparent">
         <div className="grid justify-around w-container">
-          <Spinner size={LOADING_SPINNER_SIZE} state={spinnerState} />
+          <Spinner size={LOADING_SPINNER_SIZE_PX} state={spinnerState} />
         </div>
       </td>
     </tr>
   ) : (
     displayItems.map(item => {
       const key = AssetTreeNode.getKey(item)
-      const isSelected = selectedKeys.has(key)
-      const isSoleSelectedItem = selectedKeys.size === 1 && isSelected
+      const isSelected = (visuallySelectedKeysOverride ?? selectedKeys).has(key)
+      const isSoleSelected = selectedKeys.size === 1 && isSelected
       return (
         <AssetRow
           key={key}
@@ -1869,21 +2194,26 @@ export default function AssetsTable(props: AssetsTableProps) {
           setSelected={selected => {
             setSelectedKeys(set.withPresence(selectedKeysRef.current, key, selected))
           }}
-          isSoleSelectedItem={isSoleSelectedItem}
-          allowContextMenu={selectedKeysRef.current.size === 0 || !isSelected || isSoleSelectedItem}
+          isSoleSelected={isSoleSelected}
+          isKeyboardSelected={
+            keyboardSelectedIndex != null && item === visibleItems[keyboardSelectedIndex]
+          }
+          allowContextMenu={selectedKeysRef.current.size === 0 || !isSelected || isSoleSelected}
           onClick={onRowClick}
           onContextMenu={(_innerProps, event) => {
             if (!isSelected) {
               event.preventDefault()
               event.stopPropagation()
-              setPreviouslySelectedKey(key)
+              setMostRecentlySelectedIndex(visibleItems.indexOf(item))
+              selectionStartIndexRef.current = null
               setSelectedKeys(new Set([key]))
             }
           }}
           onDragStart={event => {
             let newSelectedKeys = selectedKeysRef.current
-            if (!selectedKeysRef.current.has(key)) {
-              setPreviouslySelectedKey(key)
+            if (!newSelectedKeys.has(key)) {
+              setMostRecentlySelectedIndex(visibleItems.indexOf(item))
+              selectionStartIndexRef.current = null
               newSelectedKeys = new Set([key])
               setSelectedKeys(newSelectedKeys)
             }
@@ -1911,7 +2241,7 @@ export default function AssetsTable(props: AssetsTableProps) {
                     item={node.with({ depth: 0 })}
                     state={state}
                     // Default states.
-                    isSoleSelectedItem={false}
+                    isSoleSelected={false}
                     selected={false}
                     rowState={assetRowUtils.INITIAL_ROW_STATE}
                     // The drag placeholder cannot be interacted with.
@@ -2024,9 +2354,9 @@ export default function AssetsTable(props: AssetsTableProps) {
             category={category}
             pasteData={pasteData}
             selectedKeys={selectedKeys}
+            clearSelectedKeys={clearSelectedKeys}
             nodeMapRef={nodeMapRef}
             event={event}
-            clearSelectedKeys={clearSelectedKeys}
             dispatchAssetEvent={dispatchAssetEvent}
             dispatchAssetListEvent={dispatchAssetListEvent}
             doCopy={doCopy}
@@ -2099,6 +2429,13 @@ export default function AssetsTable(props: AssetsTableProps) {
 
   return (
     <div ref={scrollContainerRef} className="container-size flex-1 overflow-auto">
+      {!hidden && (
+        <SelectionBrush
+          onDrag={onSelectionDrag}
+          onDragEnd={onSelectionDragEnd}
+          onDragCancel={onSelectionDragCancel}
+        />
+      )}
       <div className="flex flex-col w-min min-w-full h-full">
         {isCloud && (
           <div className="sticky top-0 h-0 flex flex-col">
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Drive.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Drive.tsx
index 53f725be51d8..83a96cb2fd00 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Drive.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Drive.tsx
@@ -93,9 +93,8 @@ export interface DriveProps {
   readonly setLabels: React.Dispatch<React.SetStateAction<backendModule.Label[]>>
   readonly setSuggestions: (suggestions: assetSearchBar.Suggestion[]) => void
   readonly projectStartupInfo: backendModule.ProjectStartupInfo | null
-  readonly setAssetPanelProps: React.Dispatch<
-    React.SetStateAction<assetPanel.AssetPanelRequiredProps | null>
-  >
+  readonly setAssetPanelProps: (props: assetPanel.AssetPanelRequiredProps | null) => void
+  readonly setIsAssetPanelTemporarilyVisible: (visible: boolean) => void
   readonly doCreateProject: (templateId: string | null) => void
   readonly doOpenEditor: (
     project: backendModule.ProjectAsset,
@@ -111,6 +110,7 @@ export default function Drive(props: DriveProps) {
   const { query, setQuery, labels, setLabels, setSuggestions, projectStartupInfo } = props
   const { assetListEvents, dispatchAssetListEvent, assetEvents, dispatchAssetEvent } = props
   const { setAssetPanelProps, doOpenEditor, doCloseEditor } = props
+  const { setIsAssetPanelTemporarilyVisible } = props
 
   const navigate = navigateHooks.useNavigate()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
@@ -391,6 +391,7 @@ export default function Drive(props: DriveProps) {
               </div>
             )}
             <AssetsTable
+              hidden={hidden}
               query={query}
               setQuery={setQuery}
               setCanDownloadFiles={setCanDownloadFiles}
@@ -406,6 +407,7 @@ export default function Drive(props: DriveProps) {
               assetListEvents={assetListEvents}
               dispatchAssetListEvent={dispatchAssetListEvent}
               setAssetPanelProps={setAssetPanelProps}
+              setIsAssetPanelTemporarilyVisible={setIsAssetPanelTemporarilyVisible}
               doOpenEditor={doOpenEditor}
               doCloseEditor={doCloseEditor}
               doCreateLabel={doCreateLabel}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Settings/AccountSettingsTab.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Settings/AccountSettingsTab.tsx
index bacced196c7f..fcadb3b2cdd1 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Settings/AccountSettingsTab.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Settings/AccountSettingsTab.tsx
@@ -291,7 +291,12 @@ export default function AccountSettingsTab() {
         <h3 className="font-bold text-xl h-9.5 py-0.5">Profile picture</h3>
         <label className="flex items-center cursor-pointer rounded-full overflow-clip h-32 w-32 hover:bg-frame transition-colors">
           <input type="file" className="hidden" accept="image/*" onChange={doUploadUserPicture} />
-          <img src={user?.profilePicture ?? DefaultUserIcon} width={128} height={128} />
+          <img
+            src={user?.profilePicture ?? DefaultUserIcon}
+            width={128}
+            height={128}
+            className="pointer-events-none"
+          />
         </label>
         <span className="py-1 w-64">
           Your profile picture should not be irrelevant, abusive or vulgar. It should not be a
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Settings/OrganizationSettingsTab.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Settings/OrganizationSettingsTab.tsx
index 19dbc637d16c..16d701f22594 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Settings/OrganizationSettingsTab.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/Settings/OrganizationSettingsTab.tsx
@@ -270,7 +270,12 @@ export default function OrganizationSettingsTab(props: OrganizationSettingsTabPr
             accept="image/*"
             onChange={doUploadOrganizationPicture}
           />
-          <img src={organization.picture ?? DefaultUserIcon} width={128} height={128} />
+          <img
+            src={organization.picture ?? DefaultUserIcon}
+            width={128}
+            height={128}
+            className="pointer-events-none"
+          />
         </label>
         <span className="py-1 w-64">
           Your organization&apos;s profile picture should not be irrelevant, abusive or vulgar. It
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UpsertSecretModal.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UpsertSecretModal.tsx
index b3f09286bc43..bf4ec5e42725 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UpsertSecretModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UpsertSecretModal.tsx
@@ -79,6 +79,7 @@ export default function UpsertSecretModal(props: UpsertSecretModalProps) {
         <label className="relative flex">
           <div className="w-12 h-6 py-1">Value</div>
           <input
+            autoFocus={!isNameEditable}
             placeholder="Enter the value of the secret"
             className="grow bg-transparent border border-black/10 rounded-full leading-170 h-6 px-4 py-px"
             onInput={event => {
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UserBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UserBar.tsx
index bfdf2cee09be..8868728ba8a0 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UserBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UserBar.tsx
@@ -118,6 +118,7 @@ export default function UserBar(props: UserBarProps) {
         <img
           src={user?.profilePicture ?? DefaultUserIcon}
           alt="Open user menu"
+          className="pointer-events-none"
           height={28}
           width={28}
         />
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UserMenu.tsx
index 11eff7089799..42b048dd8896 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UserMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/dashboard/UserMenu.tsx
@@ -57,7 +57,12 @@ export default function UserMenu(props: UserMenuProps) {
           <>
             <div className="flex items-center gap-3 px-1">
               <div className="flex items-center rounded-full overflow-clip w-7.25 h-7.25">
-                <img src={user.profilePicture ?? DefaultUserIcon} height={28} width={28} />
+                <img
+                  src={user.profilePicture ?? DefaultUserIcon}
+                  height={28}
+                  width={28}
+                  className="pointer-events-none"
+                />
               </div>
               <span className="leading-170 h-6 py-px">{user.name}</span>
             </div>
diff --git a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
index 557aadd6b250..a5d6bb1a81ac 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
@@ -139,6 +139,7 @@ export default function Dashboard(props: DashboardProps) {
   const [isAssetPanelVisible, setIsAssetPanelVisible] = React.useState(
     () => localStorage.get('isAssetPanelVisible') ?? false
   )
+  const [isAssetPanelTemporarilyVisible, setIsAssetPanelTemporarilyVisible] = React.useState(false)
   const [initialProjectName, setInitialProjectName] = React.useState(rawInitialProjectName)
   const rootDirectoryId = React.useMemo(
     () => session.user?.rootDirectoryId ?? backendModule.DirectoryId(''),
@@ -479,6 +480,7 @@ export default function Dashboard(props: DashboardProps) {
             assetEvents={assetEvents}
             dispatchAssetEvent={dispatchAssetEvent}
             setAssetPanelProps={setAssetPanelProps}
+            setIsAssetPanelTemporarilyVisible={setIsAssetPanelTemporarilyVisible}
             doCreateProject={doCreateProject}
             doOpenEditor={doOpenEditor}
             doCloseEditor={doCloseEditor}
@@ -511,10 +513,12 @@ export default function Dashboard(props: DashboardProps) {
         </div>
         <div
           className={`flex flex-col duration-500 transition-min-width ease-in-out overflow-hidden ${
-            isAssetPanelVisible && assetPanelProps != null ? 'min-w-120' : 'min-w-0 invisible'
+            (isAssetPanelVisible || isAssetPanelTemporarilyVisible) && assetPanelProps != null
+              ? 'min-w-120'
+              : 'min-w-0 invisible'
           }`}
         >
-          {assetPanelProps && isAssetPanelVisible && (
+          {assetPanelProps && (isAssetPanelVisible || isAssetPanelTemporarilyVisible) && (
             <AssetPanel
               supportsLocalBackend={supportsLocalBackend}
               key={assetPanelProps.item.item.id}
diff --git a/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe.tsx b/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe.tsx
index c0e85024936d..88e6b6d489cb 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/subscribe/Subscribe.tsx
@@ -156,7 +156,7 @@ export default function Subscribe() {
             </stripeReact.EmbeddedCheckoutProvider>
           </div>
         ) : (
-          <div className="h-155 transition-all"></div>
+          <div className="h-155 transition-all" />
         )}
       </div>
     </Modal>
diff --git a/app/ide-desktop/lib/dashboard/src/tailwind.css b/app/ide-desktop/lib/dashboard/src/tailwind.css
index 417eac70158d..8d0ee0b79a97 100644
--- a/app/ide-desktop/lib/dashboard/src/tailwind.css
+++ b/app/ide-desktop/lib/dashboard/src/tailwind.css
@@ -49,7 +49,7 @@ body::before {
 
 .enso-dashboard *:focus,
 .enso-chat *:focus {
-  outline: none !important;
+  outline: none;
 }
 
 /* Must be kept in sync with app/gui/view/graph-editor/src/builtin/visualization/java_script/helpers/scrollable.js. */
diff --git a/app/ide-desktop/lib/dashboard/src/utilities/ShortcutManager.ts b/app/ide-desktop/lib/dashboard/src/utilities/ShortcutManager.ts
index 0c196d522522..31edcfc71cd2 100644
--- a/app/ide-desktop/lib/dashboard/src/utilities/ShortcutManager.ts
+++ b/app/ide-desktop/lib/dashboard/src/utilities/ShortcutManager.ts
@@ -291,7 +291,7 @@ export default class ShortcutManager {
     const button: number = shortcut.button
     return (
       button === event.button &&
-      event.detail >= shortcut.clicks &&
+      Math.max(event.detail, 1) >= shortcut.clicks &&
       modifiersMatchEvent(shortcut, event)
     )
   }
diff --git a/app/ide-desktop/lib/dashboard/src/utilities/geometry.ts b/app/ide-desktop/lib/dashboard/src/utilities/geometry.ts
new file mode 100644
index 000000000000..130c40e63f2b
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/utilities/geometry.ts
@@ -0,0 +1,19 @@
+/** @file A 2D coordinate. */
+
+/** A 2D coordinate. */
+export interface Coordinate2D {
+  readonly left: number
+  readonly top: number
+}
+
+/** A rectangle, including all common measurements. */
+export interface DetailedRectangle {
+  readonly left: number
+  readonly top: number
+  readonly right: number
+  readonly bottom: number
+  readonly width: number
+  readonly height: number
+  readonly signedWidth: number
+  readonly signedHeight: number
+}
diff --git a/app/ide-desktop/lib/dashboard/tailwind.config.js b/app/ide-desktop/lib/dashboard/tailwind.config.js
index ed2ca5663c06..44ac5d2fe7ef 100644
--- a/app/ide-desktop/lib/dashboard/tailwind.config.js
+++ b/app/ide-desktop/lib/dashboard/tailwind.config.js
@@ -29,6 +29,8 @@ export default /** @satisfies {import('tailwindcss').Config} */ ({
         youtube: '#c62421',
         discord: '#404796',
         danger: '#d33b0b',
+        // Equivalent to `lch(70% 0 0 / 0.5)`
+        'selection-brush': 'rgba(171 171 171 / 0.5)',
         dim: 'rgba(0, 0, 0, 0.25)',
         'dim-darker': 'rgba(0, 0, 0, 0.40)',
         frame: 'rgba(255, 255, 255, 0.40)',
@@ -136,7 +138,7 @@ export default /** @satisfies {import('tailwindcss').Config} */ ({
       backdropBlur: {
         xs: '2px',
       },
-      borderWidth: { 0.5: '0.5px' },
+      borderWidth: { 0.5: '0.5px', 6: '6px' },
       boxShadow: {
         soft: `0 0.5px 2.2px 0px #00000008, 0 1.2px 5.3px 0px #0000000b, \
 0 2.3px 10px 0 #0000000e, 0 4px 18px 0 #00000011, 0 7.5px 33.4px 0 #00000014, \
@@ -150,6 +152,7 @@ export default /** @satisfies {import('tailwindcss').Config} */ ({
         'min-width': 'min-width',
         'stroke-dasharray': 'stroke-dasharray',
         'grid-template-rows': 'grid-template-rows',
+        'border-margin': 'border, margin',
       },
       transitionDuration: {
         400: '400ms',