From ce33af82f7cd705a65dc5238dd17f8a3d30a4178 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Wed, 19 Jul 2023 19:48:39 +1000
Subject: [PATCH] Split `dashboard.tsx` into smaller components (#6546)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Consistent order for statements in `dashboard.tsx`; change functions back to lambdas

* Create convenience aliases for each asset type

* Remove obsolete FIXME

* Refactor out column renderers into components

* Enable `prefer-const` lint

* Remove hardcoded product name

* Add fixme

* Enable `react-hooks` lints (not working for some reason)

* Consistent messages for naming-convention lint overrides

* Enable `react` lints

* Extract out tables for each asset type

* Refactor out column display mode switcher to a file

* Switch VM check state to use an enum

* Fix lint errors

* Minor section change

* Fix position of create forms

* Fix bugs; improve debugging QoL

* Add documentation for new components

* Refactor out drive bar

* Refactor out event handlers to variables

* Minor clarifications

* Refactor out directory view; some fixes; improve React DX

There are still many issues when switching backends

* Add `assert`

* Use `backend.platform` instead of checking for properties

* Fix errors when switching backend

* Minor style changes; fix lint errors

* Fix assert behavior

* Change `Rows` to `Table`

* Fixes

* Fix lint errors

* Fix "show dashboard" button

* Implement click to rename

* Fix lint errors

* Fix lint errors (along with a bug in `devServiceWorker`)

* Enable dev-mode on `ide watch`

* Fix bug in `useAsyncEffect` introduced during merge

* More fixes; new debug hooks; fix infinite loop in `auth.tsx`

* Inline Cognito methods

* Remove redundant `Promise.resolve`s

* Fix column display

* Fixes

* Simplify modal type

* Fix bug when opening IDE

* Shift+click to select a range of table items

* Implement delete multiple

* Fixes

* Tick and cross for rename input; fixes

* Implement rename and delete directory and multi-delete directory; fixes

* Optimize modal re-rendering

* Make some internal `Props` private

* Remove old asset selection code

* Eliminate re-renders when clicking document body

* Fix name flickering when renaming

* Use static placeholders

* Avoid refreshing entire directory on rename

* Use asset name instead of ID in error messages

* QoL improvements

* Enable react lints and `strict-boolean-expressions`

* Extract dashboard feature flags to its own module

* Feature flag to show more toasts; minimize calls to `listDirectory`

* Deselect selection on delete; hide unused features; add exception to PascalCase lint

* Fix projects disappearing after being created

* Fix name of `projectEvent` module imports

* Re-disable delete when project is being closed

* Fix assets refreshing when adding new projects

* Refactor row state into `Table`; fix delete not being disabled again

* Address review

* Implement shortcut registry

* Fix stop icon spinning when switching backends (ported from #6919)

* Give columns names

* Immediately show project as opening

* Replace `asNewtype` with constructor functions

* Address review

* Minor bugfixes

* Prepare for optimistically updated tables

* wip 2

* Fix type errors

* Remove indirect usages of `doRefresh`

Updating the lists of items will need to be re-added later

* Remove `toastPromise`

* Fix `New_Directory_-Infinity` bug

* wip

* WIP: Begin restoring functionality to rows

* Fix most issues with DirectoriesTable

* Port optimistic UI from `DirectoriesTable` to all other asset tables

* Fix bugs in item list events for asset tables

* Merge `projectActionButton` into `projectsTable`

* Remove `RenameModal`; minor context menu bugfixes

* Fix bugs

* Remove small default user icon

* Fix more bugs

* Fix bugs

* Fix type error

* Address review and QA

* Fix optimistic UI for "manage permissions" modal

* Fix "share with" modal

* Fix template spinner disappearing

* Allow multiple projects to be opened on local backend; fix version lifecycle returned by local backend

* Fix minor bug when closing local project

---------

Co-authored-by: Paweł Buchowski <pawel.buchowski@enso.org>
---
 app/ide-desktop/eslint.config.js              |   17 +-
 app/ide-desktop/lib/assets/cross.svg          |    6 +
 app/ide-desktop/lib/assets/tick.svg           |    5 +
 app/ide-desktop/lib/client/src/preload.ts     |   13 +-
 .../lib/client/src/project-management.ts      |    6 +-
 app/ide-desktop/lib/client/watch.ts           |    2 +-
 app/ide-desktop/lib/common/src/detect.ts      |   26 +
 app/ide-desktop/lib/content/src/index.html    |   10 +-
 app/ide-desktop/lib/content/src/index.ts      |    4 +-
 .../src/authentication/cognito.ts             |  227 +--
 .../components/confirmRegistration.tsx        |    4 +-
 .../src/authentication/config.ts              |   43 +-
 .../src/authentication/providers/auth.tsx     |   49 +-
 .../src/authentication/providers/session.tsx  |   16 +-
 .../src/authentication/service.tsx            |   35 +-
 .../src/authentication/src/components/app.tsx |   28 +-
 .../src/authentication/src/config.ts          |   39 +-
 .../authentication/src/dashboard/backend.ts   |  158 +-
 .../authentication/src/dashboard/column.tsx   |  344 ++++
 .../src/dashboard/components/autocomplete.tsx |    1 +
 .../src/dashboard/components/chat.tsx         |    9 +-
 .../components/columnDisplayModeSwitcher.tsx  |   42 +
 .../components/confirmDeleteModal.tsx         |   44 +-
 .../src/dashboard/components/contextMenu.tsx  |    8 +-
 .../dashboard/components/contextMenuEntry.tsx |    1 -
 .../src/dashboard/components/createForm.tsx   |    6 +-
 .../src/dashboard/components/dashboard.tsx    | 1690 ++---------------
 .../dashboard/components/directoriesTable.tsx |  578 ++++++
 .../dashboard/components/directoryView.tsx    |  375 ++++
 .../src/dashboard/components/driveBar.tsx     |  144 ++
 .../src/dashboard/components/editableSpan.tsx |   91 +
 .../dashboard/components/fileCreateForm.tsx   |  101 -
 .../src/dashboard/components/filesTable.tsx   |  580 ++++++
 .../src/dashboard/components/ide.tsx          |   36 +-
 .../src/dashboard/components/input.tsx        |    9 +-
 .../components/managePermissionsModal.tsx     |   75 +-
 .../components/permissionSelector.tsx         |   18 +-
 .../components/projectActionButton.tsx        |  424 -----
 .../dashboard/components/projectsTable.tsx    | 1072 +++++++++++
 .../src/dashboard/components/renameModal.tsx  |  106 --
 .../src/dashboard/components/rows.tsx         |  109 --
 .../dashboard/components/secretCreateForm.tsx |   94 -
 .../src/dashboard/components/secretsTable.tsx |  606 ++++++
 .../src/dashboard/components/table.tsx        |  246 +++
 .../src/dashboard/components/tableColumn.tsx  |   23 +
 .../src/dashboard/components/tableRow.tsx     |  165 ++
 .../src/dashboard/components/templates.tsx    |   36 +-
 .../src/dashboard/components/theModal.tsx     |   17 +
 .../src/dashboard/components/topBar.tsx       |   28 +-
 .../src/dashboard/components/userMenu.tsx     |    4 +-
 .../authentication/src/dashboard/dateTime.ts  |    6 +-
 .../src/authentication/src/dashboard/event.ts |   17 +
 .../src/dashboard/events/directoryEvent.ts    |   40 +
 .../dashboard/events/directoryListEvent.ts    |   36 +
 .../src/dashboard/events/fileEvent.ts         |   39 +
 .../src/dashboard/events/fileListEvent.ts     |   38 +
 .../src/dashboard/events/projectEvent.ts      |   67 +
 .../src/dashboard/events/projectListEvent.ts  |   40 +
 .../src/dashboard/events/secretEvent.ts       |   40 +
 .../src/dashboard/events/secretListEvent.ts   |   39 +
 .../src/dashboard/featureFlags.ts             |   12 +
 .../src/dashboard/localBackend.ts             |  126 +-
 .../src/dashboard/permissions.ts              |   23 +
 .../authentication/src/dashboard/presence.ts  |   29 +
 .../src/dashboard/projectManager.ts           |   11 +
 .../src/dashboard/remoteBackend.ts            |  202 +-
 .../authentication/src/dashboard/shortcuts.ts |  152 ++
 .../src/authentication/src/dashboard/tab.ts   |   12 +
 .../src/dashboard/validation.ts               |    9 +
 .../dashboard/src/authentication/src/error.ts |   25 +-
 .../src/authentication/src/hooks.tsx          |   61 +-
 .../src/authentication/src/index.tsx          |   12 +-
 .../src/authentication/src/newtype.ts         |    8 +-
 .../authentication/src/providers/backend.tsx  |   10 +-
 .../authentication/src/providers/logger.tsx   |    2 +-
 .../authentication/src/providers/modal.tsx    |   41 +-
 .../src/authentication/src/string.ts          |   12 +
 .../src/authentication/src/uniqueString.ts    |   14 +
 .../authentication/src/uploadMultipleFiles.ts |   62 -
 app/ide-desktop/lib/dashboard/src/index.tsx   |    4 +-
 .../lib/dashboard/src/tailwind.css            |    5 +
 app/ide-desktop/package-lock.json             |  374 +++-
 app/ide-desktop/package.json                  |    4 +-
 83 files changed, 6262 insertions(+), 3080 deletions(-)
 create mode 100644 app/ide-desktop/lib/assets/cross.svg
 create mode 100644 app/ide-desktop/lib/assets/tick.svg
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/column.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/columnDisplayModeSwitcher.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoriesTable.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryView.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveBar.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/editableSpan.tsx
 delete mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/filesTable.tsx
 delete mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectsTable.tsx
 delete mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx
 delete mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/rows.tsx
 delete mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretsTable.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/table.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/tableColumn.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/tableRow.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/theModal.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/event.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/directoryEvent.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/directoryListEvent.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/fileEvent.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/fileListEvent.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/projectEvent.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/projectListEvent.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/secretEvent.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/secretListEvent.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/featureFlags.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/permissions.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/presence.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/shortcuts.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/tab.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/string.ts
 create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/uniqueString.ts
 delete mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/uploadMultipleFiles.ts

diff --git a/app/ide-desktop/eslint.config.js b/app/ide-desktop/eslint.config.js
index 12108e0f8cc..acab642bbda 100644
--- a/app/ide-desktop/eslint.config.js
+++ b/app/ide-desktop/eslint.config.js
@@ -38,7 +38,7 @@ const RELATIVE_MODULES =
     'bin\\u002Fproject-manager|bin\\u002Fserver|config\\u002Fparser|authentication|config|debug|file-associations|index|ipc|log|naming|paths|preload|security|url-associations'
 const STRING_LITERAL = ':matches(Literal[raw=/^["\']/], TemplateLiteral)'
 const JSX = ':matches(JSXElement, JSXFragment)'
-const NOT_PASCAL_CASE = '/^(?!_?([A-Z][a-z0-9]*)+$)/'
+const NOT_PASCAL_CASE = '/^(?!do[A-Z])(?!_?([A-Z][a-z0-9]*)+$)/'
 const NOT_CAMEL_CASE = '/^(?!_?[a-z][a-z0-9*]*([A-Z0-9][a-z0-9]*)*$)(?!React$)/'
 const WHITELISTED_CONSTANTS = 'logger|.+Context|interpolationFunction.+'
 const NOT_CONSTANT_CASE = `/^(?!${WHITELISTED_CONSTANTS}$|_?[A-Z][A-Z0-9]*(_[A-Z0-9]+)*$)/`
@@ -103,7 +103,8 @@ const RESTRICTED_SYNTAXES = [
         message: 'Use `for (const x of xs)`, not `for (let x of xs)`',
     },
     {
-        selector: 'TSTypeAliasDeclaration > TSTypeReference > Identifier',
+        selector:
+            'TSTypeAliasDeclaration > TSTypeReference:not(:has(.typeParameters)) > Identifier',
         message: 'No renamed types',
     },
     {
@@ -133,7 +134,7 @@ const RESTRICTED_SYNTAXES = [
     },
     {
         // Matches non-functions.
-        selector: `:matches(Program, ExportNamedDeclaration, TSModuleBlock) > VariableDeclaration[kind=const] > VariableDeclarator[id.name=${NOT_CONSTANT_CASE}]:not(:has(:matches(ArrowFunctionExpression)))`,
+        selector: `:matches(Program, ExportNamedDeclaration, TSModuleBlock) > VariableDeclaration[kind=const] > VariableDeclarator[id.name=${NOT_CONSTANT_CASE}]:not(:matches(:has(ArrowFunctionExpression), :has(CallExpression[callee.object.name=newtype][callee.property.name=newtypeConstructor])))`,
         message: 'Use `CONSTANT_CASE` for top-level constants that are not functions',
     },
     {
@@ -225,6 +226,10 @@ const RESTRICTED_SYNTAXES = [
         selector: 'IfStatement > ExpressionStatement',
         message: 'Wrap `if` branches in `{}`',
     },
+    {
+        selector: ':matches(ForStatement[test=null], ForStatement[test.value=true])',
+        message: 'Use `while (true)` instead of `for (;;)`',
+    },
     {
         selector: 'VariableDeclarator[id.name=ENVIRONMENT][init.value!=production]',
         message: "Environment must be 'production' when committing",
@@ -290,6 +295,7 @@ export default [
                 },
             ],
             'sort-imports': ['error', { allowSeparatedGroups: true }],
+            'no-constant-condition': ['error', { checkLoops: false }],
             'no-restricted-properties': [
                 'error',
                 {
@@ -357,7 +363,10 @@ export default [
                 { checksVoidReturn: { attributes: false } },
             ],
             '@typescript-eslint/no-redundant-type-constituents': 'error',
-            '@typescript-eslint/no-unnecessary-condition': 'error',
+            '@typescript-eslint/no-unnecessary-condition': [
+                'error',
+                { allowConstantLoopConditions: true },
+            ],
             '@typescript-eslint/no-useless-empty-export': 'error',
             '@typescript-eslint/parameter-properties': ['error', { prefer: 'parameter-property' }],
             '@typescript-eslint/prefer-enum-initializers': 'error',
diff --git a/app/ide-desktop/lib/assets/cross.svg b/app/ide-desktop/lib/assets/cross.svg
new file mode 100644
index 00000000000..9c90f46ac77
--- /dev/null
+++ b/app/ide-desktop/lib/assets/cross.svg
@@ -0,0 +1,6 @@
+<svg height="16" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8" cy="8" r="8" fill="#3e515fe5" fill-opacity="0.1" />
+    <path
+        d="M4.8 6.2L6.6 8 4.8 9.8A.5.5 0 1 0 6.2 11.2L8 9.4 9.8 11.2A.5.5 0 1 0 11.2 9.8L9.4 8 11.2 6.2A.5.5 0 1 0 9.8 4.8L8 6.6 6.2 4.8A.5.5 0 1 0 4.8 6.2Z"
+        fill="#3e515fe5" />
+</svg>
\ No newline at end of file
diff --git a/app/ide-desktop/lib/assets/tick.svg b/app/ide-desktop/lib/assets/tick.svg
new file mode 100644
index 00000000000..6d0455cac8b
--- /dev/null
+++ b/app/ide-desktop/lib/assets/tick.svg
@@ -0,0 +1,5 @@
+<svg height="16" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8" cy="8" r="8" fill="#3e515fe5" fill-opacity="0.1" />
+    <path d="M3.4 9.2L5.7 11.5A1 1 0 0 0 7.3 11.5L12.6 6.2A.5.5 0 1 0 11.2 4.8L6.5 9.5 4.8 7.8A.5.5 0 1 0 3.4 9.2"
+        fill="#3e515fe5" />
+</svg>
\ No newline at end of file
diff --git a/app/ide-desktop/lib/client/src/preload.ts b/app/ide-desktop/lib/client/src/preload.ts
index b7024e33c64..5ed5444aaac 100644
--- a/app/ide-desktop/lib/client/src/preload.ts
+++ b/app/ide-desktop/lib/client/src/preload.ts
@@ -77,6 +77,8 @@ electron.contextBridge.exposeInMainWorld('enso_console', {
 // === Authentication API ===
 // ==========================
 
+let currentDeepLinkHandler: ((event: Electron.IpcRendererEvent, url: string) => void) | null = null
+
 /** Object exposed on the Electron main window; provides proxy functions to:
  * - open OAuth flows in the system browser, and
  * - handle deep links from the system browser or email client to the dashboard.
@@ -102,10 +104,15 @@ const AUTHENTICATION_API = {
      * `enso://authentication/register?code=...&state=...` from external sources like the user's
      * system browser or email client. Handling the links involves resuming whatever flow was in
      * progress when the link was opened (e.g., an OAuth registration flow). */
-    setDeepLinkHandler: (callback: (url: string) => void) =>
-        electron.ipcRenderer.on(ipc.Channel.openDeepLink, (_event, url: string) => {
+    setDeepLinkHandler: (callback: (url: string) => void) => {
+        if (currentDeepLinkHandler != null) {
+            electron.ipcRenderer.off(ipc.Channel.openDeepLink, currentDeepLinkHandler)
+        }
+        currentDeepLinkHandler = (_event, url: string) => {
             callback(url)
-        }),
+        }
+        electron.ipcRenderer.on(ipc.Channel.openDeepLink, currentDeepLinkHandler)
+    },
     /** Save the access token to a credentials file.
      *
      * The backend doesn't have access to Electron's `localStorage` so we need to save access token
diff --git a/app/ide-desktop/lib/client/src/project-management.ts b/app/ide-desktop/lib/client/src/project-management.ts
index 25ec990d4e7..665f6a51fe9 100644
--- a/app/ide-desktop/lib/client/src/project-management.ts
+++ b/app/ide-desktop/lib/client/src/project-management.ts
@@ -231,7 +231,8 @@ export function generateDirectoryName(name: string): string {
 
     // If the name already consists a suffix, reuse it.
     const matches = name.match(/^(.*)_(\d+)$/)
-    let suffix = 0
+    const initialSuffix = -1
+    let suffix = initialSuffix
     // Matches start with the whole match, so we need to skip it. Then come our two capture groups.
     const [matchedName, matchedSuffix] = matches?.slice(1) ?? []
     if (typeof matchedName !== 'undefined' && typeof matchedSuffix !== 'undefined') {
@@ -240,7 +241,8 @@ export function generateDirectoryName(name: string): string {
     }
 
     const projectsDirectory = getProjectsDirectory()
-    for (; ; suffix++) {
+    while (true) {
+        suffix++
         const candidatePath = pathModule.join(
             projectsDirectory,
             `${name}${suffix === 0 ? '' : `_${suffix}`}`
diff --git a/app/ide-desktop/lib/client/watch.ts b/app/ide-desktop/lib/client/watch.ts
index bf6775ac5e9..15370fcd718 100644
--- a/app/ide-desktop/lib/client/watch.ts
+++ b/app/ide-desktop/lib/client/watch.ts
@@ -142,7 +142,7 @@ process.on('SIGINT', () => {
     process.exit(0)
 })
 
-for (;;) {
+while (true) {
     console.log('Spawning Electron process.')
     const electronProcess = childProcess.spawn('electron', ELECTRON_ARGS, {
         stdio: 'inherit',
diff --git a/app/ide-desktop/lib/common/src/detect.ts b/app/ide-desktop/lib/common/src/detect.ts
index 9d82a1884bb..7374d53d033 100644
--- a/app/ide-desktop/lib/common/src/detect.ts
+++ b/app/ide-desktop/lib/common/src/detect.ts
@@ -11,3 +11,29 @@
 export function isRunningInElectron() {
     return /electron/i.test(navigator.userAgent)
 }
+
+// ================
+// === Platform ===
+// ================
+
+/** Possible platforms that the app may run on. */
+export enum Platform {
+    unknown = 'Unknown platform',
+    windows = 'Windows',
+    macOS = 'macOS',
+    linux = 'Linux',
+}
+
+/** Returns the platform the app is currently running on.
+ * This is used to determine whether `metaKey` or `ctrlKey` is used in shortcuts. */
+export function platform(): Platform {
+    if (/windows/i.test(navigator.userAgent)) {
+        return Platform.windows
+    } else if (/mac os/i.test(navigator.userAgent)) {
+        return Platform.macOS
+    } else if (/linux/i.test(navigator.userAgent)) {
+        return Platform.linux
+    } else {
+        return Platform.unknown
+    }
+}
diff --git a/app/ide-desktop/lib/content/src/index.html b/app/ide-desktop/lib/content/src/index.html
index 87bdfb12d80..b1f05d35170 100644
--- a/app/ide-desktop/lib/content/src/index.html
+++ b/app/ide-desktop/lib/content/src/index.html
@@ -33,11 +33,11 @@
             user-scalable = no"
     />
     <title>Enso</title>
-    <link rel="stylesheet" href="/tailwind.css" />
-    <link rel="stylesheet" href="/style.css" />
-    <link rel="stylesheet" href="/docsStyle.css" />
-    <script type="module" src="/index.js" defer></script>
-    <script type="module" src="/run.js" defer></script>
+    <link rel="stylesheet" href="./tailwind.css" />
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="./docsStyle.css" />
+    <script type="module" src="./index.js" defer></script>
+    <script type="module" src="./run.js" defer></script>
     <script
       src="https://cdn.jsdelivr.net/npm/@twemoji/api@14.1.2/dist/twemoji.min.js"
       integrity="sha384-D6GSzpW7fMH86ilu73eB95ipkfeXcMPoOGVst/L04yqSSe+RTUY0jXcuEIZk0wrT"
diff --git a/app/ide-desktop/lib/content/src/index.ts b/app/ide-desktop/lib/content/src/index.ts
index b6cd8380520..a7a9d743fbb 100644
--- a/app/ide-desktop/lib/content/src/index.ts
+++ b/app/ide-desktop/lib/content/src/index.ts
@@ -22,14 +22,14 @@ const logger = app.log.logger
 /** The name of the `localStorage` key storing the initial URL of the app. */
 const INITIAL_URL_KEY = `${common.PRODUCT_NAME.toLowerCase()}-initial-url`
 /** Path to the SSE endpoint over which esbuild sends events. */
-const ESBUILD_PATH = '/esbuild'
+const ESBUILD_PATH = './esbuild'
 /** SSE event indicating a build has finished. */
 const ESBUILD_EVENT_NAME = 'change'
 /** Path to the serice worker that caches assets for offline usage.
  * In development, it also resolves all extensionless paths to `/index.html`.
  * This is required for client-side routing to work when doing `./run gui watch`.
  */
-const SERVICE_WORKER_PATH = '/serviceWorker.js'
+const SERVICE_WORKER_PATH = './serviceWorker.js'
 /** One second in milliseconds. */
 const SECOND = 1000
 /** Time in seconds after which a `fetchTimeout` ends. */
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/cognito.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/cognito.ts
index cb21253f66d..0aa54f4bcb3 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/cognito.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/cognito.ts
@@ -191,8 +191,10 @@ export class Cognito {
     /** Return the current {@link UserSession}, or `None` if the user is not logged in.
      *
      * Will refresh the {@link UserSession} if it has expired. */
-    userSession() {
-        return userSession()
+    async userSession() {
+        const currentSession = await results.Result.wrapAsync(() => amplify.Auth.currentSession())
+        const amplifySession = currentSession.mapErr(intoCurrentSessionErrorKind)
+        return amplifySession.map(parseUserSession).unwrapOr(null)
     }
 
     /** Returns the associated organization ID of the current user, which is passed during signup,
@@ -207,8 +209,17 @@ export class Cognito {
     /** Sign up with username and password.
      *
      * Does not rely on federated identity providers (e.g., Google or GitHub). */
-    signUp(username: string, password: string, organizationId: string | null) {
-        return signUp(this.supportsDeepLinks, username, password, organizationId)
+    async signUp(username: string, password: string, organizationId: string | null) {
+        const result = await results.Result.wrapAsync(async () => {
+            const params = intoSignUpParams(
+                this.supportsDeepLinks,
+                username,
+                password,
+                organizationId
+            )
+            await amplify.Auth.signUp(params)
+        })
+        return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoSignUpErrorOrThrow)
     }
 
     /** Send the email address verification code.
@@ -217,8 +228,11 @@ export class Cognito {
      * verification page. The email verification page will parse the verification code from the URL.
      * If the verification code matches, the email address is marked as verified. Once the email
      * address is verified, the user can sign in. */
-    confirmSignUp(email: string, code: string) {
-        return confirmSignUp(email, code)
+    async confirmSignUp(email: string, code: string) {
+        const result = await results.Result.wrapAsync(async () => {
+            await amplify.Auth.confirmSignUp(email, code)
+        })
+        return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoConfirmSignUpErrorOrThrow)
     }
 
     /** Sign in via the Google federated identity provider.
@@ -226,8 +240,13 @@ export class Cognito {
      * This function will open the Google authentication page in the user's browser. The user will
      * be asked to log in to their Google account, and then to grant access to the application.
      * After the user has granted access, the browser will be redirected to the application. */
-    signInWithGoogle() {
-        return signInWithGoogle(this.customState())
+    async signInWithGoogle() {
+        const customState = this.customState()
+        const provider = amplify.CognitoHostedUIIdentityProvider.Google
+        await amplify.Auth.federatedSignIn({
+            provider,
+            ...(customState != null ? { customState } : {}),
+        })
     }
 
     /** Sign in via the GitHub federated identity provider.
@@ -235,20 +254,40 @@ export class Cognito {
      * This function will open the GitHub authentication page in the user's browser. The user will
      * be asked to log in to their GitHub account, and then to grant access to the application.
      * After the user has granted access, the browser will be redirected to the application. */
-    signInWithGitHub() {
-        return signInWithGitHub()
+    async signInWithGitHub() {
+        await amplify.Auth.federatedSignIn({
+            customProvider: GITHUB_PROVIDER,
+        })
     }
 
     /** Sign in with the given username and password.
      *
      * Does not rely on external identity providers (e.g., Google or GitHub). */
-    signInWithPassword(username: string, password: string) {
-        return signInWithPassword(username, password)
+    async signInWithPassword(username: string, password: string) {
+        const result = await results.Result.wrapAsync(async () => {
+            await amplify.Auth.signIn(username, password)
+        })
+        return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoSignInWithPasswordErrorOrThrow)
     }
 
     /** Sign out the current user. */
-    signOut() {
-        return signOut(this.logger)
+    async signOut() {
+        // FIXME [NP]: https://github.com/enso-org/cloud-v2/issues/341
+        // For some reason, the redirect back to the IDE from the browser doesn't work correctly so this
+        // `await` throws a timeout error. As a workaround, we catch this error and force a refresh of
+        // the session manually by running the `signOut` again. This works because Amplify will see that
+        // we've already signed out and clear the cache accordingly. Ideally we should figure out how
+        // to fix the redirect and remove this `catch`. This has the unintended consequence of catching
+        // any other errors that might occur during sign out, that we really shouldn't be catching. This
+        // also has the unintended consequence of delaying the sign out process by a few seconds (until
+        // the timeout occurs).
+        try {
+            await amplify.Auth.signOut()
+        } catch (error) {
+            this.logger.error('Sign out failed', error)
+        } finally {
+            await amplify.Auth.signOut()
+        }
     }
 
     /** Send a password reset email.
@@ -256,8 +295,11 @@ export class Cognito {
      * The user will be able to reset their password by following the link in the email, which takes
      * them to the "reset password" page of the application. The verification code will be filled in
      * automatically. */
-    forgotPassword(email: string) {
-        return forgotPassword(email)
+    async forgotPassword(email: string) {
+        const result = await results.Result.wrapAsync(async () => {
+            await amplify.Auth.forgotPassword(email)
+        })
+        return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoForgotPasswordErrorOrThrow)
     }
 
     /** Submit a new password for the given email address.
@@ -265,8 +307,11 @@ export class Cognito {
      * The user will have received a verification code in an email, which they will have entered on
      * the "reset password" page of the application. This function will submit the new password
      * along with the verification code, changing the user's password. */
-    forgotPasswordSubmit(email: string, code: string, password: string) {
-        return forgotPasswordSubmit(email, code, password)
+    async forgotPasswordSubmit(email: string, code: string, password: string) {
+        const result = await results.Result.wrapAsync(async () => {
+            await amplify.Auth.forgotPasswordSubmit(email, code, password)
+        })
+        return result.mapErr(intoForgotPasswordSubmitErrorOrThrow)
     }
 
     /** Change a password for current authenticated user.
@@ -275,8 +320,17 @@ export class Cognito {
      * password, new password, and repeat new password to change their old password to the new
      * one. The validation of the repeated new password is handled by the `changePasswordModel`
      * component. */
-    changePassword(oldPassword: string, newPassword: string) {
-        return changePassword(oldPassword, newPassword)
+    async changePassword(oldPassword: string, newPassword: string) {
+        const cognitoUserResult = await currentAuthenticatedUser()
+        if (cognitoUserResult.ok) {
+            const cognitoUser = cognitoUserResult.unwrap()
+            const result = await results.Result.wrapAsync(async () => {
+                await amplify.Auth.changePassword(cognitoUser, oldPassword, newPassword)
+            })
+            return result.mapErr(intoAmplifyErrorOrThrow)
+        } else {
+            return results.Err(cognitoUserResult.val)
+        }
     }
 
     /** We want to signal to Amplify to fire a "custom state change" event when the user is
@@ -320,21 +374,6 @@ export interface UserSession {
     accessToken: string
 }
 
-/** Return the current `CognitoUserSession`, if one exists. */
-async function userSession() {
-    const amplifySession = await getAmplifyCurrentSession()
-    return amplifySession.map(parseUserSession).toOption()
-}
-
-/** Return the current `CognitoUserSession` if the user is logged in, or `CurrentSessionErrorKind`
- * otherwise.
- *
- * Will refresh the session if it has expired. */
-async function getAmplifyCurrentSession() {
-    const currentSession = await results.Result.wrapAsync(() => amplify.Auth.currentSession())
-    return currentSession.mapErr(intoCurrentSessionErrorKind)
-}
-
 /** Parse a `CognitoUserSession` into a {@link UserSession}.
  * @throws If the `email` field of the payload is not a string. */
 function parseUserSession(session: cognito.CognitoUserSession): UserSession {
@@ -372,21 +411,6 @@ function intoCurrentSessionErrorKind(error: unknown): CurrentSessionErrorKind {
 // === SignUp ===
 // ==============
 
-/** A wrapper around the Amplify "sign up" endpoint that converts known errors
- * to {@link SignUpError}s. */
-async function signUp(
-    supportsDeepLinks: boolean,
-    username: string,
-    password: string,
-    organizationId: string | null
-) {
-    const result = await results.Result.wrapAsync(async () => {
-        const params = intoSignUpParams(supportsDeepLinks, username, password, organizationId)
-        await amplify.Auth.signUp(params)
-    })
-    return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoSignUpErrorOrThrow)
-}
-
 /** Format a username and password as an {@link amplify.SignUpParams}. */
 function intoSignUpParams(
     supportsDeepLinks: boolean,
@@ -471,14 +495,6 @@ function intoSignUpErrorOrThrow(error: AmplifyError): SignUpError {
 // === ConfirmSignUp ===
 // =====================
 
-/** A wrapper around the Amplify "confirm sign up" endpoint that converts known errors
- * to {@link ConfirmSignUpError}s. */
-async function confirmSignUp(email: string, code: string) {
-    return results.Result.wrapAsync(async () => {
-        await amplify.Auth.confirmSignUp(email, code)
-    }).then(result => result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoConfirmSignUpErrorOrThrow))
-}
-
 const CONFIRM_SIGN_UP_USER_ALREADY_CONFIRMED_ERROR = {
     internalCode: 'NotAuthorizedException',
     internalMessage: 'User cannot be confirmed. Current status is CONFIRMED',
@@ -514,44 +530,10 @@ function intoConfirmSignUpErrorOrThrow(error: AmplifyError): ConfirmSignUpError
     }
 }
 
-// ========================
-// === SignInWithGoogle ===
-// ========================
-
-/** A wrapper around the Amplify "sign in with Google" endpoint. */
-async function signInWithGoogle(customState: string | null) {
-    const provider = amplify.CognitoHostedUIIdentityProvider.Google
-    const options = {
-        provider,
-        ...(customState != null ? { customState } : {}),
-    }
-    await amplify.Auth.federatedSignIn(options)
-}
-
-// ========================
-// === SignInWithGoogle ===
-// ========================
-
-/** A wrapper around the Amplify confirm "sign in with GitHub" endpoint. */
-async function signInWithGitHub() {
-    await amplify.Auth.federatedSignIn({
-        customProvider: GITHUB_PROVIDER,
-    })
-}
-
 // ==========================
 // === SignInWithPassword ===
 // ==========================
 
-/** A wrapper around the Amplify "sign in with password" endpoint that converts known errors
- * to {@link SignInWithPasswordError}s. */
-async function signInWithPassword(username: string, password: string) {
-    const result = await results.Result.wrapAsync(async () => {
-        await amplify.Auth.signIn(username, password)
-    })
-    return result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoSignInWithPasswordErrorOrThrow)
-}
-
 /** Internal IDs of errors that may occur when signing in with a password. */
 type SignInWithPasswordErrorKind = 'NotAuthorized' | 'UserNotConfirmed' | 'UserNotFound'
 
@@ -589,11 +571,12 @@ function intoSignInWithPasswordErrorOrThrow(error: AmplifyError): SignInWithPass
 // ======================
 // === ForgotPassword ===
 // ======================
+
 const FORGOT_PASSWORD_USER_NOT_CONFIRMED_ERROR = {
     internalCode: 'InvalidParameterException',
     kind: 'UserNotConfirmed',
-    message: `Cannot reset password for the user as there is no registered/verified email or \
-phone_number`,
+    message: `Cannot reset password for the user as there is no registered/verified email \
+or phone_number`,
 } as const
 
 const FORGOT_PASSWORD_USER_NOT_FOUND_ERROR = {
@@ -601,14 +584,6 @@ const FORGOT_PASSWORD_USER_NOT_FOUND_ERROR = {
     kind: 'UserNotFound',
 } as const
 
-/** A wrapper around the Amplify "forgot password" endpoint that converts known errors
- * to {@link ForgotPasswordError}s. */
-async function forgotPassword(email: string) {
-    return results.Result.wrapAsync(async () => {
-        await amplify.Auth.forgotPassword(email)
-    }).then(result => result.mapErr(intoAmplifyErrorOrThrow).mapErr(intoForgotPasswordErrorOrThrow))
-}
-
 /** Internal IDs of errors that may occur when requesting a password reset. */
 type ForgotPasswordErrorKind =
     | (typeof FORGOT_PASSWORD_USER_NOT_CONFIRMED_ERROR)['kind']
@@ -646,15 +621,6 @@ function intoForgotPasswordErrorOrThrow(error: AmplifyError): ForgotPasswordErro
 // === ForgotPasswordSubmit ===
 // ============================
 
-/** A wrapper around the Amplify "forgot password submit" endpoint that converts known errors
- * to {@link ForgotPasswordSubmitError}s. */
-async function forgotPasswordSubmit(email: string, code: string, password: string) {
-    const result = await results.Result.wrapAsync(async () => {
-        await amplify.Auth.forgotPasswordSubmit(email, code, password)
-    })
-    return result.mapErr(intoForgotPasswordSubmitErrorOrThrow)
-}
-
 /** Internal IDs of errors that may occur when resetting a password. */
 type ForgotPasswordSubmitErrorKind = 'AmplifyError' | 'AuthError'
 
@@ -683,30 +649,6 @@ function intoForgotPasswordSubmitErrorOrThrow(error: unknown): ForgotPasswordSub
     }
 }
 
-// ===============
-// === SignOut ===
-// ===============
-
-/** A wrapper around the Amplify "sign out" endpoint. */
-async function signOut(logger: loggerProvider.Logger) {
-    // FIXME [NP]: https://github.com/enso-org/cloud-v2/issues/341
-    // For some reason, the redirect back to the IDE from the browser doesn't work correctly so this
-    // `await` throws a timeout error. As a workaround, we catch this error and force a refresh of
-    // the session manually by running the `signOut` again. This works because Amplify will see that
-    // we've already signed out and clear the cache accordingly. Ideally we should figure out how
-    // to fix the redirect and remove this `catch`. This has the unintended consequence of catching
-    // any other errors that might occur during sign out, that we really shouldn't be catching. This
-    // also has the unintended consequence of delaying the sign out process by a few seconds (until
-    // the timeout occurs).
-    try {
-        await amplify.Auth.signOut()
-    } catch (error) {
-        logger.error('Sign out failed', error)
-    } finally {
-        await amplify.Auth.signOut()
-    }
-}
-
 // ======================
 // === ChangePassword ===
 // ======================
@@ -724,18 +666,3 @@ async function currentAuthenticatedUser() {
     )
     return result.mapErr(intoAmplifyErrorOrThrow)
 }
-
-/** A wrapper around the Amplify "change password submit" endpoint that converts known errors
- * to {@link AmplifyError}s. */
-async function changePassword(oldPassword: string, newPassword: string) {
-    const cognitoUserResult = await currentAuthenticatedUser()
-    if (cognitoUserResult.ok) {
-        const cognitoUser = cognitoUserResult.unwrap()
-        const result = await results.Result.wrapAsync(async () => {
-            await amplify.Auth.changePassword(cognitoUser, oldPassword, newPassword)
-        })
-        return result.mapErr(intoAmplifyErrorOrThrow)
-    } else {
-        return results.Err(cognitoUserResult.val)
-    }
-}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/confirmRegistration.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/confirmRegistration.tsx
index ef32d3214f6..7cba3cd77bf 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/confirmRegistration.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/components/confirmRegistration.tsx
@@ -31,8 +31,8 @@ function ConfirmRegistration() {
 
     const { verificationCode, email } = parseUrlSearchParams(location.search)
 
-    // No dependencies means this runs on every render, however this component should immediately
-    // navigate away so it shouldn't exist for more than a few renders.
+    // No dependencies means this runs on every render, however this component immediately
+    // navigates away so it should not exist for more than a few renders.
     React.useEffect(() => {
         if (email == null || verificationCode == null) {
             navigate(app.LOGIN_PATH)
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/config.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/config.ts
index 5dc8038e98d..46d3846436b 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/config.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/config.ts
@@ -12,54 +12,58 @@
 
 import * as newtype from '../newtype'
 
-// =================
-// === Constants ===
-// =================
-
-/** AWS region in which our Cognito pool is located. */
-export const AWS_REGION = newtype.asNewtype<AwsRegion>('eu-west-1')
-/** Complete list of OAuth scopes used by the app. */
-export const OAUTH_SCOPES = [
-    newtype.asNewtype<OAuthScope>('email'),
-    newtype.asNewtype<OAuthScope>('openid'),
-]
-/** OAuth response type used in the OAuth flows. */
-export const OAUTH_RESPONSE_TYPE = newtype.asNewtype<OAuthResponseType>('code')
-
 // =============
 // === Types ===
 // =============
 
+// These are constructor functions that construct values of the type they are named after.
+/* eslint-disable @typescript-eslint/no-redeclare */
+
 /** The AWS region in which our Cognito pool is located. This is always set to `eu-west-1` because
  * that is the only region in which our Cognito pools are currently available in. */
 type AwsRegion = newtype.Newtype<string, 'AwsRegion'>
+/** Create an {@link AwsRegion}. */
+const AwsRegion = newtype.newtypeConstructor<AwsRegion>()
 /** ID of the "Cognito user pool" that contains authentication & identity data of our users.
  *
  * This is created automatically by our Terraform scripts when the backend infrastructure is
  * created. Look in the `enso-org/cloud-v2` repo for details. */
 export type UserPoolId = newtype.Newtype<string, 'UserPoolId'>
+/** Create a {@link UserPoolId}. */
+export const UserPoolId = newtype.newtypeConstructor<UserPoolId>()
 /** ID of an OAuth client authorized to interact with the Cognito user pool specified by the
  * {@link UserPoolId}.
  *
  * This is created automatically by our Terraform scripts when the backend infrastructure is
  * created. Look in the `enso-org/cloud-v2` repo for details. */
 export type UserPoolWebClientId = newtype.Newtype<string, 'UserPoolWebClientId'>
+/** Create a {@link UserPoolWebClientId}. */
+export const UserPoolWebClientId = newtype.newtypeConstructor<UserPoolWebClientId>()
 /** Domain of the Cognito user pool used for authenticating/identifying the user.
  *
  * This must correspond to the public-facing domain name of the Cognito pool identified by the
  * {@link UserPoolId}, and must not contain an HTTP scheme, or a pathname. */
 export type OAuthDomain = newtype.Newtype<string, 'OAuthDomain'>
+/** Create a {@link OAuthDomain}. */
+export const OAuthDomain = newtype.newtypeConstructor<OAuthDomain>()
 /** Possible OAuth scopes to request from the federated identity provider during OAuth sign-in. */
 type OAuthScope = newtype.Newtype<string, 'OAuthScope'>
+/** Create an {@link OAuthScope}. */
+const OAuthScope = newtype.newtypeConstructor<OAuthScope>()
 /** The response type used to complete the OAuth flow. "code" means that the federated identity
  * provider will return an authorization code that can be exchanged for an access token. The
  * authorization code will be provided as a query parameter of the redirect URL. */
 type OAuthResponseType = newtype.Newtype<string, 'OAuthResponseType'>
+/** Create an {@link OAuthResponseType}. */
+const OAuthResponseType = newtype.newtypeConstructor<OAuthResponseType>()
 /** The URL used as a redirect (minus query parameters like `code` which get appended later), once
  * an OAuth flow (e.g., sign-in or sign-out) has completed. These must match the values set in the
  * Cognito pool and during the creation of the OAuth client. See the `enso-org/cloud-v2` repo for
  * details. */
 export type OAuthRedirect = newtype.Newtype<string, 'OAuthRedirect'>
+/** Create a {@link OAuthRedirect}. */
+export const OAuthRedirect = newtype.newtypeConstructor<OAuthRedirect>()
+/* eslint-enable @typescript-eslint/no-redeclare */
 /** Callback used to open URLs for the OAuth flow. This is only used in the desktop app (i.e. not in
  * the cloud). This is because in the cloud we just keep the user in their browser, but in the app
  * we want to open OAuth URLs in the system browser. This is because the user can't be expected to
@@ -73,6 +77,17 @@ export type AccessTokenSaver = (accessToken: string) => void
  * user is redirected back to the app from the system browser, after completing an OAuth flow. */
 export type RegisterOpenAuthenticationUrlCallbackFn = () => void
 
+// =================
+// === Constants ===
+// =================
+
+/** AWS region in which our Cognito pool is located. */
+export const AWS_REGION = AwsRegion('eu-west-1')
+/** Complete list of OAuth scopes used by the app. */
+export const OAUTH_SCOPES = [OAuthScope('email'), OAuthScope('openid')]
+/** OAuth response type used in the OAuth flows. */
+export const OAUTH_RESPONSE_TYPE = OAuthResponseType('code')
+
 // =====================
 // === AmplifyConfig ===
 // =====================
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/auth.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/auth.tsx
index 31e42a2f125..be3c017ab81 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/auth.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/auth.tsx
@@ -15,7 +15,6 @@ import * as errorModule from '../../error'
 import * as http from '../../http'
 import * as localBackend from '../../dashboard/localBackend'
 import * as loggerProvider from '../../providers/logger'
-import * as newtype from '../../newtype'
 import * as remoteBackend from '../../dashboard/remoteBackend'
 import * as sessionProvider from './session'
 
@@ -37,7 +36,7 @@ const MESSAGES = {
     resetPasswordSuccess: 'Successfully reset password!',
     signOutLoading: 'Logging out...',
     signOutSuccess: 'Successfully logged out!',
-    signOutError: 'Error logging out, please try again.',
+    signOutError: 'Could not log out, please try again.',
     pleaseWait: 'Please wait...',
 } as const
 
@@ -194,6 +193,7 @@ export function AuthProvider(props: AuthProviderProps) {
     const goOfflineInternal = React.useCallback(() => {
         setInitialized(true)
         setUserSession(OFFLINE_USER_SESSION)
+        setBackendWithoutSavingType(new localBackend.LocalBackend())
         if (supportsLocalBackend) {
             setBackendWithoutSavingType(new localBackend.LocalBackend())
         } else {
@@ -218,8 +218,9 @@ export function AuthProvider(props: AuthProviderProps) {
     // This is identical to `hooks.useOnlineCheck`, however it is inline here to avoid any possible
     // circular dependency.
     React.useEffect(() => {
-        // `navigator.onLine` is not a dependency so that the app doesn't make the remote backend
-        // completely unusable on unreliable connections.
+        // `navigator.onLine` is not a dependency of this `useEffect` (so this effect is not called
+        // when `navigator.onLine` changes) - the internet being down should not immediately disable
+        // the remote backend.
         if (!navigator.onLine) {
             void goOffline()
         }
@@ -235,12 +236,11 @@ export function AuthProvider(props: AuthProviderProps) {
             if (!navigator.onLine || forceOfflineMode) {
                 goOfflineInternal()
                 setForceOfflineMode(false)
-            } else if (session.none) {
+            } else if (session == null) {
                 setInitialized(true)
                 setUserSession(null)
             } else {
-                const { accessToken, email } = session.val
-                const headers = new Headers([['Authorization', `Bearer ${accessToken}`]])
+                const headers = new Headers([['Authorization', `Bearer ${session.accessToken}`]])
                 const client = new http.Client(headers)
                 const backend = new remoteBackend.RemoteBackend(client, logger)
                 // The backend MUST be the remote backend before login is finished.
@@ -252,11 +252,11 @@ export function AuthProvider(props: AuthProviderProps) {
                 ) {
                     setBackendWithoutSavingType(backend)
                 }
-                let organization
-                // eslint-disable-next-line no-restricted-syntax
-                while (organization === undefined) {
+                let organization: backendModule.UserOrOrganization | null
+                while (true) {
                     try {
                         organization = await backend.usersMe()
+                        break
                     } catch {
                         // The value may have changed after the `await`.
                         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -277,25 +277,24 @@ export function AuthProvider(props: AuthProviderProps) {
                     history.replaceState(null, '', url.toString())
                 }
                 let newUserSession: UserSession
-                const sharedSessionData = { email, accessToken }
-                if (!organization) {
+                if (organization == null) {
                     newUserSession = {
                         type: UserSessionType.partial,
-                        ...sharedSessionData,
+                        ...session,
                     }
                 } else {
                     newUserSession = {
                         type: UserSessionType.full,
-                        ...sharedSessionData,
+                        ...session,
                         organization,
                     }
 
                     /** Save access token so can be reused by Enso backend. */
-                    cognito.saveAccessToken(accessToken)
+                    cognito.saveAccessToken(session.accessToken)
 
                     /** Execute the callback that should inform the Electron app that the user has logged in.
                      * This is done to transition the app from the authentication/dashboard view to the IDE. */
-                    onAuthenticated(accessToken)
+                    onAuthenticated(session.accessToken)
                 }
 
                 setUserSession(newUserSession)
@@ -306,12 +305,14 @@ export function AuthProvider(props: AuthProviderProps) {
         fetchSession().catch(error => {
             if (isUserFacingError(error)) {
                 toast.error(error.message)
+                logger.error(error.message)
             } else {
                 logger.error(error)
             }
         })
-        // `userSession` MUST NOT be a dependency as this effect always does a `setUserSession`,
-        // which would result in an infinite loop.
+        // `userSession` MUST NOT be a dependency as `setUserSession` is called every time
+        // by this effect. Because it is an object literal, it will never be equal to the previous
+        // value.
         // `initialized` MUST NOT be a dependency as it breaks offline mode.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
@@ -390,15 +391,15 @@ export function AuthProvider(props: AuthProviderProps) {
         } else {
             try {
                 const organizationId = await authService.cognito.organizationId()
+                // This should not omit success and error toasts as it is not possible
+                // to render this optimistically.
                 await toast.promise(
                     backend.createUser({
                         userName: username,
-                        userEmail: newtype.asNewtype<backendModule.EmailAddress>(email),
+                        userEmail: backendModule.EmailAddress(email),
                         organizationId:
                             organizationId != null
-                                ? newtype.asNewtype<backendModule.UserOrOrganizationId>(
-                                      organizationId
-                                  )
+                                ? backendModule.UserOrOrganizationId(organizationId)
                                 : null,
                     }),
                     {
@@ -451,6 +452,8 @@ export function AuthProvider(props: AuthProviderProps) {
         deinitializeSession()
         setInitialized(false)
         setUserSession(null)
+        // This should not omit success and error toasts as it is not possible
+        // to render this optimistically.
         await toast.promise(cognito.signOut(), {
             success: MESSAGES.signOutSuccess,
             error: MESSAGES.signOutError,
@@ -535,7 +538,7 @@ export function ProtectedLayout() {
     const { session } = useAuth()
     const shouldPreventNavigation = getShouldPreventNavigation()
 
-    if (!shouldPreventNavigation && !session) {
+    if (!shouldPreventNavigation && session == null) {
         return <router.Navigate to={app.LOGIN_PATH} />
     } else if (!shouldPreventNavigation && session?.type === UserSessionType.partial) {
         return <router.Navigate to={app.SET_USERNAME_PATH} />
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/session.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/session.tsx
index b521609a9b4..18196cef1ae 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/session.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/providers/session.tsx
@@ -2,8 +2,6 @@
  * currently authenticated user's session. */
 import * as React from 'react'
 
-import * as results from 'ts-results'
-
 import * as cognito from '../cognito'
 import * as error from '../../error'
 import * as hooks from '../../hooks'
@@ -15,12 +13,12 @@ import * as listen from '../listen'
 
 /** State contained in a {@link SessionContext}. */
 interface SessionContextType {
-    session: results.Option<cognito.UserSession>
+    session: cognito.UserSession | null
     /** Set `initialized` to false. Must be called when logging out. */
     deinitializeSession: () => void
 }
 
-/** See `AuthContext` for safety details. */
+/** See {@link AuthContext} for safety details. */
 const SessionContext = React.createContext<SessionContextType>(
     // eslint-disable-next-line no-restricted-syntax
     {} as SessionContextType
@@ -45,7 +43,7 @@ export interface SessionProviderProps {
      * is initially served. */
     mainPageUrl: URL
     registerAuthEventListener: listen.ListenFunction
-    userSession: () => Promise<results.Option<cognito.UserSession>>
+    userSession: () => Promise<cognito.UserSession | null>
     children: React.ReactNode
 }
 
@@ -63,13 +61,13 @@ export function SessionProvider(props: SessionProviderProps) {
      * set. This is useful when a user has just logged in (as their cached credentials are
      * out of date, so this will update them). */
     const session = hooks.useAsyncEffect(
-        results.None,
+        null,
         async () => {
             const innerSession = await userSession()
             setInitialized(true)
             return innerSession
         },
-        [userSession, refresh]
+        [refresh]
     )
 
     /** Register an effect that will listen for authentication events. When the event occurs, we
@@ -79,8 +77,6 @@ export function SessionProvider(props: SessionProviderProps) {
      * For example, if a user clicks the signout button, this will clear the user's session, which
      * means we want the login screen to render (which is a child of this provider). */
     React.useEffect(() => {
-        /** Handle Cognito authentication events
-         * @throws {error.UnreachableCaseError} Never. */
         const listener: listen.ListenerCallback = event => {
             switch (event) {
                 case listen.AuthEvent.signIn:
@@ -112,7 +108,7 @@ export function SessionProvider(props: SessionProviderProps) {
          * cleaned up between renders. This must be done because the `useEffect` will be called
          * multiple times during the lifetime of the component. */
         return cancel
-    }, [doRefresh, mainPageUrl, registerAuthEventListener])
+    }, [doRefresh, registerAuthEventListener, mainPageUrl])
 
     const deinitializeSession = () => {
         setInitialized(false)
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/service.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/service.tsx
index 3839c7d770d..3198652811c 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/service.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/authentication/service.tsx
@@ -11,7 +11,6 @@ import * as cognito from './cognito'
 import * as config from '../config'
 import * as listen from './listen'
 import * as loggerProvider from '../providers/logger'
-import * as newtype from '../newtype'
 
 // =============
 // === Types ===
@@ -40,9 +39,7 @@ const LOGIN_PATHNAME = '//auth/login'
 const REGISTRATION_PATHNAME = '//auth/registration'
 
 /** URI used as the OAuth redirect when deep links are supported. */
-const DEEP_LINK_REDIRECT = newtype.asNewtype<auth.OAuthRedirect>(
-    `${common.DEEP_LINK_SCHEME}://auth`
-)
+const DEEP_LINK_REDIRECT = auth.OAuthRedirect(`${common.DEEP_LINK_SCHEME}://auth`)
 /** OAuth redirect URLs for the electron app. */
 const DEEP_LINK_REDIRECTS: AmplifyRedirects = {
     redirectSignIn: DEEP_LINK_REDIRECT,
@@ -64,35 +61,23 @@ const BASE_AMPLIFY_CONFIG = {
 const AMPLIFY_CONFIGS = {
     /** Configuration for @indiv0's Cognito user pool. */
     npekin: {
-        userPoolId: newtype.asNewtype<auth.UserPoolId>('eu-west-1_AXX1gMvpx'),
-        userPoolWebClientId: newtype.asNewtype<auth.UserPoolWebClientId>(
-            '1rpnb2n1ijn6o5529a7ob017o'
-        ),
-        domain: newtype.asNewtype<auth.OAuthDomain>(
-            'npekin-enso-domain.auth.eu-west-1.amazoncognito.com'
-        ),
+        userPoolId: auth.UserPoolId('eu-west-1_AXX1gMvpx'),
+        userPoolWebClientId: auth.UserPoolWebClientId('1rpnb2n1ijn6o5529a7ob017o'),
+        domain: auth.OAuthDomain('npekin-enso-domain.auth.eu-west-1.amazoncognito.com'),
         ...BASE_AMPLIFY_CONFIG,
     } satisfies Partial<auth.AmplifyConfig>,
     /** Configuration for @pbuchu's Cognito user pool. */
     pbuchu: {
-        userPoolId: newtype.asNewtype<auth.UserPoolId>('eu-west-1_jSF1RbgPK'),
-        userPoolWebClientId: newtype.asNewtype<auth.UserPoolWebClientId>(
-            '1bnib0jfon3aqc5g3lkia2infr'
-        ),
-        domain: newtype.asNewtype<auth.OAuthDomain>(
-            'pb-enso-domain.auth.eu-west-1.amazoncognito.com'
-        ),
+        userPoolId: auth.UserPoolId('eu-west-1_jSF1RbgPK'),
+        userPoolWebClientId: auth.UserPoolWebClientId('1bnib0jfon3aqc5g3lkia2infr'),
+        domain: auth.OAuthDomain('pb-enso-domain.auth.eu-west-1.amazoncognito.com'),
         ...BASE_AMPLIFY_CONFIG,
     } satisfies Partial<auth.AmplifyConfig>,
     /** Configuration for the production Cognito user pool. */
     production: {
-        userPoolId: newtype.asNewtype<auth.UserPoolId>('eu-west-1_9Kycu2SbD'),
-        userPoolWebClientId: newtype.asNewtype<auth.UserPoolWebClientId>(
-            '4j9bfs8e7415erf82l129v0qhe'
-        ),
-        domain: newtype.asNewtype<auth.OAuthDomain>(
-            'production-enso-domain.auth.eu-west-1.amazoncognito.com'
-        ),
+        userPoolId: auth.UserPoolId('eu-west-1_9Kycu2SbD'),
+        userPoolWebClientId: auth.UserPoolWebClientId('4j9bfs8e7415erf82l129v0qhe'),
+        domain: auth.OAuthDomain('production-enso-domain.auth.eu-west-1.amazoncognito.com'),
         ...BASE_AMPLIFY_CONFIG,
     } satisfies Partial<auth.AmplifyConfig>,
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx
index 9967897287e..57f87cdeea3 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx
@@ -76,6 +76,22 @@ export const FORGOT_PASSWORD_PATH = '/forgot-password'
 export const RESET_PASSWORD_PATH = '/password-reset'
 /** Path to the set username page. */
 export const SET_USERNAME_PATH = '/set-username'
+/** A {@link RegExp} matching all paths. */
+export const ALL_PATHS_REGEX = new RegExp(
+    `(?:${DASHBOARD_PATH}|${LOGIN_PATH}|${REGISTRATION_PATH}|${CONFIRM_REGISTRATION_PATH}|` +
+        `${FORGOT_PASSWORD_PATH}|${RESET_PASSWORD_PATH}|${SET_USERNAME_PATH})$`
+)
+
+// ======================
+// === getMainPageUrl ===
+// ======================
+
+/** Returns the URL to the main page. This is the current URL, with the current route removed. */
+function getMainPageUrl() {
+    const mainPageUrl = new URL(window.location.href)
+    mainPageUrl.pathname = mainPageUrl.pathname.replace(ALL_PATHS_REGEX, '')
+    return mainPageUrl
+}
 
 // ===========
 // === App ===
@@ -112,12 +128,8 @@ function App(props: AppProps) {
      * will redirect the user between the login/register pages and the dashboard. */
     return (
         <>
-            <toast.Toaster
-                toastOptions={{ style: { maxWidth: '100%' } }}
-                position="top-center"
-                reverseOrder={false}
-            />
-            <Router>
+            <toast.Toaster toastOptions={{ style: { maxWidth: '100%' } }} position="top-center" />
+            <Router basename={getMainPageUrl().pathname}>
                 <AppRouter {...props} />
             </Router>
         </>
@@ -142,13 +154,11 @@ function AppRouter(props: AppProps) {
         onAuthenticated,
     } = props
     const navigate = hooks.useNavigate()
-    // FIXME[sb]: After platform detection for Electron is merged in, `IS_DEV_MODE` should be
-    // set to true on `ide watch`.
     if (IS_DEV_MODE) {
         // @ts-expect-error This is used exclusively for debugging.
         window.navigate = navigate
     }
-    const mainPageUrl = new URL(window.location.href)
+    const mainPageUrl = getMainPageUrl()
     const authService = React.useMemo(() => {
         const authConfig = { navigate, ...props }
         return authServiceModule.initAuthService(authConfig)
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/config.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/config.ts
index 1bf6fb651cc..b1999c1a1e0 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/config.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/config.ts
@@ -3,6 +3,24 @@
 import * as auth from './authentication/config'
 import * as newtype from './newtype'
 
+// =============
+// === Types ===
+// =============
+
+/** Base URL for requests to our Cloud API backend. */
+type ApiUrl = newtype.Newtype<`http://${string}` | `https://${string}`, 'ApiUrl'>
+/** Create an {@link ApiUrl}. */
+// This is a constructor function that constructs values of the type after which it is named.
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const ApiUrl = newtype.newtypeConstructor<ApiUrl>()
+
+/** URL to the websocket endpoint of the Help Chat. */
+type ChatUrl = newtype.Newtype<`ws://${string}` | `wss://${string}`, 'ChatUrl'>
+
+// This is a constructor function that constructs values of the type after which it is named.
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const ChatUrl = newtype.newtypeConstructor<ChatUrl>()
+
 // =================
 // === Constants ===
 // =================
@@ -19,15 +37,15 @@ const CLOUD_REDIRECTS = {
      * The redirect URL must be known ahead of time because it is registered with the OAuth provider
      * when it is created. In the native app, the port is unpredictable, but this is not a problem
      * because the native app does not use port-based redirects, but deep links. */
-    development: newtype.asNewtype<auth.OAuthRedirect>('http://localhost:8080'),
-    production: newtype.asNewtype<auth.OAuthRedirect>(REDIRECT_OVERRIDE ?? CLOUD_DOMAIN),
+    development: auth.OAuthRedirect('http://localhost:8080'),
+    production: auth.OAuthRedirect(REDIRECT_OVERRIDE ?? CLOUD_DOMAIN),
 }
 
 /** All possible API URLs, sorted by environment. */
 const API_URLS = {
-    pbuchu: newtype.asNewtype<ApiUrl>('https://xw0g8j3tsb.execute-api.eu-west-1.amazonaws.com'),
-    npekin: newtype.asNewtype<ApiUrl>('https://s02ejyepk1.execute-api.eu-west-1.amazonaws.com'),
-    production: newtype.asNewtype<ApiUrl>('https://7aqkn3tnbc.execute-api.eu-west-1.amazonaws.com'),
+    pbuchu: ApiUrl('https://xw0g8j3tsb.execute-api.eu-west-1.amazonaws.com'),
+    npekin: ApiUrl('https://s02ejyepk1.execute-api.eu-west-1.amazonaws.com'),
+    production: ApiUrl('https://7aqkn3tnbc.execute-api.eu-west-1.amazonaws.com'),
 }
 
 /**
@@ -36,9 +54,8 @@ const API_URLS = {
  * In development mode, the chat bot will need to be run locally:
  * https://github.com/enso-org/enso-bot */
 const CHAT_URLS = {
-    development: newtype.asNewtype<ChatUrl>('ws://localhost:8082'),
-    // TODO[sb]: Insert the actual URL of the production chat bot here.
-    production: newtype.asNewtype<ChatUrl>('wss://chat.cloud.enso.org'),
+    development: ChatUrl('ws://localhost:8082'),
+    production: ChatUrl('wss://chat.cloud.enso.org'),
 }
 
 /** All possible configuration options, sorted by environment. */
@@ -89,9 +106,3 @@ export type Environment = 'npekin' | 'pbuchu' | 'production'
 // ===========
 // === API ===
 // ===========
-
-/** Base URL for requests to our Cloud API backend. */
-type ApiUrl = newtype.Newtype<`http://${string}` | `https://${string}`, 'ApiUrl'>
-
-/** URL to the websocket endpoint of the Help Chat. */
-type ChatUrl = newtype.Newtype<`ws://${string}` | `wss://${string}`, 'ChatUrl'>
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/backend.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/backend.ts
index 2059959dc0a..c8cc47b4a32 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/backend.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/backend.ts
@@ -13,41 +13,68 @@ export enum BackendType {
     remote = 'remote',
 }
 
+// These are constructor functions that construct values of the type they are named after.
+/* eslint-disable @typescript-eslint/no-redeclare */
+
 /** Unique identifier for a user/organization. */
 export type UserOrOrganizationId = newtype.Newtype<string, 'UserOrOrganizationId'>
+/** Create a {@link UserOrOrganizationId}. */
+export const UserOrOrganizationId = newtype.newtypeConstructor<UserOrOrganizationId>()
 
 /** Unique identifier for a directory. */
 export type DirectoryId = newtype.Newtype<string, 'DirectoryId'>
+/** Create a {@link DirectoryId}. */
+export const DirectoryId = newtype.newtypeConstructor<DirectoryId>()
 
 /** Unique identifier for a user's project. */
 export type ProjectId = newtype.Newtype<string, 'ProjectId'>
+/** Create a {@link ProjectId}. */
+export const ProjectId = newtype.newtypeConstructor<ProjectId>()
 
 /** Unique identifier for an uploaded file. */
 export type FileId = newtype.Newtype<string, 'FileId'>
+/** Create a {@link FileId}. */
+export const FileId = newtype.newtypeConstructor<FileId>()
 
 /** Unique identifier for a secret environment variable. */
 export type SecretId = newtype.Newtype<string, 'SecretId'>
+/** Create a {@link SecretId}. */
+export const SecretId = newtype.newtypeConstructor<SecretId>()
 
 /** Unique identifier for an arbitrary asset */
 export type AssetId = DirectoryId | FileId | ProjectId | SecretId
 
 /** Unique identifier for a file tag or project tag. */
 export type TagId = newtype.Newtype<string, 'TagId'>
+/** Create a {@link TagId}. */
+export const TagId = newtype.newtypeConstructor<TagId>()
 
 /** A URL. */
 export type Address = newtype.Newtype<string, 'Address'>
+/** Create an {@link Address}. */
+export const Address = newtype.newtypeConstructor<Address>()
 
 /** An email address. */
 export type EmailAddress = newtype.Newtype<string, 'EmailAddress'>
+/** Create an {@link EmailAddress}. */
+export const EmailAddress = newtype.newtypeConstructor<EmailAddress>()
 
 /** An AWS S3 file path. */
 export type S3FilePath = newtype.Newtype<string, 'S3FilePath'>
+/** Create an {@link S3FilePath}. */
+export const S3FilePath = newtype.newtypeConstructor<S3FilePath>()
 
 /** An AWS machine configuration. */
 export type Ami = newtype.Newtype<string, 'Ami'>
+/** Create an {@link Ami}. */
+export const Ami = newtype.newtypeConstructor<Ami>()
 
 /** An AWS user ID. */
 export type Subject = newtype.Newtype<string, 'Subject'>
+/** Create a {@link Subject}. */
+export const Subject = newtype.newtypeConstructor<Subject>()
+
+/* eslint-enable @typescript-eslint/no-redeclare */
 
 /** A user/organization in the application. These are the primary owners of a project. */
 export interface UserOrOrganization {
@@ -59,6 +86,13 @@ export interface UserOrOrganization {
     isEnabled: boolean
 }
 
+/** A `Directory` returned by `createDirectory`. */
+export interface CreatedDirectory {
+    id: DirectoryId
+    parentId: DirectoryId
+    title: string
+}
+
 /** Possible states that a project can be in. */
 export enum ProjectState {
     created = 'Created',
@@ -261,13 +295,22 @@ export interface UserPermissions {
     permissions: PermissionAction[]
 }
 
+/** The type returned from the "update directory" endpoint. */
+export interface UpdatedDirectory {
+    id: DirectoryId
+    parentId: DirectoryId
+    title: string
+}
+
 /** Metadata uniquely identifying a directory entry.
  * These can be Projects, Files, Secrets, or other directories. */
 export interface BaseAsset {
     id: AssetId
     title: string
     modifiedAt: dateTime.Rfc3339DateTime | null
-    parentId: AssetId
+    /** This is defined as a generic {@link AssetId} in the backend, however it is more convenient
+     * (and currently safe) to assume it is always a {@link DirectoryId}. */
+    parentId: DirectoryId
     permissions: UserPermission[] | null
 }
 
@@ -295,8 +338,20 @@ export interface Asset<Type extends AssetType = AssetType> extends BaseAsset {
     projectState: Type extends AssetType.project ? ProjectStateType : null
 }
 
+/** A convenience alias for {@link Asset}<{@link AssetType.project}>. */
+export interface ProjectAsset extends Asset<AssetType.project> {}
+
+/** A convenience alias for {@link Asset}<{@link AssetType.directory}>. */
+export interface DirectoryAsset extends Asset<AssetType.directory> {}
+
+/** A convenience alias for {@link Asset}<{@link AssetType.secret}>. */
+export interface SecretAsset extends Asset<AssetType.secret> {}
+
+/** A convenience alias for {@link Asset}<{@link AssetType.file}>. */
+export interface FileAsset extends Asset<AssetType.file> {}
+
 /** The type returned from the "create directory" endpoint. */
-export interface Directory extends Asset<AssetType.directory> {}
+export interface Directory extends DirectoryAsset {}
 
 // =================
 // === Constants ===
@@ -309,6 +364,23 @@ export const ASSET_TYPE_NAME: Record<AssetType, string> = {
     [AssetType.file]: 'file',
 } as const
 
+// ==============================
+// === detectVersionLifecycle ===
+// ==============================
+
+/** Extract the {@link VersionLifecycle} from a version string. */
+export function detectVersionLifecycle(version: string) {
+    if (/rc/i.test(version)) {
+        return VersionLifecycle.releaseCandidate
+    } else if (/\bnightly\b/i.test(version)) {
+        return VersionLifecycle.nightly
+    } else if (/\bdev\b|\balpha\b/i.test(version)) {
+        return VersionLifecycle.development
+    } else {
+        return VersionLifecycle.stable
+    }
+}
+
 // =================
 // === Endpoints ===
 // =================
@@ -339,6 +411,11 @@ export interface CreateDirectoryRequestBody {
     parentId: DirectoryId | null
 }
 
+/** HTTP request body for the "update directory" endpoint. */
+export interface UpdateDirectoryRequestBody {
+    title: string
+}
+
 /** HTTP request body for the "create project" endpoint. */
 export interface CreateProjectRequestBody {
     projectName: string
@@ -376,14 +453,14 @@ export interface CreateTagRequestBody {
 
 /** URL query string parameters for the "list directory" endpoint. */
 export interface ListDirectoryRequestParams {
-    parentId?: string
+    parentId: string | null
 }
 
 /** URL query string parameters for the "upload file" endpoint. */
 export interface UploadFileRequestParams {
-    fileId?: string
-    fileName?: string
-    parentDirectoryId?: DirectoryId
+    fileId: string | null
+    fileName: string | null
+    parentDirectoryId: DirectoryId | null
 }
 
 /** URL query string parameters for the "list tags" endpoint. */
@@ -406,6 +483,37 @@ export function assetIsType<Type extends AssetType>(type: Type) {
     return (asset: Asset): asset is Asset<Type> => asset.type === type
 }
 
+// These are functions, and so their names should be camelCase.
+/* eslint-disable no-restricted-syntax */
+/** A type guard that returns whether an {@link Asset} is a {@link ProjectAsset}. */
+export const assetIsProject = assetIsType(AssetType.project)
+/** A type guard that returns whether an {@link Asset} is a {@link DirectoryAsset}. */
+export const assetIsDirectory = assetIsType(AssetType.directory)
+/** A type guard that returns whether an {@link Asset} is a {@link SecretAsset}. */
+export const assetIsSecret = assetIsType(AssetType.secret)
+/** A type guard that returns whether an {@link Asset} is a {@link FileAsset}. */
+export const assetIsFile = assetIsType(AssetType.file)
+/* eslint-disable no-restricted-syntax */
+
+// =======================
+// === rootDirectoryId ===
+// =======================
+
+/** Return the id of the root directory for a user or organization. */
+export function rootDirectoryId(userOrOrganizationId: UserOrOrganizationId) {
+    return DirectoryId(userOrOrganizationId.replace(/^organization-/, `${AssetType.directory}-`))
+}
+
+// ==================
+// === getAssetId ===
+// ==================
+
+/** A convenience function to get the `id` of an {@link Asset}.
+ * This is useful to avoid React re-renders as it is not re-created on each function call. */
+export function getAssetId<Type extends AssetType>(asset: Asset<Type>) {
+    return asset.id
+}
+
 // ==============================
 // === groupPermissionsByUser ===
 // ==============================
@@ -449,38 +557,54 @@ export interface Backend {
     /** Return user details for the current user. */
     usersMe: () => Promise<UserOrOrganization | null>
     /** Return a list of assets in a directory. */
-    listDirectory: (query: ListDirectoryRequestParams) => Promise<Asset[]>
+    listDirectory: (query: ListDirectoryRequestParams, title: string | null) => Promise<Asset[]>
     /** Create a directory. */
-    createDirectory: (body: CreateDirectoryRequestBody) => Promise<Directory>
+    createDirectory: (body: CreateDirectoryRequestBody) => Promise<CreatedDirectory>
+    /** Change the name of a directory. */
+    updateDirectory: (
+        directoryId: DirectoryId,
+        body: UpdateDirectoryRequestBody,
+        title: string | null
+    ) => Promise<UpdatedDirectory>
+    /** Delete a directory. */
+    deleteDirectory: (directoryId: DirectoryId, title: string | null) => Promise<void>
     /** Return a list of projects belonging to the current user. */
     listProjects: () => Promise<ListedProject[]>
     /** Create a project for the current user. */
     createProject: (body: CreateProjectRequestBody) => Promise<CreatedProject>
     /** Close the project identified by the given project ID. */
-    closeProject: (projectId: ProjectId) => Promise<void>
+    closeProject: (projectId: ProjectId, title: string | null) => Promise<void>
     /** Return project details for the specified project ID. */
-    getProjectDetails: (projectId: ProjectId) => Promise<Project>
+    getProjectDetails: (projectId: ProjectId, title: string | null) => Promise<Project>
     /** Set a project to an open state. */
-    openProject: (projectId: ProjectId, body: OpenProjectRequestBody) => Promise<void>
-    projectUpdate: (projectId: ProjectId, body: ProjectUpdateRequestBody) => Promise<UpdatedProject>
+    openProject: (
+        projectId: ProjectId,
+        body: OpenProjectRequestBody | null,
+        title: string | null
+    ) => Promise<void>
+    projectUpdate: (
+        projectId: ProjectId,
+        body: ProjectUpdateRequestBody,
+        title: string | null
+    ) => Promise<UpdatedProject>
     /** Delete a project. */
-    deleteProject: (projectId: ProjectId) => Promise<void>
+    deleteProject: (projectId: ProjectId, title: string | null) => Promise<void>
     /** Return project memory, processor and storage usage. */
-    checkResources: (projectId: ProjectId) => Promise<ResourceUsage>
+    checkResources: (projectId: ProjectId, title: string | null) => Promise<ResourceUsage>
     /** Return a list of files accessible by the current user. */
     listFiles: () => Promise<File[]>
     /** Upload a file. */
     uploadFile: (params: UploadFileRequestParams, body: Blob) => Promise<FileInfo>
     /** Delete a file. */
-    deleteFile: (fileId: FileId) => Promise<void>
+    deleteFile: (fileId: FileId, title: string | null) => Promise<void>
     /** Create a secret environment variable. */
     createSecret: (body: CreateSecretRequestBody) => Promise<SecretAndInfo>
     /** Return a secret environment variable. */
-    getSecret: (secretId: SecretId) => Promise<Secret>
+    getSecret: (secretId: SecretId, title: string | null) => Promise<Secret>
     /** Return the secret environment variables accessible by the user. */
     listSecrets: () => Promise<SecretInfo[]>
     /** Delete a secret environment variable. */
-    deleteSecret: (secretId: SecretId) => Promise<void>
+    deleteSecret: (secretId: SecretId, title: string | null) => Promise<void>
     /** Create a file tag or project tag. */
     createTag: (body: CreateTagRequestBody) => Promise<TagInfo>
     /** Return file tags or project tags accessible by the user. */
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/column.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/column.tsx
new file mode 100644
index 00000000000..b8866e20088
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/column.tsx
@@ -0,0 +1,344 @@
+/** @file Column types and column display modes. */
+import * as React from 'react'
+
+import DefaultUserIcon from 'enso-assets/default_user.svg'
+import PlusIcon from 'enso-assets/plus.svg'
+
+import * as authProvider from '../authentication/providers/auth'
+import * as backend from './backend'
+import * as dateTime from './dateTime'
+import * as modalProvider from '../providers/modal'
+import * as tableColumn from './components/tableColumn'
+
+import PermissionDisplay, * as permissionDisplay from './components/permissionDisplay'
+import ManagePermissionsModal from './components/managePermissionsModal'
+
+// =============
+// === Types ===
+// =============
+
+/** Determines which columns are visible. */
+export enum ColumnDisplayMode {
+    /** Show only columns which are ready for release. */
+    release = 'release',
+    /** Show all columns. */
+    all = 'all',
+    /** Show only name and metadata. */
+    compact = 'compact',
+    /** Show only columns relevant to documentation editors. */
+    docs = 'docs',
+    /** Show only name, metadata, and configuration options. */
+    settings = 'settings',
+}
+
+/** Column type. */
+export enum Column {
+    name = 'name',
+    lastModified = 'last-modified',
+    sharedWith = 'shared-with',
+    docs = 'docs',
+    labels = 'labels',
+    dataAccess = 'data-access',
+    usagePlan = 'usage-plan',
+    engine = 'engine',
+    ide = 'ide',
+}
+
+// =================
+// === Constants ===
+// =================
+
+/** An immutable empty array, useful as a React prop. */
+const EMPTY_ARRAY: never[] = []
+
+/** English names for every column except for the name column. */
+export const COLUMN_NAME: Record<Exclude<Column, Column.name>, string> = {
+    [Column.lastModified]: 'Last modified',
+    [Column.sharedWith]: 'Shared with',
+    [Column.docs]: 'Docs',
+    [Column.labels]: 'Labels',
+    [Column.dataAccess]: 'Data access',
+    [Column.usagePlan]: 'Usage plan',
+    [Column.engine]: 'Engine',
+    [Column.ide]: 'IDE',
+} as const
+
+/** CSS classes for every column. Currently only used to set the widths. */
+export const COLUMN_CSS_CLASS: Record<Column, string> = {
+    [Column.name]: 'w-60',
+    [Column.lastModified]: 'w-40',
+    [Column.sharedWith]: 'w-36',
+    [Column.docs]: 'w-96',
+    [Column.labels]: 'w-80',
+    [Column.dataAccess]: 'w-96',
+    [Column.usagePlan]: 'w-40',
+    [Column.engine]: 'w-20',
+    [Column.ide]: 'w-20',
+} as const
+
+/** A list of column display modes and names, in order. */
+export const COLUMN_DISPLAY_MODES_AND_NAMES: [ColumnDisplayMode, string][] = [
+    [ColumnDisplayMode.all, 'All'],
+    [ColumnDisplayMode.compact, 'Compact'],
+    [ColumnDisplayMode.docs, 'Docs'],
+    [ColumnDisplayMode.settings, 'Settings'],
+]
+
+/** {@link table.ColumnProps} for an unknown variant of {@link backend.Asset}. */
+type AnyAssetColumnProps = Omit<
+    tableColumn.TableColumnProps<backend.Asset>,
+    'rowState' | 'setItem' | 'setRowState' | 'state'
+>
+
+/** A column displaying the time at which the asset was last modified. */
+function LastModifiedColumn(props: AnyAssetColumnProps) {
+    return <>{props.item.modifiedAt && dateTime.formatDateTime(new Date(props.item.modifiedAt))}</>
+}
+
+/** Props for a {@link UserPermissionDisplay}. */
+interface InternalUserPermissionDisplayProps {
+    user: backend.UserPermissions
+    item: backend.Asset
+    emailsOfUsersWithPermission: Set<backend.EmailAddress>
+    ownsThisAsset: boolean
+    onDelete: () => void
+    onPermissionsChange: (permissions: backend.PermissionAction[]) => void
+}
+
+/** Displays permissions for a user on a specific asset. */
+function UserPermissionDisplay(props: InternalUserPermissionDisplayProps) {
+    const {
+        user,
+        item,
+        emailsOfUsersWithPermission,
+        ownsThisAsset,
+        onDelete,
+        onPermissionsChange,
+    } = props
+    const { setModal } = modalProvider.useSetModal()
+    const [permissions, setPermissions] = React.useState(user.permissions)
+    const [oldPermissions, setOldPermissions] = React.useState(user.permissions)
+    const [isHovered, setIsHovered] = React.useState(false)
+    const [isDeleting, setIsDeleting] = React.useState(false)
+
+    React.useEffect(() => {
+        setPermissions(user.permissions)
+    }, [user.permissions])
+
+    return isDeleting ? null : (
+        <PermissionDisplay
+            key={user.user.pk}
+            permissions={permissionDisplay.permissionActionsToPermissions(permissions)}
+            className={`border-2 rounded-full -ml-5 first:ml-0 ${
+                ownsThisAsset ? 'cursor-pointer hover:shadow-soft hover:z-10' : ''
+            }`}
+            onClick={event => {
+                event.stopPropagation()
+                if (ownsThisAsset) {
+                    setModal(
+                        <ManagePermissionsModal
+                            key={Number(new Date())}
+                            user={user.user}
+                            initialPermissions={user.permissions}
+                            asset={item}
+                            emailsOfUsersWithPermission={emailsOfUsersWithPermission}
+                            eventTarget={event.currentTarget}
+                            onSubmit={(_users, newPermissions) => {
+                                if (newPermissions.length === 0) {
+                                    setIsDeleting(true)
+                                } else {
+                                    setOldPermissions(permissions)
+                                    setPermissions(newPermissions)
+                                    onPermissionsChange(newPermissions)
+                                }
+                            }}
+                            onSuccess={(_users, newPermissions) => {
+                                if (newPermissions.length === 0) {
+                                    onDelete()
+                                }
+                            }}
+                            onFailure={() => {
+                                setIsDeleting(false)
+                                setPermissions(oldPermissions)
+                                onPermissionsChange(oldPermissions)
+                            }}
+                        />
+                    )
+                }
+            }}
+            onMouseEnter={() => {
+                setIsHovered(true)
+            }}
+            onMouseLeave={() => {
+                setIsHovered(false)
+            }}
+        >
+            {isHovered && (
+                <div className="relative">
+                    <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full shadow-soft bg-white px-2 py-1">
+                        {user.user.user_email}
+                    </div>
+                </div>
+            )}
+            <img src={DefaultUserIcon} height={24} width={24} />
+        </PermissionDisplay>
+    )
+}
+
+/** A column listing the users with which this asset is shared. */
+function SharedWithColumn(props: AnyAssetColumnProps) {
+    const { item } = props
+    const session = authProvider.useNonPartialUserSession()
+    const { setModal } = modalProvider.useSetModal()
+    const [permissions, setPermissions] = React.useState(() =>
+        backend.groupPermissionsByUser(item.permissions ?? [])
+    )
+    const [oldPermissions, setOldPermissions] = React.useState(permissions)
+    const emailsOfUsersWithPermission = React.useMemo(
+        () => new Set(permissions.map(permission => permission.user.user_email)),
+        [permissions]
+    )
+    const selfPermission = item.permissions?.find(
+        permission => permission.user.user_email === session.organization?.email
+    )?.permission
+    const ownsThisAsset = selfPermission === backend.PermissionAction.own
+    return (
+        <div className="flex">
+            {permissions.map(user => (
+                <UserPermissionDisplay
+                    key={user.user.user_email}
+                    user={user}
+                    item={item}
+                    emailsOfUsersWithPermission={emailsOfUsersWithPermission}
+                    ownsThisAsset={ownsThisAsset}
+                    onDelete={() => {
+                        setPermissions(
+                            permissions.filter(
+                                permission => permission.user.user_email !== user.user.user_email
+                            )
+                        )
+                    }}
+                    onPermissionsChange={newPermissions => {
+                        setPermissions(
+                            permissions.map(permission =>
+                                permission.user.user_email === user.user.user_email
+                                    ? { user: user.user, permissions: newPermissions }
+                                    : permission
+                            )
+                        )
+                    }}
+                />
+            ))}
+            {ownsThisAsset && (
+                <button
+                    onClick={event => {
+                        event.stopPropagation()
+                        setModal(
+                            <ManagePermissionsModal
+                                key={Number(new Date())}
+                                asset={item}
+                                initialPermissions={EMPTY_ARRAY}
+                                emailsOfUsersWithPermission={emailsOfUsersWithPermission}
+                                eventTarget={event.currentTarget}
+                                onSubmit={(users, newPermissions) => {
+                                    setOldPermissions(permissions)
+                                    setPermissions([
+                                        ...permissions,
+                                        ...users.map(user => {
+                                            const userPermissions: backend.UserPermissions = {
+                                                user: {
+                                                    pk: user.id,
+                                                    // The names come from a third-party API
+                                                    // and cannot be changed.
+                                                    /* eslint-disable @typescript-eslint/naming-convention */
+                                                    user_name: user.name,
+                                                    user_email: user.email,
+                                                    /** {@link SharedWithColumn} is only accessible
+                                                     * if `session.organization` is not `null`. */
+                                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                                    organization_id: session.organization!.id,
+                                                    /* eslint-enable @typescript-eslint/naming-convention */
+                                                },
+                                                permissions: newPermissions,
+                                            }
+                                            return userPermissions
+                                        }),
+                                    ])
+                                }}
+                                onFailure={() => {
+                                    setPermissions(oldPermissions)
+                                }}
+                            />
+                        )
+                    }}
+                >
+                    <img src={PlusIcon} />
+                </button>
+            )}
+        </div>
+    )
+}
+
+/** A placeholder component for columns which do not yet have corresponding data to display. */
+function PlaceholderColumn() {
+    return <></>
+}
+
+/** 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
+export const COLUMN_RENDERER: Record<
+    Exclude<Column, Column.name>,
+    (props: AnyAssetColumnProps) => JSX.Element
+> = {
+    [Column.lastModified]: LastModifiedColumn,
+    [Column.sharedWith]: SharedWithColumn,
+    [Column.docs]: PlaceholderColumn,
+    [Column.labels]: PlaceholderColumn,
+    [Column.dataAccess]: PlaceholderColumn,
+    [Column.usagePlan]: PlaceholderColumn,
+    [Column.engine]: PlaceholderColumn,
+    [Column.ide]: PlaceholderColumn,
+}
+
+// ========================
+// === Helper functions ===
+// ========================
+
+/** The list of columns displayed on each `ColumnDisplayMode`. */
+const COLUMNS_FOR: Record<ColumnDisplayMode, Column[]> = {
+    [ColumnDisplayMode.release]: [Column.name, Column.lastModified, Column.sharedWith],
+    [ColumnDisplayMode.all]: [
+        Column.name,
+        Column.lastModified,
+        Column.sharedWith,
+        Column.labels,
+        Column.dataAccess,
+        Column.usagePlan,
+        Column.engine,
+        Column.ide,
+    ],
+    [ColumnDisplayMode.compact]: [
+        Column.name,
+        Column.lastModified,
+        Column.sharedWith,
+        Column.labels,
+        Column.dataAccess,
+    ],
+    [ColumnDisplayMode.docs]: [Column.name, Column.lastModified, Column.docs],
+    [ColumnDisplayMode.settings]: [
+        Column.name,
+        Column.lastModified,
+        Column.usagePlan,
+        Column.engine,
+        Column.ide,
+    ],
+}
+
+/** Returns the list of columns to be displayed. */
+export function columnsFor(displayMode: ColumnDisplayMode, backendType: backend.BackendType) {
+    const columns = COLUMNS_FOR[displayMode]
+    return backendType === backend.BackendType.local
+        ? columns.filter(column => column !== Column.sharedWith)
+        : columns
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/autocomplete.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/autocomplete.tsx
index 101ee5c8de8..b9613061824 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/autocomplete.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/autocomplete.tsx
@@ -212,6 +212,7 @@ function Autocomplete(props: InternalMultipleAutocompleteProps | InternalSingleA
                         ref={inputRef}
                         autoFocus={autoFocus}
                         disabled={disabled}
+                        size={1}
                         className={`grow bg-gray-200 rounded-xl px-2 py-1 ${
                             disabled ? 'pointer-events-none opacity-70' : ''
                         } ${className ?? ''}`}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/chat.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/chat.tsx
index b832e8d8c8e..57f10e8b3a0 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/chat.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/chat.tsx
@@ -18,6 +18,13 @@ import * as newtype from '../../newtype'
 
 import Twemoji from './twemoji'
 
+// ================
+// === Newtypes ===
+// ================
+
+/** Create a {@link chat.MessageId} */
+const MessageId = newtype.newtypeConstructor<chat.MessageId>()
+
 // =================
 // === Constants ===
 // =================
@@ -628,7 +635,7 @@ function Chat(props: ChatProps) {
                 element.style.height = `${element.scrollHeight}px`
                 const newMessage: ChatDisplayMessage = {
                     // This MUST be unique.
-                    id: newtype.asNewtype<chat.MessageId>(String(Number(new Date()))),
+                    id: MessageId(String(Number(new Date()))),
                     isStaffMessage: false,
                     avatar: null,
                     name: 'Me',
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/columnDisplayModeSwitcher.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/columnDisplayModeSwitcher.tsx
new file mode 100644
index 00000000000..18d19ce899d
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/columnDisplayModeSwitcher.tsx
@@ -0,0 +1,42 @@
+/** @file Switcher for choosing which columns are shown. */
+import * as React from 'react'
+
+import * as column from '../column'
+
+// =================================
+// === ColumnDisplayModeSwitcher ===
+// =================================
+
+/** Props for a {@link ColumnDisplayModeSwitcher}. */
+export interface ColumnDisplayModeSwitcherProps {
+    columnDisplayMode: column.ColumnDisplayMode
+    setColumnDisplayMode: (columnDisplayMode: column.ColumnDisplayMode) => void
+}
+
+/** A selector that lets the user choose between pre-defined sets of visible columns. */
+function ColumnDisplayModeSwitcher(props: ColumnDisplayModeSwitcherProps) {
+    const { columnDisplayMode, setColumnDisplayMode } = props
+
+    return (
+        <>
+            {column.COLUMN_DISPLAY_MODES_AND_NAMES.map(modeAndName => {
+                const [mode, name] = modeAndName
+                return (
+                    <button
+                        key={mode}
+                        className={`${
+                            columnDisplayMode === mode ? 'bg-white shadow-soft' : 'opacity-50'
+                        } rounded-full px-1.5`}
+                        onClick={() => {
+                            setColumnDisplayMode(mode)
+                        }}
+                    >
+                        {name}
+                    </button>
+                )
+            })}
+        </>
+    )
+}
+
+export default ColumnDisplayModeSwitcher
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
index 942f0bb8769..6b3b912a0cb 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/confirmDeleteModal.tsx
@@ -4,6 +4,8 @@ import toast from 'react-hot-toast'
 
 import CloseIcon from 'enso-assets/close.svg'
 
+import * as errorModule from '../../error'
+import * as loggerProvider from '../../providers/logger'
 import * as modalProvider from '../../providers/modal'
 
 import Modal from './modal'
@@ -14,29 +16,27 @@ import Modal from './modal'
 
 /** Props for a {@link ConfirmDeleteModal}. */
 export interface ConfirmDeleteModalProps {
-    assetType: string
-    name: string
-    doDelete: () => Promise<void>
-    onComplete: () => void
+    /** Must fit in the sentence "Are you sure you want to delete <description>"? */
+    description: string
+    doDelete: () => void
 }
 
 /** A modal for confirming the deletion of an asset. */
 function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
-    const { assetType, name, doDelete, onComplete } = props
+    const { description, doDelete } = props
+    const logger = loggerProvider.useLogger()
     const { unsetModal } = modalProvider.useSetModal()
 
-    const onSubmit = async () => {
+    const onSubmit = () => {
         unsetModal()
         try {
-            await toast.promise(doDelete(), {
-                loading: `Deleting ${assetType} '${name}'...`,
-                success: `Deleted ${assetType} '${name}'.`,
-                // This is UNSAFE, as the original function's parameter is of type `any`.
-                error: (promiseError: Error) =>
-                    `Error deleting ${assetType} '${name}': ${promiseError.message}`,
-            })
-        } finally {
-            onComplete()
+            doDelete()
+        } catch (error) {
+            const message = `Could not delete ${description}: ${
+                errorModule.tryGetMessage(error) ?? 'unknown error.'
+            }`
+            toast.error(message)
+            logger.error(message)
         }
     }
 
@@ -46,24 +46,26 @@ function ConfirmDeleteModal(props: ConfirmDeleteModalProps) {
                 onClick={event => {
                     event.stopPropagation()
                 }}
-                onSubmit={async event => {
+                onSubmit={event => {
                     event.preventDefault()
                     // Consider not calling `onSubmit()` here to make it harder to accidentally
                     // delete an important asset.
-                    await onSubmit()
+                    onSubmit()
                 }}
                 className="relative bg-white shadow-soft rounded-lg w-96 p-2"
             >
                 <div className="flex">
                     {/* Padding. */}
                     <div className="grow" />
-                    <button type="button" onClick={unsetModal}>
+                    <button
+                        type="button"
+                        className="absolute right-0 top-0 m-2"
+                        onClick={unsetModal}
+                    >
                         <img src={CloseIcon} />
                     </button>
                 </div>
-                <div className="m-2">
-                    Are you sure you want to delete the {assetType} &lsquo;{name}&rsquo;?
-                </div>
+                <div className="m-2">Are you sure you want to delete {description}?</div>
                 <div className="m-1">
                     <button
                         type="submit"
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenu.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenu.tsx
index 87d513cc833..35a6862f9f3 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenu.tsx
@@ -14,7 +14,8 @@ const SCROLL_MARGIN = 12
 // ===================
 
 /** Props for a {@link ContextMenu}. */
-export interface ContextMenuProps {
+export interface ContextMenuProps extends React.PropsWithChildren {
+    key: string
     // `left: number` and `top: number` may be more correct,
     // however passing an event eliminates the chance
     // of passing the wrong coordinates from the event.
@@ -22,7 +23,7 @@ export interface ContextMenuProps {
 }
 
 /** A context menu that opens at the current mouse position. */
-function ContextMenu(props: React.PropsWithChildren<ContextMenuProps>) {
+function ContextMenu(props: ContextMenuProps) {
     const { children, event } = props
     const contextMenuRef = React.useRef<HTMLDivElement>(null)
     const [top, setTop] = React.useState(event.pageY)
@@ -46,6 +47,9 @@ function ContextMenu(props: React.PropsWithChildren<ContextMenuProps>) {
             // The location must be offset by -0.5rem to balance out the `m-2`.
             style={{ left: `calc(${event.pageX}px - 0.5rem)`, top: `calc(${top}px - 0.5rem)` }}
             className="absolute bg-white rounded-lg shadow-soft flex flex-col flex-nowrap m-2"
+            onClick={clickEvent => {
+                clickEvent.stopPropagation()
+            }}
         >
             {children}
         </div>
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenuEntry.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenuEntry.tsx
index 8c451d5077d..337ccbbdddf 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenuEntry.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/contextMenuEntry.tsx
@@ -12,7 +12,6 @@ export interface ContextMenuEntryProps {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
 }
 
-// This component MUST NOT use `useState` because it is not rendered directly.
 /** An item in a `ContextMenu`. */
 function ContextMenuEntry(props: React.PropsWithChildren<ContextMenuEntryProps>) {
     const { children, disabled = false, title, onClick } = props
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx
index d06c123573b..af76495880e 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/createForm.tsx
@@ -23,7 +23,7 @@ export interface CreateFormPassthroughProps {
 /** `CreateFormPassthroughProps`, plus props that should be defined in the wrapper component. */
 export interface CreateFormProps extends CreateFormPassthroughProps, React.PropsWithChildren {
     title: string
-    onSubmit: (event: React.FormEvent) => Promise<void>
+    onSubmit: (event: React.FormEvent) => void
 }
 
 /** A form to create an element. */
@@ -31,9 +31,9 @@ function CreateForm(props: CreateFormProps) {
     const { title, left, top, children, onSubmit: innerOnSubmit } = props
     const { unsetModal } = modalProvider.useSetModal()
 
-    const onSubmit = async (event: React.FormEvent) => {
+    const onSubmit = (event: React.FormEvent) => {
         event.preventDefault()
-        await innerOnSubmit(event)
+        innerOnSubmit(event)
     }
 
     return (
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx
index 28e645a92b2..083c01520d5 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/dashboard.tsx
@@ -1,29 +1,18 @@
 /** @file Main dashboard component, responsible for listing user's projects as well as other
  * interactive components. */
 import * as React from 'react'
-import toast from 'react-hot-toast'
-
-import ArrowRightSmallIcon from 'enso-assets/arrow_right_small.svg'
-import DefaultUserIcon from 'enso-assets/default_user.svg'
-import DirectoryIcon from 'enso-assets/directory.svg'
-import DownloadIcon from 'enso-assets/download.svg'
-import PlusIcon from 'enso-assets/plus.svg'
-import SecretIcon from 'enso-assets/secret.svg'
-import UploadIcon from 'enso-assets/upload.svg'
 
 import * as common from 'enso-common'
 
 import * as backendModule from '../backend'
-import * as dateTime from '../dateTime'
-import * as fileInfo from '../../fileInfo'
-import * as hooks from '../../hooks'
 import * as http from '../../http'
 import * as localBackend from '../localBackend'
-import * as newtype from '../../newtype'
+import * as projectListEventModule from '../events/projectListEvent'
 import * as projectManager from '../projectManager'
 import * as remoteBackendModule from '../remoteBackend'
+import * as shortcuts from '../shortcuts'
 import * as spinner from './spinner'
-import * as uploadMultipleFiles from '../../uploadMultipleFiles'
+import * as tabModule from '../tab'
 
 import * as authProvider from '../../authentication/providers/auth'
 import * as backendProvider from '../../providers/backend'
@@ -31,213 +20,23 @@ import * as loggerProvider from '../../providers/logger'
 import * as modalProvider from '../../providers/modal'
 
 import Chat, * as chat from './chat'
-import PermissionDisplay, * as permissionDisplay from './permissionDisplay'
-import ProjectActionButton, * as projectActionButton from './projectActionButton'
-import ContextMenu from './contextMenu'
-import ContextMenuEntry from './contextMenuEntry'
+import DirectoryView from './directoryView'
 import Ide from './ide'
-import ManagePermissionsModal from './managePermissionsModal'
-import Rows from './rows'
 import Templates from './templates'
+import TheModal from './theModal'
 import TopBar from './topBar'
 
-import ConfirmDeleteModal from './confirmDeleteModal'
-import RenameModal from './renameModal'
-
-import FileCreateForm from './fileCreateForm'
-import SecretCreateForm from './secretCreateForm'
-
-// =============
-// === Types ===
-// =============
-
-/** Main content of the screen. Only one should be visible at a time. */
-export enum Tab {
-    dashboard = 'dashboard',
-    ide = 'ide',
-}
-
-/** Determines which columns are visible. */
-enum ColumnDisplayMode {
-    /** Show only columns which are ready for release. */
-    release = 'release',
-    /** Show all columns. */
-    all = 'all',
-    /** Show only name and metadata. */
-    compact = 'compact',
-    /** Show only columns relevant to documentation editors. */
-    docs = 'docs',
-    /** Show only name, metadata, and configuration options. */
-    settings = 'settings',
-}
-
-/** Column type. */
-enum Column {
-    name = 'name',
-    lastModified = 'last-modified',
-    sharedWith = 'shared-with',
-    docs = 'docs',
-    labels = 'labels',
-    dataAccess = 'data-access',
-    usagePlan = 'usage-plan',
-    engine = 'engine',
-    ide = 'ide',
-}
-
-/** Values provided to form creation dialogs. */
-export interface CreateFormProps {
-    left: number
-    top: number
-    directoryId: backendModule.DirectoryId
-    getNewProjectName: (templateId: string | null) => string
-    onSuccess: () => void
-}
-
 // =================
 // === Constants ===
 // =================
 
-/** Feature flags to enable or disable experimental features. */
-const EXPERIMENTAL = {
-    /** A selector that lets the user choose between pre-defined sets of visible columns. */
-    columnModeSwitcher: false,
-}
-
 /** The `id` attribute of the element into which the IDE will be rendered. */
 const IDE_ELEMENT_ID = 'root'
-/** The `localStorage` key under which the ID of the current directory is stored. */
-const DIRECTORY_STACK_KEY = `${common.PRODUCT_NAME.toLowerCase()}-dashboard-directory-stack`
-/** The {@link RegExp} matching a directory name following the default naming convention. */
-const DIRECTORY_NAME_REGEX = /^New_Directory_(?<directoryIndex>\d+)$/
-/** The default prefix of an automatically generated directory. */
-const DIRECTORY_NAME_DEFAULT_PREFIX = 'New_Directory_'
-
-/** English names for the name column. */
-const ASSET_TYPE_NAME: Record<backendModule.AssetType, string> = {
-    [backendModule.AssetType.project]: 'Projects',
-    [backendModule.AssetType.file]: 'Files',
-    [backendModule.AssetType.secret]: 'Secrets',
-    [backendModule.AssetType.directory]: 'Folders',
-} as const
-
-/** Forms to create each asset type. */
-const ASSET_TYPE_CREATE_FORM: Record<
-    Exclude<
-        backendModule.AssetType,
-        backendModule.AssetType.directory | backendModule.AssetType.project
-    >,
-    (props: CreateFormProps) => JSX.Element
-> = {
-    [backendModule.AssetType.file]: FileCreateForm,
-    [backendModule.AssetType.secret]: SecretCreateForm,
-}
-
-/** English names for every column except for the name column. */
-const COLUMN_NAME: Record<Exclude<Column, Column.name>, string> = {
-    [Column.lastModified]: 'Last modified',
-    [Column.sharedWith]: 'Shared with',
-    [Column.docs]: 'Docs',
-    [Column.labels]: 'Labels',
-    [Column.dataAccess]: 'Data access',
-    [Column.usagePlan]: 'Usage plan',
-    [Column.engine]: 'Engine',
-    [Column.ide]: 'IDE',
-} as const
-
-/** CSS classes for every column. Currently only used to set the widths. */
-const COLUMN_CSS_CLASS: Record<Column, string> = {
-    [Column.name]: 'min-w-60',
-    [Column.lastModified]: 'min-w-40',
-    [Column.sharedWith]: 'min-w-36',
-    [Column.docs]: 'min-w-96',
-    [Column.labels]: 'min-w-80',
-    [Column.dataAccess]: 'min-w-96',
-    [Column.usagePlan]: '',
-    [Column.engine]: 'min-w-20',
-    [Column.ide]: 'min-w-20',
-} as const
-
-/** The list of columns displayed on each `ColumnDisplayMode`. */
-const COLUMNS_FOR: Record<ColumnDisplayMode, Column[]> = {
-    [ColumnDisplayMode.release]: [Column.name, Column.lastModified, Column.sharedWith],
-    [ColumnDisplayMode.all]: [
-        Column.name,
-        Column.lastModified,
-        Column.sharedWith,
-        Column.labels,
-        Column.dataAccess,
-        Column.usagePlan,
-        Column.engine,
-        Column.ide,
-    ],
-    [ColumnDisplayMode.compact]: [
-        Column.name,
-        Column.lastModified,
-        Column.sharedWith,
-        Column.labels,
-        Column.dataAccess,
-    ],
-    [ColumnDisplayMode.docs]: [Column.name, Column.lastModified, Column.docs],
-    [ColumnDisplayMode.settings]: [
-        Column.name,
-        Column.lastModified,
-        Column.usagePlan,
-        Column.engine,
-        Column.ide,
-    ],
-}
-
-// ========================
-// === Helper functions ===
-// ========================
-
-/** Return the id of the root directory for a user or organization. */
-function rootDirectoryId(userOrOrganizationId: backendModule.UserOrOrganizationId) {
-    return newtype.asNewtype<backendModule.DirectoryId>(
-        userOrOrganizationId.replace(/^organization-/, `${backendModule.AssetType.directory}-`)
-    )
-}
-
-/** Returns the list of columns to be displayed. */
-function columnsFor(displayMode: ColumnDisplayMode, backendType: backendModule.BackendType) {
-    const columns = COLUMNS_FOR[displayMode]
-    return backendType === backendModule.BackendType.local
-        ? columns.filter(column => column !== Column.sharedWith)
-        : columns
-}
-
-/** Returns a new array, in which the given asset is replaced with a new asset with the new name. */
-function arrayWithAssetTitleChanged<T extends backendModule.AssetType>(
-    assets: backendModule.Asset<T>[],
-    asset: backendModule.Asset<T>,
-    newTitle: string
-) {
-    return assets.map(item => (item === asset ? { ...asset, title: newTitle } : item))
-}
-
-/** Returns a new array, in which the given asset is omitted. */
-function arrayWithAssetOmitted<T extends backendModule.AssetType>(
-    assets: backendModule.Asset<T>[],
-    asset: backendModule.Asset<T>
-) {
-    return assets.filter(item => item !== asset)
-}
-
-/** Sanitizes a string for use as a regex. */
-function regexEscape(string: string) {
-    return string.replace(/[\\^$.|?*+()[{]/g, '\\$&')
-}
 
 // =================
 // === Dashboard ===
 // =================
 
-/** Metadata uniquely identifying a user's permissions for a specific asset. */
-interface UserPermissionId {
-    userId: backendModule.Subject
-    assetId: backendModule.AssetId
-}
-
 /** Props for {@link Dashboard}s that are common to all platforms. */
 export interface DashboardProps {
     /** Whether the application may have the local backend running. */
@@ -252,91 +51,24 @@ export interface DashboardProps {
 /** The component that contains the entire UI. */
 function Dashboard(props: DashboardProps) {
     const { supportsLocalBackend, appRunner, initialProjectName } = props
-
     const logger = loggerProvider.useLogger()
     const session = authProvider.useNonPartialUserSession()
     const { backend } = backendProvider.useBackend()
     const { setBackend } = backendProvider.useSetBackend()
-    const { modal } = modalProvider.useModal()
-    const { setModal, unsetModal } = modalProvider.useSetModal()
-
-    const [refresh, doRefresh] = hooks.useRefresh()
-
-    const [onDirectoryNextLoaded, setOnDirectoryNextLoaded] = React.useState<
-        ((assets: backendModule.Asset[]) => void) | null
-    >(() =>
-        initialProjectName != null
-            ? (assets: backendModule.Asset[]) => {
-                  if (
-                      !assets.some(
-                          asset =>
-                              asset.type === backendModule.AssetType.project &&
-                              asset.title === initialProjectName
-                      )
-                  ) {
-                      const errorMessage = `No project named '${initialProjectName}' was found.`
-                      toast.error(errorMessage)
-                      logger.error(`Error opening project on startup: ${errorMessage}`)
-                  }
-              }
-            : null
-    )
-    const [nameOfProjectToImmediatelyOpen, setNameOfProjectToImmediatelyOpen] =
-        React.useState(initialProjectName)
-    const [onSpinnerStateChange, setOnSpinnerStateChange] = React.useState<
-        ((state: spinner.SpinnerState | null) => void) | null
-    >(null)
-    const [projectEvent, setProjectEvent] = React.useState<projectActionButton.ProjectEvent | null>(
-        null
+    const { unsetModal } = modalProvider.useSetModal()
+    const [directoryId, setDirectoryId] = React.useState(
+        session.organization != null ? backendModule.rootDirectoryId(session.organization.id) : null
     )
     const [query, setQuery] = React.useState('')
     const [isHelpChatOpen, setIsHelpChatOpen] = React.useState(false)
     const [isHelpChatVisible, setIsHelpChatVisible] = React.useState(false)
     const [loadingProjectManagerDidFail, setLoadingProjectManagerDidFail] = React.useState(false)
-    const [directoryId, setDirectoryId] = React.useState(
-        session.organization != null ? rootDirectoryId(session.organization.id) : null
-    )
-    const [directoryStack, setDirectoryStack] = React.useState<
-        backendModule.Asset<backendModule.AssetType.directory>[]
-    >([])
-    // Defined by the spec as `compact` by default, however it is not ready yet.
-    const [columnDisplayMode, setColumnDisplayMode] = React.useState(ColumnDisplayMode.release)
-    const [tab, setTab] = React.useState(Tab.dashboard)
+    const [tab, setTab] = React.useState(tabModule.Tab.dashboard)
     const [project, setProject] = React.useState<backendModule.Project | null>(null)
-    const [selectedAssets, setSelectedAssets] = React.useState<backendModule.Asset[]>([])
-    const [hoveredUserPermission, setHoveredUserPermission] =
-        React.useState<UserPermissionId | null>(null)
-    const [isFileBeingDragged, setIsFileBeingDragged] = React.useState(false)
-    const [isScrollBarVisible, setIsScrollBarVisible] = React.useState(false)
-
-    const [isLoadingAssets, setIsLoadingAssets] = React.useState(true)
-    const [projectAssets, setProjectAssetsRaw] = React.useState<
-        backendModule.Asset<backendModule.AssetType.project>[]
-    >([])
-    const [directoryAssets, setDirectoryAssetsRaw] = React.useState<
-        backendModule.Asset<backendModule.AssetType.directory>[]
-    >([])
-    const [secretAssets, setSecretAssetsRaw] = React.useState<
-        backendModule.Asset<backendModule.AssetType.secret>[]
-    >([])
-    const [fileAssets, setFileAssetsRaw] = React.useState<
-        backendModule.Asset<backendModule.AssetType.file>[]
-    >([])
-    const [visibleProjectAssets, setVisibleProjectAssets] = React.useState<
-        backendModule.Asset<backendModule.AssetType.project>[]
-    >([])
-    const [visibleDirectoryAssets, setVisibleDirectoryAssets] = React.useState<
-        backendModule.Asset<backendModule.AssetType.directory>[]
-    >([])
-    const [visibleSecretAssets, setVisibleSecretAssets] = React.useState<
-        backendModule.Asset<backendModule.AssetType.secret>[]
-    >([])
-    const [visibleFileAssets, setVisibleFileAssets] = React.useState<
-        backendModule.Asset<backendModule.AssetType.file>[]
-    >([])
-    const [projectDatas, setProjectDatas] = React.useState<
-        Record<backendModule.ProjectId, projectActionButton.ProjectData>
-    >({})
+    const [nameOfProjectToImmediatelyOpen, setNameOfProjectToImmediatelyOpen] =
+        React.useState(initialProjectName)
+    const [projectListEvent, dispatchProjectListEvent] =
+        React.useState<projectListEventModule.ProjectListEvent | null>(null)
 
     const isListingLocalDirectoryAndWillFail =
         backend.type === backendModule.BackendType.local && loadingProjectManagerDidFail
@@ -346,27 +78,55 @@ function Dashboard(props: DashboardProps) {
     const isListingRemoteDirectoryWhileOffline =
         session.type === authProvider.UserSessionType.offline &&
         backend.type === backendModule.BackendType.remote
-    const directory = directoryStack[directoryStack.length - 1]
-    const parentDirectory = directoryStack[directoryStack.length - 2]
 
     const switchToIdeTab = React.useCallback(() => {
-        setTab(Tab.ide)
+        setTab(tabModule.Tab.ide)
+        unsetModal()
         const ideElement = document.getElementById(IDE_ELEMENT_ID)
         if (ideElement) {
             ideElement.style.top = ''
             ideElement.style.display = 'absolute'
         }
-    }, [])
+    }, [/* should never change */ unsetModal])
 
     const switchToDashboardTab = React.useCallback(() => {
-        setTab(Tab.dashboard)
-        doRefresh()
+        setTab(tabModule.Tab.dashboard)
         const ideElement = document.getElementById(IDE_ELEMENT_ID)
         if (ideElement) {
             ideElement.style.top = '-100vh'
             ideElement.style.display = 'fixed'
         }
-    }, [doRefresh])
+    }, [])
+
+    const toggleTab = React.useCallback(() => {
+        if (project != null && tab === tabModule.Tab.dashboard) {
+            switchToIdeTab()
+        } else {
+            switchToDashboardTab()
+        }
+    }, [
+        project,
+        tab,
+        /* should never change */ switchToDashboardTab,
+        /* should never change */ switchToIdeTab,
+    ])
+
+    React.useEffect(() => {
+        if (
+            supportsLocalBackend &&
+            localStorage.getItem(backendProvider.BACKEND_TYPE_KEY) !==
+                backendModule.BackendType.remote
+        ) {
+            setBackend(new localBackend.LocalBackend())
+        }
+    }, [/* should never change */ setBackend, /* should never change */ supportsLocalBackend])
+
+    React.useEffect(() => {
+        document.addEventListener('show-dashboard', switchToDashboardTab)
+        return () => {
+            document.removeEventListener('show-dashboard', switchToDashboardTab)
+        }
+    }, [switchToDashboardTab])
 
     React.useEffect(() => {
         // The types come from a third-party API and cannot be changed.
@@ -401,764 +161,83 @@ function Dashboard(props: DashboardProps) {
     }, [])
 
     React.useEffect(() => {
-        if (backend.type === backendModule.BackendType.local && loadingProjectManagerDidFail) {
-            setIsLoadingAssets(false)
-        }
-    }, [isLoadingAssets, loadingProjectManagerDidFail, backend.type])
-
-    React.useEffect(() => {
-        if (
-            supportsLocalBackend &&
-            localStorage.getItem(backendProvider.BACKEND_TYPE_KEY) !==
-                backendModule.BackendType.remote
-        ) {
-            setBackend(new localBackend.LocalBackend())
-        }
-    }, [setBackend, supportsLocalBackend])
-
-    React.useEffect(() => {
-        document.addEventListener('show-dashboard', switchToDashboardTab)
-        return () => {
-            document.removeEventListener('show-dashboard', switchToDashboardTab)
-        }
-    }, [switchToDashboardTab])
-
-    React.useEffect(() => {
-        if (projectEvent != null) {
-            setProjectEvent(null)
-        }
-    }, [projectEvent])
-
-    const openIde = async (projectId: backendModule.ProjectId) => {
-        switchToIdeTab()
-        if (project?.projectId !== projectId) {
-            setProject(await backend.getProjectDetails(projectId))
-        }
-    }
-
-    const closeIde = () => {
-        setProject(null)
-    }
-
-    const setBackendType = (newBackendType: backendModule.BackendType) => {
-        if (newBackendType !== backend.type) {
-            setIsLoadingAssets(true)
-            setProjectAssets([])
-            setDirectoryAssets([])
-            setSecretAssets([])
-            setFileAssets([])
-            switch (newBackendType) {
-                case backendModule.BackendType.local:
-                    setBackend(new localBackend.LocalBackend())
-                    break
-                case backendModule.BackendType.remote: {
-                    const headers = new Headers()
-                    headers.append('Authorization', `Bearer ${session.accessToken ?? ''}`)
-                    const client = new http.Client(headers)
-                    setBackend(new remoteBackendModule.RemoteBackend(client, logger))
-                    break
-                }
-            }
-        }
-    }
-
-    const setProjectAssets = (
-        newProjectAssets: backendModule.Asset<backendModule.AssetType.project>[]
-    ) => {
-        setProjectAssetsRaw(newProjectAssets)
-        const queryRegex = new RegExp(regexEscape(query), 'i')
-        setVisibleProjectAssets(newProjectAssets.filter(asset => queryRegex.test(asset.title)))
-    }
-    const setDirectoryAssets = (
-        newDirectoryAssets: backendModule.Asset<backendModule.AssetType.directory>[]
-    ) => {
-        setDirectoryAssetsRaw(newDirectoryAssets)
-        const queryRegex = new RegExp(regexEscape(query), 'i')
-        setVisibleDirectoryAssets(newDirectoryAssets.filter(asset => queryRegex.test(asset.title)))
-    }
-    const setSecretAssets = (
-        newSecretAssets: backendModule.Asset<backendModule.AssetType.secret>[]
-    ) => {
-        setSecretAssetsRaw(newSecretAssets)
-        const queryRegex = new RegExp(regexEscape(query), 'i')
-        setVisibleSecretAssets(newSecretAssets.filter(asset => queryRegex.test(asset.title)))
-    }
-    const setFileAssets = (newFileAssets: backendModule.Asset<backendModule.AssetType.file>[]) => {
-        setFileAssetsRaw(newFileAssets)
-        const queryRegex = new RegExp(regexEscape(query), 'i')
-        setVisibleFileAssets(newFileAssets.filter(asset => queryRegex.test(asset.title)))
-    }
-
-    const exitDirectory = () => {
-        setDirectoryId(
-            parentDirectory?.id ??
-                (session.organization != null ? rootDirectoryId(session.organization.id) : null)
-        )
-        setDirectoryStack(
-            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-            directoryStack.slice(0, -1)
-        )
-    }
-
-    const enterDirectory = (
-        directoryAsset: backendModule.Asset<backendModule.AssetType.directory>
-    ) => {
-        setDirectoryId(directoryAsset.id)
-        setDirectoryStack([...directoryStack, directoryAsset])
-    }
-
-    React.useEffect(() => {
-        const cachedDirectoryStackJson = localStorage.getItem(DIRECTORY_STACK_KEY)
-        if (cachedDirectoryStackJson != null) {
-            // The JSON was inserted by the code below, so it will always have the right type.
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const cachedDirectoryStack: backendModule.Asset<backendModule.AssetType.directory>[] =
-                JSON.parse(cachedDirectoryStackJson)
-            setDirectoryStack(cachedDirectoryStack)
-            const cachedDirectoryId = cachedDirectoryStack[cachedDirectoryStack.length - 1]?.id
-            if (cachedDirectoryId) {
-                setDirectoryId(cachedDirectoryId)
-            }
-        }
-    }, [])
-
-    React.useEffect(() => {
-        if (
-            session.organization == null ||
-            directoryId === rootDirectoryId(session.organization.id)
-        ) {
-            localStorage.removeItem(DIRECTORY_STACK_KEY)
-        } else {
-            localStorage.setItem(DIRECTORY_STACK_KEY, JSON.stringify(directoryStack))
-        }
-    }, [directoryId, directoryStack, session.organization])
-
-    /** React components for the name column. */
-    const nameRenderers: {
-        [Type in backendModule.AssetType]: (asset: backendModule.Asset<Type>) => JSX.Element
-    } = {
-        [backendModule.AssetType.project]: projectAsset => (
-            <div
-                className="flex text-left items-center align-middle whitespace-nowrap"
-                onClick={event => {
-                    if (event.detail === 2) {
-                        // It is a double click; open the project.
-                        setProjectEvent({
-                            type: projectActionButton.ProjectEventType.open,
-                            projectId: projectAsset.id,
-                            onSpinnerStateChange: null,
-                        })
-                    } else if (
-                        event.ctrlKey &&
-                        !event.altKey &&
-                        !event.shiftKey &&
-                        !event.metaKey
-                    ) {
-                        setModal(() => (
-                            <RenameModal
-                                assetType={projectAsset.type}
-                                name={projectAsset.title}
-                                {...(backend.type === backendModule.BackendType.local
-                                    ? {
-                                          namePattern: '[A-Z][a-z]*(?:_\\d+|_[A-Z][a-z]*)*',
-                                          title:
-                                              'Names must be in Upper_Snake_Case. ' +
-                                              '(Numbers (_0, _1) are also allowed.)',
-                                      }
-                                    : {})}
-                                doRename={async newName => {
-                                    setProjectAssets(
-                                        arrayWithAssetTitleChanged(
-                                            projectAssets,
-                                            projectAsset,
-                                            newName
-                                        )
-                                    )
-                                    await backend.projectUpdate(projectAsset.id, {
-                                        ami: null,
-                                        ideVersion: null,
-                                        projectName: newName,
-                                    })
-                                }}
-                                onComplete={doRefresh}
-                            />
-                        ))
-                    }
-                }}
-            >
-                <ProjectActionButton
-                    project={projectAsset}
-                    projectData={
-                        projectDatas[projectAsset.id] ?? projectActionButton.DEFAULT_PROJECT_DATA
-                    }
-                    setProjectData={newProjectData => {
-                        if (typeof newProjectData === 'function') {
-                            setProjectDatas(oldProjectDatas => ({
-                                ...oldProjectDatas,
-                                [projectAsset.id]: newProjectData(
-                                    oldProjectDatas[projectAsset.id] ??
-                                        projectActionButton.DEFAULT_PROJECT_DATA
-                                ),
-                            }))
-                        } else {
-                            setProjectDatas({
-                                ...projectDatas,
-                                [projectAsset.id]: newProjectData,
-                            })
-                        }
-                    }}
-                    appRunner={appRunner}
-                    event={projectEvent}
-                    doRefresh={doRefresh}
-                    doOpenManually={() => {
-                        setProjectEvent({
-                            type: projectActionButton.ProjectEventType.open,
-                            projectId: projectAsset.id,
-                            onSpinnerStateChange: null,
-                        })
-                    }}
-                    onClose={() => {
-                        setProjectEvent({
-                            type: projectActionButton.ProjectEventType.cancelOpeningAll,
-                        })
-                        closeIde()
-                    }}
-                    openIde={() => openIde(projectAsset.id)}
-                />
-                <span className="px-2">{projectAsset.title}</span>
-            </div>
-        ),
-        [backendModule.AssetType.directory]: directoryAsset => (
-            <div
-                className="flex text-left items-center align-middle whitespace-nowrap"
-                onClick={event => {
-                    if (event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
-                        setModal(() => (
-                            <RenameModal
-                                assetType={directoryAsset.type}
-                                name={directoryAsset.title}
-                                // TODO: Wait for backend implementation.
-                                doRename={newName => {
-                                    setDirectoryAssets(
-                                        arrayWithAssetTitleChanged(
-                                            directoryAssets,
-                                            directoryAsset,
-                                            newName
-                                        )
-                                    )
-                                    return Promise.reject(
-                                        'The backend endpoint does not exist yet.'
-                                    )
-                                }}
-                                onComplete={doRefresh}
-                            />
-                        ))
-                    }
-                }}
-                onDoubleClick={() => {
-                    enterDirectory(directoryAsset)
-                }}
-            >
-                <img src={DirectoryIcon} /> <span className="px-2">{directoryAsset.title}</span>
-            </div>
-        ),
-        [backendModule.AssetType.secret]: secret => (
-            <div
-                className="flex text-left items-center align-middle whitespace-nowrap"
-                onClick={event => {
-                    if (event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
-                        setModal(() => (
-                            <RenameModal
-                                assetType={secret.type}
-                                name={secret.title}
-                                // FIXME[sb]: Wait for backend implementation.
-                                doRename={newName => {
-                                    setSecretAssets(
-                                        arrayWithAssetTitleChanged(secretAssets, secret, newName)
-                                    )
-                                    return Promise.reject(
-                                        'The backend endpoint does not exist yet.'
-                                    )
-                                }}
-                                onComplete={doRefresh}
-                            />
-                        ))
-                    }
-                }}
-            >
-                <img src={SecretIcon} /> <span className="px-2">{secret.title}</span>
-            </div>
-        ),
-        [backendModule.AssetType.file]: file => (
-            <div
-                className="flex text-left items-center align-middle whitespace-nowrap"
-                onClick={event => {
-                    if (event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
-                        setModal(() => (
-                            <RenameModal
-                                assetType={file.type}
-                                name={file.title}
-                                // TODO: Wait for backend implementation.
-                                doRename={newName => {
-                                    setFileAssets(
-                                        arrayWithAssetTitleChanged(fileAssets, file, newName)
-                                    )
-                                    return Promise.reject(
-                                        'The backend endpoint does not exist yet.'
-                                    )
-                                }}
-                                onComplete={doRefresh}
-                            />
-                        ))
-                    }
-                }}
-            >
-                <img src={fileInfo.fileIcon()} /> <span className="px-2">{file.title}</span>
-            </div>
-        ),
-    }
-
-    /** 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
-    const columnRenderer: Record<
-        Exclude<Column, Column.name>,
-        (asset: backendModule.Asset) => React.ReactNode
-    > = {
-        [Column.lastModified]: asset =>
-            asset.modifiedAt && <>{dateTime.formatDateTime(new Date(asset.modifiedAt))}</>,
-        [Column.sharedWith]: asset => {
-            const selfPermission = asset.permissions?.find(
-                permission => permission.user.user_email === session.organization?.email
-            )?.permission
-            const ownsThisAsset = selfPermission === backendModule.PermissionAction.own
-            return (
-                <div className="flex">
-                    {backendModule
-                        .groupPermissionsByUser(asset.permissions ?? [])
-                        .map((user, index) => (
-                            <PermissionDisplay
-                                key={user.user.pk}
-                                permissions={permissionDisplay.permissionActionsToPermissions(
-                                    user.permissions
-                                )}
-                                className={`border-2 rounded-full ${
-                                    ownsThisAsset
-                                        ? 'cursor-pointer hover:shadow-soft hover:z-10'
-                                        : ''
-                                } ${index === 0 ? '' : '-ml-5'}`}
-                                onClick={event => {
-                                    event.stopPropagation()
-                                    if (ownsThisAsset) {
-                                        setModal(() => (
-                                            <ManagePermissionsModal
-                                                key={Number(new Date())}
-                                                user={user.user}
-                                                asset={asset}
-                                                eventTarget={event.currentTarget}
-                                                onSuccess={doRefresh}
-                                            />
-                                        ))
-                                    }
-                                }}
-                                onMouseEnter={() => {
-                                    setHoveredUserPermission({
-                                        userId: user.user.pk,
-                                        assetId: asset.id,
-                                    })
-                                }}
-                                onMouseLeave={() => {
-                                    setHoveredUserPermission(null)
-                                }}
-                            >
-                                {hoveredUserPermission?.assetId === asset.id &&
-                                    hoveredUserPermission.userId === user.user.pk && (
-                                        <div className="relative">
-                                            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full shadow-soft bg-white px-2 py-1">
-                                                {user.user.user_email}
-                                            </div>
-                                        </div>
-                                    )}
-                                <img src={DefaultUserIcon} height={24} width={24} />
-                            </PermissionDisplay>
-                        ))}
-                    {ownsThisAsset && (
-                        <button
-                            onClick={event => {
-                                event.stopPropagation()
-                                setModal(() => (
-                                    <ManagePermissionsModal
-                                        key={Number(new Date())}
-                                        asset={asset}
-                                        eventTarget={event.currentTarget}
-                                        onSuccess={doRefresh}
-                                    />
-                                ))
-                            }}
-                        >
-                            <img src={PlusIcon} />
-                        </button>
-                    )}
-                </div>
-            )
-        },
-        [Column.docs]: () => <></>,
-        [Column.labels]: () => {
-            // This is not a React component even though it contains JSX.
-            // eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-unused-vars
-            const onContextMenu = (event: React.MouseEvent) => {
-                event.preventDefault()
-                event.stopPropagation()
-                setModal(() => (
-                    // This is a placeholder key. It should be replaced with label ID when labels
-                    // are implemented.
-                    <ContextMenu key={'label'} event={event}>
-                        <ContextMenuEntry
-                            disabled
-                            onClick={() => {
-                                // TODO: Wait for backend implementation.
-                            }}
-                        >
-                            Rename label
-                        </ContextMenuEntry>
-                    </ContextMenu>
-                ))
-            }
-            return <></>
-        },
-        [Column.dataAccess]: () => <></>,
-        [Column.usagePlan]: () => <></>,
-        [Column.engine]: () => <></>,
-        [Column.ide]: () => <></>,
-    }
-
-    const renderer = <Type extends backendModule.AssetType>(column: Column, assetType: Type) => {
-        return column === Column.name
-            ? // This is type-safe only if we pass enum literals as `assetType`.
-              // eslint-disable-next-line no-restricted-syntax
-              (nameRenderers[assetType] as (asset: backendModule.Asset<Type>) => JSX.Element)
-            : columnRenderer[column]
-    }
-
-    const uploadFilesFromInput = async (event: React.FormEvent<HTMLInputElement>) => {
-        if (backend.type === backendModule.BackendType.local) {
-            // TODO[sb]: Allow uploading `.enso-project`s
-            // https://github.com/enso-org/cloud-v2/issues/510
-            toast.error('Cannot upload files to the local backend.')
-        } else if (event.currentTarget.files == null || event.currentTarget.files.length === 0) {
-            toast.success('No files selected to upload.')
-        } else if (directoryId == null) {
-            // This should never happen, however display a nice
-            // error message in case it somehow does.
-            toast.error('You cannot upload files while offline.')
-        } else {
-            await uploadMultipleFiles.uploadMultipleFiles(
-                backend,
-                directoryId,
-                Array.from(event.currentTarget.files)
-            )
-            doRefresh()
-        }
-    }
-
-    /** Heading element for every column. */
-    const ColumnHeading = (column: Column, assetType: backendModule.AssetType) =>
-        column === Column.name ? (
-            assetType === backendModule.AssetType.file ? (
-                <div className="inline-flex">
-                    {ASSET_TYPE_NAME[assetType]}
-                    <input
-                        type="file"
-                        id="files_table_upload_files_input"
-                        name="files_table_upload_files_input"
-                        multiple
-                        className="w-0 h-0"
-                        onInput={uploadFilesFromInput}
-                    />
-                    <label htmlFor="files_table_upload_files_input" className="cursor-pointer mx-1">
-                        <img src={PlusIcon} />
-                    </label>
-                </div>
-            ) : (
-                <div className="inline-flex">
-                    {ASSET_TYPE_NAME[assetType]}
-                    <button
-                        className="mx-1"
-                        onClick={event => {
-                            event.stopPropagation()
-                            const buttonPosition =
-                                // This type assertion is safe as this event handler is on a button.
-                                // eslint-disable-next-line no-restricted-syntax
-                                (event.target as HTMLButtonElement).getBoundingClientRect()
-                            if (assetType === backendModule.AssetType.project) {
-                                void toast.promise(handleCreateProject(null), {
-                                    loading: 'Creating new empty project...',
-                                    success: 'Created new empty project.',
-                                    // This is UNSAFE, as the original function's parameter is of type
-                                    // `any`.
-                                    error: (promiseError: Error) =>
-                                        `Error creating new empty project: ${promiseError.message}`,
-                                })
-                            } else if (assetType === backendModule.AssetType.directory) {
-                                void toast.promise(handleCreateDirectory(), {
-                                    loading: 'Creating new directory...',
-                                    success: 'Created new directory.',
-                                    // This is UNSAFE, as the original function's parameter is of type
-                                    // `any`.
-                                    error: (promiseError: Error) =>
-                                        `Error creating new directory: ${promiseError.message}`,
-                                })
-                            } else {
-                                // This is a React component even though it doesn't contain JSX.
-                                // eslint-disable-next-line no-restricted-syntax
-                                const CreateForm = ASSET_TYPE_CREATE_FORM[assetType]
-                                setModal(() => (
-                                    <CreateForm
-                                        left={buttonPosition.left + window.scrollX}
-                                        top={buttonPosition.top + window.scrollY}
-                                        getNewProjectName={getNewProjectName}
-                                        // This is safe; headings are not rendered when there is no
-                                        // internet connection.
-                                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                        directoryId={directoryId!}
-                                        onSuccess={doRefresh}
-                                    />
-                                ))
-                            }
-                        }}
-                    >
-                        <img src={PlusIcon} />
-                    </button>
-                </div>
-            )
-        ) : (
-            <>{COLUMN_NAME[column]}</>
-        )
-
-    React.useEffect(() => {
-        const queryRegex = new RegExp(regexEscape(query), 'i')
-        const doesItMatchQuery = (asset: backendModule.Asset) => queryRegex.test(asset.title)
-        setVisibleProjectAssets(projectAssets.filter(doesItMatchQuery))
-        setVisibleDirectoryAssets(directoryAssets.filter(doesItMatchQuery))
-        setVisibleSecretAssets(secretAssets.filter(doesItMatchQuery))
-        setVisibleFileAssets(fileAssets.filter(doesItMatchQuery))
-    }, [directoryAssets, fileAssets, projectAssets, query, secretAssets])
-
-    React.useLayoutEffect(() => {
-        if (isLoadingAssets) {
-            document.body.style.overflowY = isScrollBarVisible ? 'scroll' : ''
-        } else {
-            document.body.style.overflowY = ''
-            setIsScrollBarVisible(document.body.scrollHeight > document.body.clientHeight)
-        }
-    }, [
-        isLoadingAssets,
-        projectAssets,
-        directoryAssets,
-        secretAssets,
-        fileAssets,
-        isScrollBarVisible,
-    ])
-
-    const setAssets = (assets: backendModule.Asset[]) => {
-        const newProjectAssets = assets.filter(
-            backendModule.assetIsType(backendModule.AssetType.project)
-        )
-        const newDirectoryAssets = assets.filter(
-            backendModule.assetIsType(backendModule.AssetType.directory)
-        )
-        const newSecretAssets = assets.filter(
-            backendModule.assetIsType(backendModule.AssetType.secret)
-        )
-        const newFileAssets = assets.filter(backendModule.assetIsType(backendModule.AssetType.file))
-        setProjectAssets(newProjectAssets)
-        setDirectoryAssets(newDirectoryAssets)
-        setSecretAssets(newSecretAssets)
-        setFileAssets(newFileAssets)
-        if (nameOfProjectToImmediatelyOpen != null) {
-            const projectToLoad = newProjectAssets.find(
-                projectAsset => projectAsset.title === nameOfProjectToImmediatelyOpen
-            )
-            if (projectToLoad != null) {
-                setProjectEvent({
-                    type: projectActionButton.ProjectEventType.open,
-                    projectId: projectToLoad.id,
-                    onSpinnerStateChange,
-                })
-            }
-            setNameOfProjectToImmediatelyOpen(null)
-            setOnSpinnerStateChange(null)
-        }
-        onDirectoryNextLoaded?.(assets)
-        setOnDirectoryNextLoaded(null)
-    }
-
-    hooks.useAsyncEffect(
-        null,
-        async signal => {
-            switch (backend.type) {
-                case backendModule.BackendType.local: {
-                    if (!isListingLocalDirectoryAndWillFail) {
-                        const assets = await backend.listDirectory()
-                        if (!signal.aborted) {
-                            setIsLoadingAssets(false)
-                            setAssets(assets)
-                        }
-                    }
-                    return
-                }
-                case backendModule.BackendType.remote: {
-                    if (
-                        !isListingRemoteDirectoryAndWillFail &&
-                        !isListingRemoteDirectoryWhileOffline &&
-                        directoryId != null
-                    ) {
-                        const assets = await backend.listDirectory({ parentId: directoryId })
-                        if (!signal.aborted) {
-                            setIsLoadingAssets(false)
-                            setAssets(assets)
-                        }
-                    } else {
-                        setIsLoadingAssets(false)
-                    }
-                    return
-                }
-            }
-        },
-        [session.accessToken, directoryId, refresh, backend]
-    )
-
-    React.useEffect(() => {
-        const onBlur = () => {
-            setIsFileBeingDragged(false)
-        }
-        window.addEventListener('blur', onBlur)
-        return () => {
-            window.removeEventListener('blur', onBlur)
-        }
-    }, [])
-
-    const handleEscapeKey = (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (
-            event.key === 'Escape' &&
-            !event.ctrlKey &&
-            !event.shiftKey &&
-            !event.altKey &&
-            !event.metaKey
-        ) {
-            if (modal) {
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (
+                shortcuts.SHORTCUT_REGISTRY.matchesKeyboardAction(
+                    shortcuts.KeyboardAction.closeModal,
+                    event
+                )
+            ) {
                 event.preventDefault()
                 unsetModal()
             }
         }
-    }
-
-    const openDropZone = (event: React.DragEvent<HTMLDivElement>) => {
-        if (event.dataTransfer.types.includes('Files')) {
-            setIsFileBeingDragged(true)
+        document.addEventListener('keydown', onKeyDown)
+        return () => {
+            document.removeEventListener('keydown', onKeyDown)
         }
-    }
+    }, [unsetModal])
 
-    const getNewProjectName = (templateName?: string | null): string => {
-        const prefix = `${templateName ?? 'New_Project'}_`
-        const projectNameTemplate = new RegExp(`^${prefix}(?<projectIndex>\\d+)$`)
-        let highestProjectIndex = 0
-        for (const projectAsset of projectAssets) {
-            const projectIndex = projectNameTemplate.exec(projectAsset.title)?.groups?.projectIndex
-            if (projectIndex != null) {
-                highestProjectIndex = Math.max(highestProjectIndex, parseInt(projectIndex, 10))
+    const setBackendType = React.useCallback(
+        (newBackendType: backendModule.BackendType) => {
+            if (newBackendType !== backend.type) {
+                switch (newBackendType) {
+                    case backendModule.BackendType.local:
+                        setBackend(new localBackend.LocalBackend())
+                        break
+                    case backendModule.BackendType.remote: {
+                        const headers = new Headers()
+                        headers.append('Authorization', `Bearer ${session.accessToken ?? ''}`)
+                        const client = new http.Client(headers)
+                        setBackend(new remoteBackendModule.RemoteBackend(client, logger))
+                        break
+                    }
+                }
             }
-        }
-        return `${prefix}${highestProjectIndex + 1}`
-    }
+        },
+        [backend.type, logger, session.accessToken, setBackend]
+    )
 
-    const handleCreateProject = async (
-        templateId?: string | null,
-        newOnSpinnerStateChange?: (state: spinner.SpinnerState) => void
-    ) => {
-        const projectName = getNewProjectName(templateId)
-        const body: backendModule.CreateProjectRequestBody = {
-            projectName,
-            projectTemplateName: templateId ?? null,
-            parentDirectoryId: directoryId,
-        }
-        const templateText = templateId != null ? ` from template '${templateId}'` : ''
-        setProjectAssets([
-            {
-                type: backendModule.AssetType.project,
-                title: projectName,
-                // The ID must be unique in order to be updated correctly in the UI.
-                id: newtype.asNewtype<backendModule.ProjectId>(String(Number(new Date()))),
-                modifiedAt: dateTime.toRfc3339(new Date()),
-                // Falling back to the empty string is okay as this is what the local backend does.
-                parentId: directoryId ?? newtype.asNewtype<backendModule.AssetId>(''),
-                permissions: [],
-                projectState: { type: backendModule.ProjectState.new },
-            },
-            ...projectAssets,
-        ])
-        await toast.promise(backend.createProject(body), {
-            loading: `Creating project '${projectName}'${templateText}...`,
-            success: `Created project '${projectName}'${templateText}.`,
-            // This is UNSAFE, as the original function's parameter is of type `any`.
-            error: (promiseError: Error) =>
-                `Error creating '${projectName}'${templateText}: ${promiseError.message}`,
-        })
-        // `newProject.projectId` cannot be used directly in a `ProjectEvent` as the project
-        // does not yet exist in the project list. Opening the project would work, but the project
-        // would display as closed as it would be created after the event is sent.
-        setNameOfProjectToImmediatelyOpen(projectName)
-        setOnSpinnerStateChange(() => newOnSpinnerStateChange ?? null)
-        doRefresh()
-    }
-
-    const handleCreateDirectory = async () => {
-        if (backend.type !== backendModule.BackendType.remote) {
-            // This should never happen, but even if it does, it is the caller's responsibility
-            // to log, or display this error.
-            throw new Error('Folders cannot be created on the local backend.')
-        } else {
-            const directoryIndices = directoryAssets
-                .map(directoryAsset => DIRECTORY_NAME_REGEX.exec(directoryAsset.title))
-                .map(match => match?.groups?.directoryIndex)
-                .map(maybeIndex => (maybeIndex != null ? parseInt(maybeIndex, 10) : 0))
-            const title = `${DIRECTORY_NAME_DEFAULT_PREFIX}${Math.max(0, ...directoryIndices) + 1}`
-            setDirectoryAssets([
-                {
-                    title,
-                    type: backendModule.AssetType.directory,
-                    id: newtype.asNewtype<backendModule.DirectoryId>(Number(new Date()).toString()),
-                    modifiedAt: dateTime.toRfc3339(new Date()),
-                    parentId: directoryId ?? newtype.asNewtype<backendModule.DirectoryId>(''),
-                    permissions: [],
-                    projectState: null,
-                },
-                ...directoryAssets,
-            ])
-            await backend.createDirectory({
-                parentId: directoryId,
-                title,
+    const doCreateProject = React.useCallback(
+        (
+            templateId: string | null,
+            onSpinnerStateChange: ((state: spinner.SpinnerState) => void) | null
+        ) => {
+            dispatchProjectListEvent({
+                type: projectListEventModule.ProjectListEventType.create,
+                templateId: templateId ?? null,
+                onSpinnerStateChange: onSpinnerStateChange,
             })
-            doRefresh()
-            return
+        },
+        [/* should never change */ dispatchProjectListEvent]
+    )
+
+    const openIde = React.useCallback(
+        async (newProject: backendModule.ProjectAsset) => {
+            switchToIdeTab()
+            if (project?.projectId !== newProject.id) {
+                setProject(await backend.getProjectDetails(newProject.id, newProject.title))
+            }
+        },
+        [backend, project?.projectId, switchToIdeTab]
+    )
+
+    const closeIde = React.useCallback(() => {
+        setProject(null)
+    }, [])
+
+    const closeModalIfExists = React.useCallback(() => {
+        if (getSelection()?.type !== 'Range') {
+            unsetModal()
         }
-    }
+    }, [/* should never change */ unsetModal])
 
     return (
         <div
             className={`flex flex-col gap-2 relative select-none text-primary text-xs h-screen py-2 ${
-                tab === Tab.dashboard ? '' : 'hidden'
+                tab === tabModule.Tab.dashboard ? '' : 'hidden'
             }`}
-            onClick={event => {
-                if (getSelection()?.type !== 'Range') {
-                    unsetModal()
-                    if (!event.shiftKey) {
-                        setSelectedAssets([])
-                    }
-                }
-            }}
-            onKeyDown={handleEscapeKey}
-            onDragEnter={openDropZone}
+            onClick={closeModalIfExists}
         >
             <TopBar
                 supportsLocalBackend={supportsLocalBackend}
@@ -1166,13 +245,7 @@ function Dashboard(props: DashboardProps) {
                 tab={tab}
                 isHelpChatOpen={isHelpChatOpen}
                 setIsHelpChatOpen={setIsHelpChatOpen}
-                toggleTab={() => {
-                    if (project && tab === Tab.dashboard) {
-                        switchToIdeTab()
-                    } else {
-                        switchToDashboardTab()
-                    }
-                }}
+                toggleTab={toggleTab}
                 setBackendType={setBackendType}
                 query={query}
                 setQuery={setQuery}
@@ -1200,528 +273,28 @@ function Dashboard(props: DashboardProps) {
                 </div>
             ) : (
                 <>
-                    <Templates onTemplateClick={handleCreateProject} />
-                    <div className="flex flex-row flex-nowrap mx-2">
-                        <h1 className="text-xl font-bold mx-4 self-center">Drive</h1>
-                        <div className="flex flex-row flex-nowrap mx-4">
-                            {backend.type === backendModule.BackendType.remote && (
-                                <>
-                                    <div className="bg-gray-100 rounded-l-full flex flex-row flex-nowrap items-center p-1 mx-0.5">
-                                        {directory && (
-                                            <>
-                                                <button className="mx-2" onClick={exitDirectory}>
-                                                    {parentDirectory?.title ?? '/'}
-                                                </button>
-                                                <img src={ArrowRightSmallIcon} />
-                                            </>
-                                        )}
-                                        <span className="mx-2">{directory?.title ?? '/'}</span>
-                                    </div>
-                                    <div className="bg-gray-100 rounded-r-full flex flex-row flex-nowrap items-center mx-0.5">
-                                        <div className="m-2">Shared with</div>
-                                        <div></div>
-                                    </div>
-                                </>
-                            )}
-                            <div className="bg-gray-100 rounded-full flex flex-row flex-nowrap px-1.5 py-1 mx-4">
-                                <input
-                                    type="file"
-                                    multiple
-                                    disabled={backend.type === backendModule.BackendType.local}
-                                    id="upload_files_input"
-                                    name="upload_files_input"
-                                    className="w-0 h-0"
-                                    onInput={uploadFilesFromInput}
-                                />
-                                <label
-                                    htmlFor="upload_files_input"
-                                    className={`mx-1 ${
-                                        backend.type === backendModule.BackendType.local
-                                            ? 'opacity-50'
-                                            : 'cursor-pointer'
-                                    }`}
-                                >
-                                    <img src={UploadIcon} />
-                                </label>
-                                <button
-                                    className={`mx-1 opacity-50`}
-                                    disabled={true}
-                                    onClick={event => {
-                                        event.stopPropagation()
-                                        unsetModal()
-                                        /* TODO */
-                                    }}
-                                >
-                                    <img src={DownloadIcon} />
-                                </button>
-                            </div>
-                            {EXPERIMENTAL.columnModeSwitcher && (
-                                <>
-                                    <div className="bg-gray-100 rounded-full flex flex-row flex-nowrap p-1.5 mx-4">
-                                        <button
-                                            className={`${
-                                                columnDisplayMode === ColumnDisplayMode.all
-                                                    ? 'bg-white shadow-soft'
-                                                    : 'opacity-50'
-                                            } rounded-full px-1.5`}
-                                            onClick={() => {
-                                                setColumnDisplayMode(ColumnDisplayMode.all)
-                                            }}
-                                        >
-                                            All
-                                        </button>
-                                        <button
-                                            className={`${
-                                                columnDisplayMode === ColumnDisplayMode.compact
-                                                    ? 'bg-white shadow-soft'
-                                                    : 'opacity-50'
-                                            } rounded-full px-1.5`}
-                                            onClick={() => {
-                                                setColumnDisplayMode(ColumnDisplayMode.compact)
-                                            }}
-                                        >
-                                            Compact
-                                        </button>
-                                        <button
-                                            className={`${
-                                                columnDisplayMode === ColumnDisplayMode.docs
-                                                    ? 'bg-white shadow-soft'
-                                                    : 'opacity-50'
-                                            } rounded-full px-1.5`}
-                                            onClick={() => {
-                                                setColumnDisplayMode(ColumnDisplayMode.docs)
-                                            }}
-                                        >
-                                            Docs
-                                        </button>
-                                        <button
-                                            className={`${
-                                                columnDisplayMode === ColumnDisplayMode.settings
-                                                    ? 'bg-white shadow-soft'
-                                                    : 'opacity-50'
-                                            } rounded-full px-1.5`}
-                                            onClick={() => {
-                                                setColumnDisplayMode(ColumnDisplayMode.settings)
-                                            }}
-                                        >
-                                            Settings
-                                        </button>
-                                    </div>
-                                </>
-                            )}
-                        </div>
-                    </div>
-                    {/* Padding. */}
-                    <div className="h-6 mx-2" />
-                    <div className="flex-1 overflow-auto mx-2">
-                        <table className="items-center self-start border-collapse mt-2 whitespace-nowrap">
-                            <tbody>
-                                <tr className="h-10">
-                                    {columnsFor(columnDisplayMode, backend.type).map(column => (
-                                        <td
-                                            key={column}
-                                            className={`block ${COLUMN_CSS_CLASS[column]}`}
-                                        />
-                                    ))}
-                                </tr>
-                                <Rows<backendModule.Asset<backendModule.AssetType.project>>
-                                    items={visibleProjectAssets}
-                                    getKey={projectAsset => projectAsset.id}
-                                    isLoading={isLoadingAssets}
-                                    placeholder={
-                                        <span className="opacity-75">
-                                            You have no projects yet. Go ahead and create one using
-                                            the form above.
-                                        </span>
-                                    }
-                                    columns={columnsFor(columnDisplayMode, backend.type).map(
-                                        column => ({
-                                            id: column,
-                                            heading: ColumnHeading(
-                                                column,
-                                                backendModule.AssetType.project
-                                            ),
-                                            render: renderer(
-                                                column,
-                                                backendModule.AssetType.project
-                                            ),
-                                        })
-                                    )}
-                                    onClick={(projectAsset, event) => {
-                                        event.stopPropagation()
-                                        unsetModal()
-                                        setSelectedAssets(
-                                            event.shiftKey
-                                                ? [...selectedAssets, projectAsset]
-                                                : [projectAsset]
-                                        )
-                                    }}
-                                    onContextMenu={(projectAsset, event) => {
-                                        event.preventDefault()
-                                        event.stopPropagation()
-                                        const doOpenForEditing = () => {
-                                            unsetModal()
-                                            setProjectEvent({
-                                                type: projectActionButton.ProjectEventType.open,
-                                                projectId: projectAsset.id,
-                                                onSpinnerStateChange: null,
-                                            })
-                                        }
-                                        const doOpenAsFolder = () => {
-                                            // TODO[sb]: Implement once backend support is in place.
-                                            // https://github.com/enso-org/cloud-v2/issues/506
-                                            // The following code does not typecheck
-                                            // since `ProjectId`s are not `DirectoryId`s.
-                                            // enterDirectory(projectAsset)
-                                        }
-                                        // This is not a React component even though it contains JSX.
-                                        // eslint-disable-next-line no-restricted-syntax
-                                        const doRename = () => {
-                                            setModal(() => (
-                                                <RenameModal
-                                                    name={projectAsset.title}
-                                                    assetType={projectAsset.type}
-                                                    {...(backend.type ===
-                                                    backendModule.BackendType.local
-                                                        ? {
-                                                              namePattern:
-                                                                  '[A-Z][a-z]*(?:_\\d+|_[A-Z][a-z]*)*',
-                                                              title:
-                                                                  'Names must be in Upper_Snake_Case. ' +
-                                                                  '(Numbers (_0, _1) are also allowed.)',
-                                                          }
-                                                        : {})}
-                                                    doRename={async newName => {
-                                                        setProjectAssets(
-                                                            arrayWithAssetTitleChanged(
-                                                                projectAssets,
-                                                                projectAsset,
-                                                                newName
-                                                            )
-                                                        )
-                                                        await backend.projectUpdate(
-                                                            projectAsset.id,
-                                                            {
-                                                                ami: null,
-                                                                ideVersion: null,
-                                                                projectName: newName,
-                                                            }
-                                                        )
-                                                    }}
-                                                    onComplete={doRefresh}
-                                                />
-                                            ))
-                                        }
-                                        // This is not a React component even though it contains JSX.
-                                        // eslint-disable-next-line no-restricted-syntax
-                                        const doDelete = () => {
-                                            setModal(() => (
-                                                <ConfirmDeleteModal
-                                                    name={projectAsset.title}
-                                                    assetType={projectAsset.type}
-                                                    doDelete={() => {
-                                                        setProjectAssets(
-                                                            arrayWithAssetOmitted(
-                                                                projectAssets,
-                                                                projectAsset
-                                                            )
-                                                        )
-                                                        return backend.deleteProject(
-                                                            projectAsset.id
-                                                        )
-                                                    }}
-                                                    onComplete={doRefresh}
-                                                />
-                                            ))
-                                        }
-                                        const isDeleteDisabled =
-                                            backend.type === backendModule.BackendType.local &&
-                                            (projectDatas[projectAsset.id]?.isRunning ?? false)
-                                        setModal(() => (
-                                            <ContextMenu key={projectAsset.id} event={event}>
-                                                <ContextMenuEntry onClick={doOpenForEditing}>
-                                                    Open for editing
-                                                </ContextMenuEntry>
-                                                {backend.type !==
-                                                    backendModule.BackendType.local && (
-                                                    <ContextMenuEntry
-                                                        disabled
-                                                        onClick={doOpenAsFolder}
-                                                    >
-                                                        Open as folder
-                                                    </ContextMenuEntry>
-                                                )}
-                                                <ContextMenuEntry onClick={doRename}>
-                                                    Rename
-                                                </ContextMenuEntry>
-                                                <ContextMenuEntry
-                                                    disabled={isDeleteDisabled}
-                                                    {...(isDeleteDisabled
-                                                        ? {
-                                                              title: 'A running local project cannot be removed.',
-                                                          }
-                                                        : {})}
-                                                    onClick={doDelete}
-                                                >
-                                                    <span className="text-red-700">Delete</span>
-                                                </ContextMenuEntry>
-                                            </ContextMenu>
-                                        ))
-                                    }}
-                                />
-                                {backend.type === backendModule.BackendType.remote &&
-                                    (remoteBackend => (
-                                        <>
-                                            <tr className="h-10" />
-                                            <Rows<
-                                                backendModule.Asset<backendModule.AssetType.directory>
-                                            >
-                                                items={visibleDirectoryAssets}
-                                                getKey={directoryAsset => directoryAsset.id}
-                                                isLoading={isLoadingAssets}
-                                                placeholder={
-                                                    <span className="opacity-75">
-                                                        This directory does not contain any
-                                                        subdirectories
-                                                        {query ? ' matching your query' : ''}.
-                                                    </span>
-                                                }
-                                                columns={columnsFor(
-                                                    columnDisplayMode,
-                                                    backend.type
-                                                ).map(column => ({
-                                                    id: column,
-                                                    heading: ColumnHeading(
-                                                        column,
-                                                        backendModule.AssetType.directory
-                                                    ),
-                                                    render: renderer(
-                                                        column,
-                                                        backendModule.AssetType.directory
-                                                    ),
-                                                }))}
-                                                onClick={(directoryAsset, event) => {
-                                                    event.stopPropagation()
-                                                    unsetModal()
-                                                    setSelectedAssets(
-                                                        event.shiftKey
-                                                            ? [...selectedAssets, directoryAsset]
-                                                            : [directoryAsset]
-                                                    )
-                                                }}
-                                                onContextMenu={(directoryAsset, event) => {
-                                                    event.preventDefault()
-                                                    event.stopPropagation()
-                                                    setModal(() => (
-                                                        <ContextMenu
-                                                            key={directoryAsset.id}
-                                                            event={event}
-                                                        ></ContextMenu>
-                                                    ))
-                                                }}
-                                            />
-                                            <tr className="h-10" />
-                                            <Rows<
-                                                backendModule.Asset<backendModule.AssetType.secret>
-                                            >
-                                                items={visibleSecretAssets}
-                                                getKey={secret => secret.id}
-                                                isLoading={isLoadingAssets}
-                                                placeholder={
-                                                    <span className="opacity-75">
-                                                        This directory does not contain any secrets
-                                                        {query ? ' matching your query' : ''}.
-                                                    </span>
-                                                }
-                                                columns={columnsFor(
-                                                    columnDisplayMode,
-                                                    backend.type
-                                                ).map(column => ({
-                                                    id: column,
-                                                    heading: ColumnHeading(
-                                                        column,
-                                                        backendModule.AssetType.secret
-                                                    ),
-                                                    render: renderer(
-                                                        column,
-                                                        backendModule.AssetType.secret
-                                                    ),
-                                                }))}
-                                                onClick={(secret, event) => {
-                                                    event.stopPropagation()
-                                                    unsetModal()
-                                                    setSelectedAssets(
-                                                        event.shiftKey
-                                                            ? [...selectedAssets, secret]
-                                                            : [secret]
-                                                    )
-                                                }}
-                                                onContextMenu={(secret, event) => {
-                                                    event.preventDefault()
-                                                    event.stopPropagation()
-                                                    // This is not a React component even though it contains JSX.
-                                                    // eslint-disable-next-line no-restricted-syntax
-                                                    const doDelete = () => {
-                                                        setModal(() => (
-                                                            <ConfirmDeleteModal
-                                                                name={secret.title}
-                                                                assetType={secret.type}
-                                                                doDelete={() => {
-                                                                    setSecretAssets(
-                                                                        arrayWithAssetOmitted(
-                                                                            secretAssets,
-                                                                            secret
-                                                                        )
-                                                                    )
-                                                                    return remoteBackend.deleteSecret(
-                                                                        secret.id
-                                                                    )
-                                                                }}
-                                                                onComplete={doRefresh}
-                                                            />
-                                                        ))
-                                                    }
-                                                    setModal(() => (
-                                                        <ContextMenu key={secret.id} event={event}>
-                                                            <ContextMenuEntry onClick={doDelete}>
-                                                                <span className="text-red-700">
-                                                                    Delete
-                                                                </span>
-                                                            </ContextMenuEntry>
-                                                        </ContextMenu>
-                                                    ))
-                                                }}
-                                            />
-                                            <tr className="h-10" />
-                                            <Rows<backendModule.Asset<backendModule.AssetType.file>>
-                                                items={visibleFileAssets}
-                                                getKey={file => file.id}
-                                                isLoading={isLoadingAssets}
-                                                placeholder={
-                                                    <span className="opacity-75">
-                                                        This directory does not contain any files
-                                                        {query ? ' matching your query' : ''}.
-                                                    </span>
-                                                }
-                                                columns={columnsFor(
-                                                    columnDisplayMode,
-                                                    backend.type
-                                                ).map(column => ({
-                                                    id: column,
-                                                    heading: ColumnHeading(
-                                                        column,
-                                                        backendModule.AssetType.file
-                                                    ),
-                                                    render: renderer(
-                                                        column,
-                                                        backendModule.AssetType.file
-                                                    ),
-                                                }))}
-                                                onClick={(file, event) => {
-                                                    event.stopPropagation()
-                                                    unsetModal()
-                                                    setSelectedAssets(
-                                                        event.shiftKey
-                                                            ? [...selectedAssets, file]
-                                                            : [file]
-                                                    )
-                                                }}
-                                                onContextMenu={(file, event) => {
-                                                    event.preventDefault()
-                                                    event.stopPropagation()
-                                                    const doCopy = () => {
-                                                        // TODO: Wait for backend endpoint.
-                                                    }
-                                                    const doCut = () => {
-                                                        // TODO: Wait for backend endpoint.
-                                                    }
-                                                    // This is not a React component even though it contains JSX.
-                                                    // eslint-disable-next-line no-restricted-syntax
-                                                    const doDelete = () => {
-                                                        setModal(() => (
-                                                            <ConfirmDeleteModal
-                                                                name={file.title}
-                                                                assetType={file.type}
-                                                                doDelete={() => {
-                                                                    setFileAssets(
-                                                                        arrayWithAssetOmitted(
-                                                                            fileAssets,
-                                                                            file
-                                                                        )
-                                                                    )
-                                                                    return remoteBackend.deleteFile(
-                                                                        file.id
-                                                                    )
-                                                                }}
-                                                                onComplete={doRefresh}
-                                                            />
-                                                        ))
-                                                    }
-                                                    const doDownload = () => {
-                                                        /** TODO: Wait for backend endpoint. */
-                                                    }
-                                                    setModal(() => (
-                                                        <ContextMenu key={file.id} event={event}>
-                                                            <ContextMenuEntry
-                                                                disabled
-                                                                onClick={doCopy}
-                                                            >
-                                                                Copy
-                                                            </ContextMenuEntry>
-                                                            <ContextMenuEntry
-                                                                disabled
-                                                                onClick={doCut}
-                                                            >
-                                                                Cut
-                                                            </ContextMenuEntry>
-                                                            <ContextMenuEntry onClick={doDelete}>
-                                                                <span className="text-red-700">
-                                                                    Delete
-                                                                </span>
-                                                            </ContextMenuEntry>
-                                                            <ContextMenuEntry
-                                                                disabled
-                                                                onClick={doDownload}
-                                                            >
-                                                                Download
-                                                            </ContextMenuEntry>
-                                                        </ContextMenu>
-                                                    ))
-                                                }}
-                                            />
-                                        </>
-                                    ))(backend)}
-                            </tbody>
-                        </table>
-                    </div>
-                    {isFileBeingDragged &&
-                    directoryId != null &&
-                    backend.type === backendModule.BackendType.remote ? (
-                        <div
-                            className="text-white text-lg fixed w-screen h-screen inset-0 bg-primary grid place-items-center"
-                            onDragLeave={() => {
-                                setIsFileBeingDragged(false)
-                            }}
-                            onDragOver={event => {
-                                event.preventDefault()
-                            }}
-                            onDrop={async event => {
-                                event.preventDefault()
-                                setIsFileBeingDragged(false)
-                                await uploadMultipleFiles.uploadMultipleFiles(
-                                    backend,
-                                    directoryId,
-                                    Array.from(event.dataTransfer.files)
-                                )
-                                doRefresh()
-                            }}
-                        >
-                            Drop to upload files.
-                        </div>
-                    ) : null}
+                    <Templates onTemplateClick={doCreateProject} />
+                    <DirectoryView
+                        tab={tab}
+                        initialProjectName={initialProjectName}
+                        nameOfProjectToImmediatelyOpen={nameOfProjectToImmediatelyOpen}
+                        setNameOfProjectToImmediatelyOpen={setNameOfProjectToImmediatelyOpen}
+                        directoryId={directoryId}
+                        setDirectoryId={setDirectoryId}
+                        projectListEvent={projectListEvent}
+                        dispatchProjectListEvent={dispatchProjectListEvent}
+                        query={query}
+                        onOpenIde={openIde}
+                        onCloseIde={closeIde}
+                        appRunner={appRunner}
+                        loadingProjectManagerDidFail={loadingProjectManagerDidFail}
+                        isListingRemoteDirectoryWhileOffline={isListingRemoteDirectoryWhileOffline}
+                        isListingLocalDirectoryAndWillFail={isListingLocalDirectoryAndWillFail}
+                        isListingRemoteDirectoryAndWillFail={isListingRemoteDirectoryAndWillFail}
+                    />
                 </>
             )}
-            {/* This should be just `{modal}`, however TypeScript incorrectly throws an error. */}
+            <TheModal />
             {project && <Ide project={project} appRunner={appRunner} />}
             {/* `session.accessToken` MUST be present in order for the `Chat` component to work. */}
             {isHelpChatVisible && session.accessToken != null && (
@@ -1732,7 +305,6 @@ function Dashboard(props: DashboardProps) {
                     }}
                 />
             )}
-            {modal && <>{modal}</>}
         </div>
     )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoriesTable.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoriesTable.tsx
new file mode 100644
index 00000000000..a015e4becd6
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoriesTable.tsx
@@ -0,0 +1,578 @@
+/** @file Table displaying a list of directories. */
+import * as React from 'react'
+import toast from 'react-hot-toast'
+
+import DirectoryIcon from 'enso-assets/directory.svg'
+import PlusIcon from 'enso-assets/plus.svg'
+
+import * as backendModule from '../backend'
+import * as columnModule from '../column'
+import * as dateTime from '../dateTime'
+import * as directoryEventModule from '../events/directoryEvent'
+import * as directoryListEventModule from '../events/directoryListEvent'
+import * as errorModule from '../../error'
+import * as eventModule from '../event'
+import * as hooks from '../../hooks'
+import * as permissions from '../permissions'
+import * as presence from '../presence'
+import * as shortcuts from '../shortcuts'
+import * as string from '../../string'
+import * as uniqueString from '../../uniqueString'
+
+import * as authProvider from '../../authentication/providers/auth'
+import * as backendProvider from '../../providers/backend'
+import * as loggerProvider from '../../providers/logger'
+import * as modalProvider from '../../providers/modal'
+
+import * as tableColumn from './tableColumn'
+import TableRow, * as tableRow from './tableRow'
+import ConfirmDeleteModal from './confirmDeleteModal'
+import ContextMenu from './contextMenu'
+import ContextMenuEntry from './contextMenuEntry'
+import EditableSpan from './editableSpan'
+import Table from './table'
+
+// =================
+// === Constants ===
+// =================
+
+/** The {@link RegExp} matching a directory name following the default naming convention. */
+const DIRECTORY_NAME_REGEX = /^New_Folder_(?<directoryIndex>\d+)$/
+/** The default prefix of an automatically generated directory. */
+const DIRECTORY_NAME_DEFAULT_PREFIX = 'New_Folder_'
+/** The user-facing name of this asset type. */
+const ASSET_TYPE_NAME = 'folder'
+/** The user-facing plural name of this asset type. */
+const ASSET_TYPE_NAME_PLURAL = 'folders'
+// 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)
+/** Placeholder row when the search query is not empty. */
+const PLACEHOLDER_WITH_FILTER = (
+    <span className="opacity-75">
+        This folder does not contain any sub{ASSET_TYPE_NAME_PLURAL} matching your query.
+    </span>
+)
+/** Placeholder row when the search query is empty. */
+const PLACEHOLDER_WITHOUT_FILTER = (
+    <span className="opacity-75">
+        This folder does not contain any sub{ASSET_TYPE_NAME_PLURAL}.
+    </span>
+)
+
+// ============================
+// === DirectoryNameHeading ===
+// ============================
+
+/** Props for a {@link DirectoryNameHeading}. */
+interface InternalDirectoryNameHeadingProps {
+    doCreateDirectory: () => void
+}
+
+/** The column header for the "name" column for the table of directory assets. */
+function DirectoryNameHeading(props: InternalDirectoryNameHeadingProps) {
+    const { doCreateDirectory } = props
+
+    return (
+        <div className="inline-flex">
+            {string.capitalizeFirst(ASSET_TYPE_NAME_PLURAL)}
+            <button
+                className="mx-1"
+                onClick={event => {
+                    event.stopPropagation()
+                    doCreateDirectory()
+                }}
+            >
+                <img src={PlusIcon} />
+            </button>
+        </div>
+    )
+}
+
+// =====================
+// === DirectoryName ===
+// =====================
+
+/** Props for a {@link DirectoryName}. */
+interface InternalDirectoryNameProps
+    extends tableColumn.TableColumnProps<
+        backendModule.DirectoryAsset,
+        DirectoriesTableState,
+        DirectoryRowState
+    > {}
+
+/** The icon and name of a specific directory asset. */
+function DirectoryName(props: InternalDirectoryNameProps) {
+    const {
+        item,
+        setItem,
+        selected,
+        state: { enterDirectory },
+        rowState,
+        setRowState,
+    } = props
+    const logger = loggerProvider.useLogger()
+    const { backend } = backendProvider.useBackend()
+
+    const doRename = async (newName: string) => {
+        if (backend.type !== backendModule.BackendType.local) {
+            try {
+                await backend.updateDirectory(item.id, { title: newName }, item.title)
+                return
+            } catch (error) {
+                const message = `Error renaming folder: ${
+                    errorModule.tryGetMessage(error) ?? 'unknown error'
+                }`
+                toast.error(message)
+                logger.error(message)
+                throw error
+            }
+        }
+    }
+
+    return (
+        <div
+            className="flex text-left items-center align-middle whitespace-nowrap"
+            onClick={event => {
+                if (
+                    eventModule.isSingleClick(event) &&
+                    (selected ||
+                        shortcuts.SHORTCUT_REGISTRY.matchesMouseAction(
+                            shortcuts.MouseAction.editName,
+                            event
+                        ))
+                ) {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: true,
+                    }))
+                } else if (eventModule.isDoubleClick(event)) {
+                    enterDirectory(item)
+                }
+            }}
+        >
+            <img src={DirectoryIcon} />
+            <EditableSpan
+                editable={rowState.isEditingName}
+                onSubmit={async newTitle => {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: false,
+                    }))
+                    if (newTitle !== item.title) {
+                        const oldTitle = item.title
+                        setItem(oldItem => ({ ...oldItem, title: newTitle }))
+                        try {
+                            await doRename(newTitle)
+                        } catch {
+                            setItem(oldItem => ({ ...oldItem, title: oldTitle }))
+                        }
+                    }
+                }}
+                onCancel={() => {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: false,
+                    }))
+                }}
+                className="cursor-pointer bg-transparent grow px-2"
+            >
+                {item.title}
+            </EditableSpan>
+        </div>
+    )
+}
+
+// ===============================
+// === DirectoryRowContextMenu ===
+// ===============================
+
+/** Props for a {@link DirectoryRowContextMenu}. */
+interface InternalDirectoryRowContextMenuProps {
+    innerProps: tableRow.TableRowInnerProps<
+        backendModule.DirectoryAsset,
+        backendModule.DirectoryId,
+        DirectoryRowState
+    >
+    event: React.MouseEvent
+    doDelete: () => Promise<void>
+}
+
+/** The context menu for a row of a {@link DirectorysTable}. */
+function DirectoryRowContextMenu(props: InternalDirectoryRowContextMenuProps) {
+    const {
+        innerProps: { item, setRowState },
+        event,
+        doDelete,
+    } = props
+    const { setModal, unsetModal } = modalProvider.useSetModal()
+
+    const doRename = () => {
+        setRowState(oldRowState => ({
+            ...oldRowState,
+            isEditingName: true,
+        }))
+        unsetModal()
+    }
+    return (
+        <ContextMenu key={item.id} event={event}>
+            <ContextMenuEntry onClick={doRename}>Rename</ContextMenuEntry>
+            <ContextMenuEntry
+                onClick={() => {
+                    setModal(
+                        <ConfirmDeleteModal
+                            description={`the ${ASSET_TYPE_NAME} '${item.title}'`}
+                            doDelete={doDelete}
+                        />
+                    )
+                }}
+            >
+                <span className="text-red-700">Delete</span>
+            </ContextMenuEntry>
+        </ContextMenu>
+    )
+}
+
+// ====================
+// === DirectoryRow ===
+// ====================
+
+/** A row in a {@link DirectoriesTable}. */
+function DirectoryRow(
+    props: tableRow.TableRowProps<
+        backendModule.DirectoryAsset,
+        backendModule.DirectoryId,
+        DirectoriesTableState,
+        DirectoryRowState
+    >
+) {
+    const {
+        keyProp: key,
+        item: rawItem,
+        state: { directoryEvent, dispatchDirectoryListEvent, markItemAsHidden, markItemAsVisible },
+    } = props
+    const logger = loggerProvider.useLogger()
+    const { backend } = backendProvider.useBackend()
+    const { setModal } = modalProvider.useSetModal()
+    const [item, setItem] = React.useState(rawItem)
+    const [status, setStatus] = React.useState(presence.Presence.present)
+
+    React.useEffect(() => {
+        setItem(rawItem)
+    }, [rawItem])
+
+    const doDelete = async () => {
+        if (backend.type !== backendModule.BackendType.local) {
+            setStatus(presence.Presence.deleting)
+            markItemAsHidden(key)
+            try {
+                await backend.deleteDirectory(item.id, item.title)
+                dispatchDirectoryListEvent({
+                    type: directoryListEventModule.DirectoryListEventType.delete,
+                    directoryId: key,
+                })
+            } catch (error) {
+                setStatus(presence.Presence.present)
+                markItemAsVisible(key)
+                const message = `Unable to delete directory: ${
+                    errorModule.tryGetMessage(error) ?? 'unknown error.'
+                }`
+                toast.error(message)
+                logger.error(message)
+            }
+        }
+    }
+
+    hooks.useEventHandler(directoryEvent, async event => {
+        switch (event.type) {
+            case directoryEventModule.DirectoryEventType.create: {
+                if (key === event.placeholderId) {
+                    if (backend.type !== backendModule.BackendType.remote) {
+                        const message = 'Folders cannot be created on the local backend.'
+                        toast.error(message)
+                        logger.error(message)
+                    } else {
+                        setStatus(presence.Presence.inserting)
+                        try {
+                            const createdDirectory = await backend.createDirectory({
+                                parentId: item.parentId,
+                                title: item.title,
+                            })
+                            setStatus(presence.Presence.present)
+                            const newItem: backendModule.DirectoryAsset = {
+                                ...item,
+                                ...createdDirectory,
+                            }
+                            setItem(newItem)
+                        } catch (error) {
+                            dispatchDirectoryListEvent({
+                                type: directoryListEventModule.DirectoryListEventType.delete,
+                                directoryId: key,
+                            })
+                            const message = `Error creating new folder: ${
+                                errorModule.tryGetMessage(error) ?? 'unknown error.'
+                            }`
+                            toast.error(message)
+                            logger.error(message)
+                        }
+                    }
+                }
+                break
+            }
+            case directoryEventModule.DirectoryEventType.deleteMultiple: {
+                if (event.directoryIds.has(key)) {
+                    await doDelete()
+                }
+                break
+            }
+        }
+    })
+
+    return (
+        <TableRow
+            className={presence.CLASS_NAME[status]}
+            {...props}
+            onContextMenu={(innerProps, event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                setModal(
+                    <DirectoryRowContextMenu
+                        innerProps={innerProps}
+                        event={event}
+                        doDelete={doDelete}
+                    />
+                )
+            }}
+            item={item}
+        />
+    )
+}
+
+// ========================
+// === DirectoriesTable ===
+// ========================
+
+/** State passed through from a {@link DirectoriesTable} to every cell. */
+interface DirectoriesTableState {
+    directoryEvent: directoryEventModule.DirectoryEvent | null
+    enterDirectory: (directory: backendModule.DirectoryAsset) => void
+    dispatchDirectoryListEvent: (event: directoryListEventModule.DirectoryListEvent) => void
+    markItemAsHidden: (key: string) => void
+    markItemAsVisible: (key: string) => void
+}
+
+/** Data associated with a {@link DirectoryRow}, used for rendering. */
+export interface DirectoryRowState {
+    isEditingName: boolean
+}
+
+/** The default {@link DirectoryRowState} associated with a {@link DirectoryRow}. */
+export const INITIAL_ROW_STATE: DirectoryRowState = Object.freeze({
+    isEditingName: false,
+})
+
+/** Props for a {@link DirectoriesTable}. */
+export interface DirectoriesTableProps {
+    directoryId: backendModule.DirectoryId | null
+    items: backendModule.DirectoryAsset[]
+    filter: ((item: backendModule.DirectoryAsset) => boolean) | null
+    isLoading: boolean
+    columnDisplayMode: columnModule.ColumnDisplayMode
+    enterDirectory: (directory: backendModule.DirectoryAsset) => void
+}
+
+/** The table of directory assets. */
+function DirectoriesTable(props: DirectoriesTableProps) {
+    const {
+        directoryId,
+        items: rawItems,
+        filter,
+        isLoading,
+        columnDisplayMode,
+        enterDirectory,
+    } = props
+    const { organization } = authProvider.useNonPartialUserSession()
+    const { backend } = backendProvider.useBackend()
+    const { setModal } = modalProvider.useSetModal()
+    const [items, setItems] = React.useState(rawItems)
+    const [directoryEvent, dispatchDirectoryEvent] =
+        hooks.useEvent<directoryEventModule.DirectoryEvent>()
+    const [directoryListEvent, dispatchDirectoryListEvent] =
+        hooks.useEvent<directoryListEventModule.DirectoryListEvent>()
+
+    React.useEffect(() => {
+        setItems(rawItems)
+    }, [rawItems])
+
+    const visibleItems = React.useMemo(
+        () => (filter != null ? items.filter(filter) : items),
+        [items, filter]
+    )
+
+    // === Tracking number of visually hidden items ===
+
+    const [shouldForceShowPlaceholder, setShouldForceShowPlaceholder] = React.useState(false)
+    const keysOfHiddenItemsRef = React.useRef(new Set<string>())
+
+    const updateShouldForceShowPlaceholder = React.useCallback(() => {
+        setShouldForceShowPlaceholder(
+            visibleItems.every(item => keysOfHiddenItemsRef.current.has(item.id))
+        )
+    }, [visibleItems])
+
+    React.useEffect(updateShouldForceShowPlaceholder, [updateShouldForceShowPlaceholder])
+
+    React.useEffect(() => {
+        const oldKeys = keysOfHiddenItemsRef.current
+        keysOfHiddenItemsRef.current = new Set(
+            items.map(backendModule.getAssetId).filter(key => oldKeys.has(key))
+        )
+    }, [items])
+
+    const markItemAsHidden = React.useCallback(
+        (key: string) => {
+            keysOfHiddenItemsRef.current.add(key)
+            updateShouldForceShowPlaceholder()
+        },
+        [updateShouldForceShowPlaceholder]
+    )
+
+    const markItemAsVisible = React.useCallback(
+        (key: string) => {
+            keysOfHiddenItemsRef.current.delete(key)
+            updateShouldForceShowPlaceholder()
+        },
+        [updateShouldForceShowPlaceholder]
+    )
+
+    // === End tracking number of visually hidden items ===
+
+    const createNewDirectory = React.useCallback(() => {
+        dispatchDirectoryListEvent({
+            type: directoryListEventModule.DirectoryListEventType.create,
+        })
+    }, [/* should never change */ dispatchDirectoryListEvent])
+
+    hooks.useEventHandler(directoryListEvent, event => {
+        switch (event.type) {
+            case directoryListEventModule.DirectoryListEventType.create: {
+                const directoryIndices = items
+                    .map(item => DIRECTORY_NAME_REGEX.exec(item.title))
+                    .map(match => match?.groups?.directoryIndex)
+                    .map(maybeIndex => (maybeIndex != null ? parseInt(maybeIndex, 10) : 0))
+                const title = `${DIRECTORY_NAME_DEFAULT_PREFIX}${
+                    Math.max(0, ...directoryIndices) + 1
+                }`
+                const placeholderItem: backendModule.DirectoryAsset = {
+                    id: backendModule.DirectoryId(uniqueString.uniqueString()),
+                    title,
+                    modifiedAt: dateTime.toRfc3339(new Date()),
+                    parentId: directoryId ?? backendModule.DirectoryId(''),
+                    permissions: permissions.tryGetSingletonOwnerPermission(organization),
+                    projectState: null,
+                    type: backendModule.AssetType.directory,
+                }
+                setItems(oldItems => [placeholderItem, ...oldItems])
+                dispatchDirectoryEvent({
+                    type: directoryEventModule.DirectoryEventType.create,
+                    placeholderId: placeholderItem.id,
+                })
+                break
+            }
+            case directoryListEventModule.DirectoryListEventType.delete: {
+                setItems(oldItems => oldItems.filter(item => item.id !== event.directoryId))
+                break
+            }
+        }
+    })
+
+    const state = React.useMemo(
+        // The type MUST be here to trigger excess property errors at typecheck time.
+        (): DirectoriesTableState => ({
+            directoryEvent,
+            enterDirectory,
+            dispatchDirectoryListEvent,
+            markItemAsHidden,
+            markItemAsVisible,
+        }),
+        [
+            directoryEvent,
+            enterDirectory,
+            dispatchDirectoryListEvent,
+            markItemAsHidden,
+            markItemAsVisible,
+        ]
+    )
+
+    if (backend.type === backendModule.BackendType.local) {
+        return <></>
+    } else {
+        return (
+            <Table<
+                backendModule.DirectoryAsset,
+                backendModule.DirectoryId,
+                DirectoriesTableState,
+                DirectoryRowState
+            >
+                rowComponent={DirectoryRow}
+                items={visibleItems}
+                isLoading={isLoading}
+                state={state}
+                initialRowState={INITIAL_ROW_STATE}
+                getKey={backendModule.getAssetId}
+                placeholder={filter != null ? PLACEHOLDER_WITH_FILTER : PLACEHOLDER_WITHOUT_FILTER}
+                forceShowPlaceholder={shouldForceShowPlaceholder}
+                columns={columnModule.columnsFor(columnDisplayMode, backend.type).map(column =>
+                    column === columnModule.Column.name
+                        ? {
+                              id: column,
+                              className: columnModule.COLUMN_CSS_CLASS[column],
+                              heading: (
+                                  <DirectoryNameHeading doCreateDirectory={createNewDirectory} />
+                              ),
+                              render: DirectoryName,
+                          }
+                        : {
+                              id: column,
+                              className: columnModule.COLUMN_CSS_CLASS[column],
+                              heading: <>{columnModule.COLUMN_NAME[column]}</>,
+                              render: columnModule.COLUMN_RENDERER[column],
+                          }
+                )}
+                onContextMenu={(selectedKeys, event, setSelectedKeys) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    const doDeleteAll = () => {
+                        setModal(
+                            <ConfirmDeleteModal
+                                description={
+                                    `${selectedKeys.size} selected ` + ASSET_TYPE_NAME_PLURAL
+                                }
+                                doDelete={() => {
+                                    dispatchDirectoryEvent({
+                                        type: directoryEventModule.DirectoryEventType
+                                            .deleteMultiple,
+                                        directoryIds: selectedKeys,
+                                    })
+                                    setSelectedKeys(new Set())
+                                }}
+                            />
+                        )
+                    }
+                    const pluralized = pluralize(selectedKeys.size)
+                    setModal(
+                        <ContextMenu key={uniqueString.uniqueString()} event={event}>
+                            <ContextMenuEntry onClick={doDeleteAll}>
+                                <span className="text-red-700">
+                                    Delete {selectedKeys.size} {pluralized}
+                                </span>
+                            </ContextMenuEntry>
+                        </ContextMenu>
+                    )
+                }}
+            />
+        )
+    }
+}
+
+export default DirectoriesTable
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryView.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryView.tsx
new file mode 100644
index 00000000000..2bee507a40d
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/directoryView.tsx
@@ -0,0 +1,375 @@
+/** @file The directory header bar and directory item listing. */
+import * as React from 'react'
+import toast from 'react-hot-toast'
+
+import * as common from 'enso-common'
+
+import * as authProvider from '../../authentication/providers/auth'
+import * as backendModule from '../backend'
+import * as backendProvider from '../../providers/backend'
+import * as columnModule from '../column'
+import * as hooks from '../../hooks'
+import * as loggerProvider from '../../providers/logger'
+import * as tabModule from '../tab'
+
+import * as fileListEventModule from '../events/fileListEvent'
+import * as projectEventModule from '../events/projectEvent'
+import * as projectListEventModule from '../events/projectListEvent'
+
+import DirectoriesTable from './directoriesTable'
+import DriveBar from './driveBar'
+import FilesTable from './filesTable'
+import ProjectsTable from './projectsTable'
+import SecretsTable from './secretsTable'
+
+// =================
+// === Constants ===
+// =================
+
+/** The `localStorage` key under which the ID of the current directory is stored. */
+const DIRECTORY_STACK_KEY = `${common.PRODUCT_NAME.toLowerCase()}-dashboard-directory-stack`
+
+// ========================
+// === Helper functions ===
+// ========================
+
+/** Sanitizes a string for use as a regex. */
+function regexEscape(string: string) {
+    return string.replace(/[\\^$.|?*+()[{]/g, '\\$&')
+}
+
+// =====================
+// === DirectoryView ===
+// =====================
+
+/** Props for a {@link DirectoryView}. */
+export interface DirectoryViewProps {
+    tab: tabModule.Tab
+    initialProjectName: string | null
+    nameOfProjectToImmediatelyOpen: string | null
+    setNameOfProjectToImmediatelyOpen: (nameOfProjectToImmediatelyOpen: string | null) => void
+    directoryId: backendModule.DirectoryId | null
+    setDirectoryId: (directoryId: backendModule.DirectoryId | null) => void
+    projectListEvent: projectListEventModule.ProjectListEvent | null
+    dispatchProjectListEvent: (directoryEvent: projectListEventModule.ProjectListEvent) => void
+    query: string
+    onOpenIde: (project: backendModule.ProjectAsset) => void
+    onCloseIde: () => void
+    appRunner: AppRunner | null
+    loadingProjectManagerDidFail: boolean
+    isListingRemoteDirectoryWhileOffline: boolean
+    isListingLocalDirectoryAndWillFail: boolean
+    isListingRemoteDirectoryAndWillFail: boolean
+}
+
+/** Contains directory path and directory contents (projects, folders, secrets and files). */
+function DirectoryView(props: DirectoryViewProps) {
+    const {
+        tab,
+        initialProjectName,
+        nameOfProjectToImmediatelyOpen,
+        setNameOfProjectToImmediatelyOpen,
+        directoryId,
+        setDirectoryId,
+        query,
+        projectListEvent,
+        dispatchProjectListEvent,
+        onOpenIde,
+        onCloseIde,
+        appRunner,
+        loadingProjectManagerDidFail,
+        isListingRemoteDirectoryWhileOffline,
+        isListingLocalDirectoryAndWillFail,
+        isListingRemoteDirectoryAndWillFail,
+    } = props
+    const logger = loggerProvider.useLogger()
+    const { organization, accessToken } = authProvider.useNonPartialUserSession()
+    const { backend } = backendProvider.useBackend()
+
+    const [initialized, setInitialized] = React.useState(false)
+    const [isLoadingAssets, setIsLoadingAssets] = React.useState(true)
+    const [directoryStack, setDirectoryStack] = React.useState<backendModule.DirectoryAsset[]>([])
+    // Defined by the spec as `compact` by default, however some columns lack an implementation
+    // in the remote (cloud) backend and will therefore be empty.
+    const [columnDisplayMode, setColumnDisplayMode] = React.useState(
+        columnModule.ColumnDisplayMode.release
+    )
+    const [isFileBeingDragged, setIsFileBeingDragged] = React.useState(false)
+
+    const [projectAssets, setProjectAssets] = React.useState<backendModule.ProjectAsset[]>([])
+    const [directoryAssets, setDirectoryAssets] = React.useState<backendModule.DirectoryAsset[]>([])
+    const [secretAssets, setSecretAssets] = React.useState<backendModule.SecretAsset[]>([])
+    const [fileAssets, setFileAssets] = React.useState<backendModule.FileAsset[]>([])
+    const [projectEvent, dispatchProjectEvent] =
+        React.useState<projectEventModule.ProjectEvent | null>(null)
+    const [fileListEvent, dispatchFileListEvent] =
+        React.useState<fileListEventModule.FileListEvent | null>(null)
+
+    const assetFilter = React.useMemo(() => {
+        if (query === '') {
+            return null
+        } else {
+            const regex = new RegExp(regexEscape(query), 'i')
+            return (asset: backendModule.Asset) => regex.test(asset.title)
+        }
+    }, [query])
+
+    const directory = directoryStack[directoryStack.length - 1] ?? null
+    const parentDirectory = directoryStack[directoryStack.length - 2] ?? null
+
+    React.useEffect(() => {
+        const onBlur = () => {
+            setIsFileBeingDragged(false)
+        }
+        window.addEventListener('blur', onBlur)
+        return () => {
+            window.removeEventListener('blur', onBlur)
+        }
+    }, [])
+
+    React.useEffect(() => {
+        setIsLoadingAssets(true)
+        setProjectAssets([])
+        setDirectoryAssets([])
+        setSecretAssets([])
+        setFileAssets([])
+    }, [backend, directoryId])
+
+    React.useEffect(() => {
+        if (backend.type === backendModule.BackendType.local && loadingProjectManagerDidFail) {
+            setIsLoadingAssets(false)
+        }
+    }, [loadingProjectManagerDidFail, backend.type])
+
+    React.useEffect(() => {
+        const cachedDirectoryStackJson = localStorage.getItem(DIRECTORY_STACK_KEY)
+        if (cachedDirectoryStackJson != null) {
+            // The JSON was inserted by the code below, so it will always have the right type.
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const cachedDirectoryStack: backendModule.DirectoryAsset[] =
+                JSON.parse(cachedDirectoryStackJson)
+            setDirectoryStack(cachedDirectoryStack)
+            const cachedDirectoryId = cachedDirectoryStack[cachedDirectoryStack.length - 1]?.id
+            if (cachedDirectoryId) {
+                setDirectoryId(cachedDirectoryId)
+            }
+        }
+    }, [setDirectoryId])
+
+    React.useEffect(() => {
+        if (
+            organization != null &&
+            directoryId === backendModule.rootDirectoryId(organization.id)
+        ) {
+            localStorage.removeItem(DIRECTORY_STACK_KEY)
+        } else {
+            localStorage.setItem(DIRECTORY_STACK_KEY, JSON.stringify(directoryStack))
+        }
+    }, [directoryStack, directoryId, organization])
+
+    const assets = hooks.useAsyncEffect(
+        [],
+        async signal => {
+            switch (backend.type) {
+                case backendModule.BackendType.local: {
+                    if (!isListingLocalDirectoryAndWillFail) {
+                        const newAssets = await backend.listDirectory()
+                        if (!signal.aborted) {
+                            setIsLoadingAssets(false)
+                        }
+                        return newAssets
+                    } else {
+                        return []
+                    }
+                }
+                case backendModule.BackendType.remote: {
+                    if (
+                        !isListingRemoteDirectoryAndWillFail &&
+                        !isListingRemoteDirectoryWhileOffline &&
+                        directoryId != null
+                    ) {
+                        const newAssets = await backend.listDirectory(
+                            { parentId: directoryId },
+                            directory?.title ?? null
+                        )
+                        if (!signal.aborted) {
+                            setIsLoadingAssets(false)
+                        }
+                        return newAssets
+                    } else {
+                        setIsLoadingAssets(false)
+                        return []
+                    }
+                }
+            }
+        },
+        [accessToken, directoryId, backend]
+    )
+
+    React.useEffect(() => {
+        const newProjectAssets = assets.filter(backendModule.assetIsProject)
+        setProjectAssets(newProjectAssets)
+        setDirectoryAssets(assets.filter(backendModule.assetIsDirectory))
+        setSecretAssets(assets.filter(backendModule.assetIsSecret))
+        setFileAssets(assets.filter(backendModule.assetIsFile))
+        if (nameOfProjectToImmediatelyOpen != null) {
+            const projectToLoad = newProjectAssets.find(
+                projectAsset => projectAsset.title === nameOfProjectToImmediatelyOpen
+            )
+            if (projectToLoad != null) {
+                dispatchProjectEvent({
+                    type: projectEventModule.ProjectEventType.open,
+                    projectId: projectToLoad.id,
+                })
+            }
+            setNameOfProjectToImmediatelyOpen(null)
+        }
+        if (!initialized && initialProjectName != null) {
+            setInitialized(true)
+            if (!newProjectAssets.some(asset => asset.title === initialProjectName)) {
+                const errorMessage = `No project named '${initialProjectName}' was found.`
+                toast.error(errorMessage)
+                logger.error(`Error opening project on startup: ${errorMessage}`)
+            }
+        }
+        // `nameOfProjectToImmediatelyOpen` must NOT trigger this effect.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        assets,
+        initialized,
+        initialProjectName,
+        logger,
+        /* should never change */ setNameOfProjectToImmediatelyOpen,
+        /* should never change */ dispatchProjectEvent,
+    ])
+
+    const doCreateProject = React.useCallback(() => {
+        dispatchProjectListEvent({
+            type: projectListEventModule.ProjectListEventType.create,
+            templateId: null,
+            onSpinnerStateChange: null,
+        })
+    }, [/* should never change */ dispatchProjectListEvent])
+
+    const enterDirectory = React.useCallback(
+        (directoryAsset: backendModule.DirectoryAsset) => {
+            setDirectoryId(directoryAsset.id)
+            setDirectoryStack([...directoryStack, directoryAsset])
+        },
+        [directoryStack, setDirectoryId]
+    )
+
+    const exitDirectory = React.useCallback(() => {
+        setDirectoryId(
+            parentDirectory?.id ??
+                (organization != null ? backendModule.rootDirectoryId(organization.id) : null)
+        )
+        setDirectoryStack(
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            directoryStack.slice(0, -1)
+        )
+    }, [directoryStack, organization, parentDirectory?.id, setDirectoryId])
+
+    React.useEffect(() => {
+        const onDragEnter = (event: DragEvent) => {
+            if (
+                tab === tabModule.Tab.dashboard &&
+                event.dataTransfer?.types.includes('Files') === true
+            ) {
+                setIsFileBeingDragged(true)
+            }
+        }
+        document.body.addEventListener('dragenter', onDragEnter)
+        return () => {
+            document.body.removeEventListener('dragenter', onDragEnter)
+        }
+    }, [tab])
+
+    return (
+        <>
+            <DriveBar
+                directoryId={directoryId}
+                directory={directory}
+                parentDirectory={parentDirectory}
+                columnDisplayMode={columnDisplayMode}
+                setColumnDisplayMode={setColumnDisplayMode}
+                exitDirectory={exitDirectory}
+                dispatchFileListEvent={dispatchFileListEvent}
+            />
+            {/* Padding. */}
+            <div className="h-6 mx-2" />
+            <div className="flex-1 overflow-auto mx-2">
+                <ProjectsTable
+                    appRunner={appRunner}
+                    directoryId={directoryId}
+                    items={projectAssets}
+                    filter={assetFilter}
+                    isLoading={isLoadingAssets}
+                    columnDisplayMode={columnDisplayMode}
+                    projectEvent={projectEvent}
+                    dispatchProjectEvent={dispatchProjectEvent}
+                    projectListEvent={projectListEvent}
+                    dispatchProjectListEvent={dispatchProjectListEvent}
+                    doCreateProject={doCreateProject}
+                    doOpenIde={onOpenIde}
+                    doCloseIde={onCloseIde}
+                />
+                {/* Padding. */}
+                <div className="h-10" />
+                <DirectoriesTable
+                    directoryId={directoryId}
+                    items={directoryAssets}
+                    filter={assetFilter}
+                    isLoading={isLoadingAssets}
+                    columnDisplayMode={columnDisplayMode}
+                    enterDirectory={enterDirectory}
+                />
+                {/* Padding. */}
+                <div className="h-10" />
+                <SecretsTable
+                    directoryId={directoryId}
+                    items={secretAssets}
+                    filter={assetFilter}
+                    isLoading={isLoadingAssets}
+                    columnDisplayMode={columnDisplayMode}
+                />
+                {/* Padding. */}
+                <div className="h-10" />
+                <FilesTable
+                    directoryId={directoryId}
+                    items={fileAssets}
+                    filter={assetFilter}
+                    isLoading={isLoadingAssets}
+                    columnDisplayMode={columnDisplayMode}
+                    fileListEvent={fileListEvent}
+                    dispatchFileListEvent={dispatchFileListEvent}
+                />
+            </div>
+            {isFileBeingDragged &&
+            directoryId != null &&
+            backend.type === backendModule.BackendType.remote ? (
+                <div
+                    className="text-white text-lg fixed w-screen h-screen inset-0 bg-primary grid place-items-center"
+                    onDragLeave={() => {
+                        setIsFileBeingDragged(false)
+                    }}
+                    onDragOver={event => {
+                        event.preventDefault()
+                    }}
+                    onDrop={event => {
+                        event.preventDefault()
+                        setIsFileBeingDragged(false)
+                        dispatchFileListEvent({
+                            type: fileListEventModule.FileListEventType.uploadMultiple,
+                            files: event.dataTransfer.files,
+                        })
+                    }}
+                >
+                    Drop to upload files.
+                </div>
+            ) : null}
+        </>
+    )
+}
+
+export default DirectoryView
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveBar.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveBar.tsx
new file mode 100644
index 00000000000..91348ce1664
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveBar.tsx
@@ -0,0 +1,144 @@
+/** @file Header menubar for the directory listing, containing information about
+ * the current directory and some configuration options. */
+import * as React from 'react'
+import toast from 'react-hot-toast'
+
+import ArrowRightSmallIcon from 'enso-assets/arrow_right_small.svg'
+import DownloadIcon from 'enso-assets/download.svg'
+import UploadIcon from 'enso-assets/upload.svg'
+
+import * as backendModule from '../backend'
+import * as backendProvider from '../../providers/backend'
+import * as column from '../column'
+import * as featureFlags from '../featureFlags'
+import * as fileListEventModule from '../events/fileListEvent'
+import * as loggerProvider from '../../providers/logger'
+
+import ColumnDisplayModeSwitcher from './columnDisplayModeSwitcher'
+
+// ================
+// === DriveBar ===
+// ================
+
+/** Props for a {@link DriveBar}. */
+export interface DriveBarProps {
+    directoryId: backendModule.DirectoryId | null
+    directory: backendModule.DirectoryAsset | null
+    parentDirectory: backendModule.DirectoryAsset | null
+    columnDisplayMode: column.ColumnDisplayMode
+    setColumnDisplayMode: (columnDisplayMode: column.ColumnDisplayMode) => void
+    dispatchFileListEvent: (fileListEvent: fileListEventModule.FileListEvent) => void
+    exitDirectory: () => void
+}
+
+/** Displays the current directory path and permissions, upload and download buttons,
+ * and a column display mode switcher. */
+function DriveBar(props: DriveBarProps) {
+    const {
+        directoryId,
+        directory,
+        parentDirectory,
+        columnDisplayMode,
+        setColumnDisplayMode,
+        dispatchFileListEvent,
+        exitDirectory,
+    } = props
+    const logger = loggerProvider.useLogger()
+    const { backend } = backendProvider.useBackend()
+
+    const uploadFiles = React.useCallback(
+        (event: React.FormEvent<HTMLInputElement>) => {
+            if (backend.type === backendModule.BackendType.local) {
+                // TODO[sb]: Allow uploading `.enso-project`s
+                // https://github.com/enso-org/cloud-v2/issues/510
+                const message = 'Files cannot be uploaded to the local backend.'
+                toast.error(message)
+                logger.error(message)
+            } else if (
+                event.currentTarget.files == null ||
+                event.currentTarget.files.length === 0
+            ) {
+                toast.success('No files selected to upload.')
+            } else if (directoryId == null) {
+                // This should never happen, however display a nice error message in case
+                // it somehow does.
+                const message = 'Files cannot be uploaded while offline.'
+                toast.error(message)
+                logger.error(message)
+            } else {
+                dispatchFileListEvent({
+                    type: fileListEventModule.FileListEventType.uploadMultiple,
+                    files: event.currentTarget.files,
+                })
+            }
+        },
+        [
+            backend.type,
+            directoryId,
+            /* should not change */ logger,
+            /* should never change */ dispatchFileListEvent,
+        ]
+    )
+
+    return (
+        <div className="flex flex-row flex-nowrap my-2">
+            <h1 className="text-xl font-bold mx-4 self-center">Drive</h1>
+            <div className="flex flex-row flex-nowrap mx-4">
+                <div className="bg-gray-100 rounded-l-full flex flex-row flex-nowrap items-center p-1 mx-0.5">
+                    {directory && (
+                        <>
+                            <button className="mx-2" onClick={exitDirectory}>
+                                {parentDirectory?.title ?? '/'}
+                            </button>
+                            <img src={ArrowRightSmallIcon} />
+                        </>
+                    )}
+                    <span className="mx-2">{directory?.title ?? '/'}</span>
+                </div>
+                <div className="bg-gray-100 rounded-r-full flex flex-row flex-nowrap items-center mx-0.5">
+                    <div className="m-2">Shared with</div>
+                    <div></div>
+                </div>
+                <div className="bg-gray-100 rounded-full flex flex-row flex-nowrap px-1.5 py-1 mx-4">
+                    <input
+                        type="file"
+                        multiple
+                        disabled={backend.type === backendModule.BackendType.local}
+                        id="upload_files_input"
+                        name="upload_files_input"
+                        className="w-0 h-0"
+                        onInput={uploadFiles}
+                    />
+                    <label
+                        htmlFor="upload_files_input"
+                        className={`mx-1 ${
+                            backend.type === backendModule.BackendType.local
+                                ? 'opacity-50'
+                                : 'cursor-pointer'
+                        }`}
+                    >
+                        <img src={UploadIcon} />
+                    </label>
+                    <button
+                        className={`mx-1 opacity-50`}
+                        disabled={true}
+                        onClick={event => {
+                            event.stopPropagation()
+                            /* TODO */
+                        }}
+                    >
+                        <img src={DownloadIcon} />
+                    </button>
+                </div>
+                {featureFlags.FEATURE_FLAGS.columnDisplayModeSwitcher && (
+                    <ColumnDisplayModeSwitcher
+                        columnDisplayMode={columnDisplayMode}
+                        setColumnDisplayMode={setColumnDisplayMode}
+                    />
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default DriveBar
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/editableSpan.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/editableSpan.tsx
new file mode 100644
index 00000000000..f85eee94fa1
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/editableSpan.tsx
@@ -0,0 +1,91 @@
+/** @file A text `<span>` which turns into an `input` when desired. */
+import * as React from 'react'
+
+import CrossIcon from 'enso-assets/cross.svg'
+import TickIcon from 'enso-assets/tick.svg'
+
+import * as shortcuts from '../shortcuts'
+
+// ====================
+// === EditableSpan ===
+// ====================
+
+/** Props of an {@link EditableSpan} that are passed through to the base element. */
+type EditableSpanPassthroughProps = JSX.IntrinsicElements['input'] & JSX.IntrinsicElements['span']
+
+/** Props for an {@link EditableSpan}. */
+export interface EditableSpanProps extends Omit<EditableSpanPassthroughProps, 'onSubmit'> {
+    editable?: boolean
+    onSubmit: (value: string) => void
+    onCancel: () => void
+    inputPattern?: string
+    inputTitle?: string
+    children: string
+}
+
+/** A `<span>` that can turn into an `<input type="text">`. */
+function EditableSpan(props: EditableSpanProps) {
+    const {
+        editable = false,
+        children,
+        onSubmit,
+        onCancel,
+        inputPattern,
+        inputTitle,
+        ...passthroughProps
+    } = props
+
+    // This is incorrect, but SAFE, as the value is always set by the time it is used.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const inputRef = React.useRef<HTMLInputElement>(null!)
+
+    if (editable) {
+        return (
+            <form
+                className="flex grow"
+                onSubmit={event => {
+                    event.preventDefault()
+                    onSubmit(inputRef.current.value)
+                }}
+            >
+                <input
+                    ref={inputRef}
+                    autoFocus
+                    type="text"
+                    size={1}
+                    defaultValue={children}
+                    onBlur={event => event.currentTarget.form?.requestSubmit()}
+                    onKeyUp={event => {
+                        if (
+                            shortcuts.SHORTCUT_REGISTRY.matchesKeyboardAction(
+                                shortcuts.KeyboardAction.cancelEditName,
+                                event
+                            )
+                        ) {
+                            onCancel()
+                        }
+                    }}
+                    {...(inputPattern != null ? { pattern: inputPattern } : {})}
+                    {...(inputTitle != null ? { title: inputTitle } : {})}
+                    {...passthroughProps}
+                />
+                <button type="submit" className="mx-0.5">
+                    <img src={TickIcon} />
+                </button>
+                <button
+                    className="mx-0.5"
+                    onClick={event => {
+                        event.stopPropagation()
+                        onCancel()
+                    }}
+                >
+                    <img src={CrossIcon} />
+                </button>
+            </form>
+        )
+    } else {
+        return <span {...passthroughProps}>{children}</span>
+    }
+}
+
+export default EditableSpan
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx
deleted file mode 100644
index 6170a18e2e9..00000000000
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/fileCreateForm.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/** @file Form to create a project. */
-import * as React from 'react'
-import toast from 'react-hot-toast'
-
-import * as backendModule from '../backend'
-import * as backendProvider from '../../providers/backend'
-import * as error from '../../error'
-import * as modalProvider from '../../providers/modal'
-import CreateForm, * as createForm from './createForm'
-
-// ======================
-// === FileCreateForm ===
-// ======================
-
-/** Props for a {@link FileCreateForm}. */
-export interface FileCreateFormProps extends createForm.CreateFormPassthroughProps {
-    directoryId: backendModule.DirectoryId
-    onSuccess: () => void
-}
-
-/** A form to create a file. */
-function FileCreateForm(props: FileCreateFormProps) {
-    const { directoryId, onSuccess, ...passThrough } = props
-    const { backend } = backendProvider.useBackend()
-    const { unsetModal } = modalProvider.useSetModal()
-    const [name, setName] = React.useState<string | null>(null)
-    const [file, setFile] = React.useState<File | null>(null)
-
-    if (backend.type === backendModule.BackendType.local) {
-        return <></>
-    } else {
-        const onSubmit = async (event: React.FormEvent) => {
-            event.preventDefault()
-            if (file == null) {
-                // TODO[sb]: Uploading a file may be a mistake when creating a new file.
-                toast.error('Please select a file to upload.')
-            } else {
-                unsetModal()
-                await toast
-                    .promise(
-                        backend.uploadFile(
-                            {
-                                parentDirectoryId: directoryId,
-                                fileName: name ?? file.name,
-                            },
-                            file
-                        ),
-                        {
-                            loading: 'Uploading file...',
-                            success: 'Sucessfully uploaded file.',
-                            error: error.unsafeIntoErrorMessage,
-                        }
-                    )
-                    .then(onSuccess)
-            }
-        }
-
-        return (
-            <CreateForm title="New File" onSubmit={onSubmit} {...passThrough}>
-                <div className="flex flex-row flex-nowrap m-1">
-                    <label className="inline-block flex-1 grow m-1" htmlFor="file_name">
-                        Name
-                    </label>
-                    <input
-                        id="file_name"
-                        type="text"
-                        size={1}
-                        className="bg-gray-200 rounded-full flex-1 grow-2 px-2 m-1"
-                        onChange={event => {
-                            setName(event.target.value)
-                        }}
-                        defaultValue={name ?? file?.name ?? ''}
-                    />
-                </div>
-                <div className="flex flex-row flex-nowrap m-1">
-                    <div className="inline-block flex-1 grow m-1">File</div>
-                    <div className="inline-block bg-gray-200 rounded-full flex-1 grow-2 px-2 m-1">
-                        <label className="bg-transparent rounded-full w-full" htmlFor="file_file">
-                            <div className="inline-block bg-gray-300 hover:bg-gray-400 rounded-l-full px-2 -ml-2">
-                                <u>𐌣</u>
-                            </div>
-                            <div className="inline-block px-2 -mr-2">
-                                {file?.name ?? 'No file chosen'}
-                            </div>
-                        </label>
-                        <input
-                            id="file_file"
-                            type="file"
-                            className="hidden"
-                            onChange={event => {
-                                setFile(event.target.files?.[0] ?? null)
-                            }}
-                        />
-                    </div>
-                </div>
-            </CreateForm>
-        )
-    }
-}
-
-export default FileCreateForm
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/filesTable.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/filesTable.tsx
new file mode 100644
index 00000000000..c62c1e06386
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/filesTable.tsx
@@ -0,0 +1,580 @@
+/** @file Table displaying a list of files. */
+import * as React from 'react'
+import toast from 'react-hot-toast'
+
+import PlusIcon from 'enso-assets/plus.svg'
+
+import * as backendModule from '../backend'
+import * as columnModule from '../column'
+import * as dateTime from '../dateTime'
+import * as errorModule from '../../error'
+import * as eventModule from '../event'
+import * as fileEventModule from '../events/fileEvent'
+import * as fileInfo from '../../fileInfo'
+import * as fileListEventModule from '../events/fileListEvent'
+import * as hooks from '../../hooks'
+import * as permissions from '../permissions'
+import * as presence from '../presence'
+import * as shortcuts from '../shortcuts'
+import * as string from '../../string'
+import * as uniqueString from '../../uniqueString'
+
+import * as authProvider from '../../authentication/providers/auth'
+import * as backendProvider from '../../providers/backend'
+import * as loggerProvider from '../../providers/logger'
+import * as modalProvider from '../../providers/modal'
+
+import * as tableColumn from './tableColumn'
+import TableRow, * as tableRow from './tableRow'
+import ConfirmDeleteModal from './confirmDeleteModal'
+import ContextMenu from './contextMenu'
+import ContextMenuEntry from './contextMenuEntry'
+import EditableSpan from './editableSpan'
+import Table from './table'
+
+// =================
+// === Constants ===
+// =================
+
+/** The user-facing name of this asset type. */
+const ASSET_TYPE_NAME = 'file'
+/** The user-facing plural name of this asset type. */
+const ASSET_TYPE_NAME_PLURAL = 'files'
+// 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)
+/** Placeholder row when the search query is not empty. */
+const PLACEHOLDER_WITH_QUERY = (
+    <span className="opacity-75">
+        This folder does not contain any {ASSET_TYPE_NAME_PLURAL} matching your query.
+    </span>
+)
+/** Placeholder row when the search query is empty. */
+const PLACEHOLDER_WITHOUT_QUERY = (
+    <span className="opacity-75">This folder does not contain any {ASSET_TYPE_NAME_PLURAL}.</span>
+)
+
+// =======================
+// === FileNameHeading ===
+// =======================
+
+/** Props for a {@link FileNameHeading}. */
+interface InternalFileNameHeadingProps {
+    directoryId: backendModule.DirectoryId | null
+    dispatchFileListEvent: (fileListEvent: fileListEventModule.FileListEvent) => void
+}
+
+/** The column header for the "name" column for the table of file assets. */
+function FileNameHeading(props: InternalFileNameHeadingProps) {
+    const { directoryId, dispatchFileListEvent } = props
+    const logger = loggerProvider.useLogger()
+    const { backend } = backendProvider.useBackend()
+
+    const uploadFiles = React.useCallback(
+        (event: React.FormEvent<HTMLInputElement>) => {
+            if (backend.type === backendModule.BackendType.local) {
+                // TODO[sb]: Allow uploading `.enso-project`s
+                // https://github.com/enso-org/cloud-v2/issues/510
+                const message = 'Files cannot be uploaded to the local backend.'
+                toast.error(message)
+                logger.error(message)
+            } else if (
+                event.currentTarget.files == null ||
+                event.currentTarget.files.length === 0
+            ) {
+                toast.success('No files selected to upload.')
+            } else if (directoryId == null) {
+                // This should never happen, however display a nice error message in case
+                // it somehow does.
+                const message = 'Files cannot be uploaded while offline.'
+                toast.error(message)
+                logger.error(message)
+            } else {
+                dispatchFileListEvent({
+                    type: fileListEventModule.FileListEventType.uploadMultiple,
+                    files: event.currentTarget.files,
+                })
+            }
+        },
+        [
+            backend.type,
+            directoryId,
+            /* should not change */ logger,
+            /* should never change */ dispatchFileListEvent,
+        ]
+    )
+
+    return (
+        <div className="inline-flex">
+            {string.capitalizeFirst(ASSET_TYPE_NAME_PLURAL)}
+            <input
+                type="file"
+                id="files_table_upload_files_input"
+                name="files_table_upload_files_input"
+                multiple
+                className="w-0 h-0"
+                onInput={uploadFiles}
+            />
+            <label htmlFor="files_table_upload_files_input" className="cursor-pointer mx-1">
+                <img src={PlusIcon} />
+            </label>
+        </div>
+    )
+}
+
+// ================
+// === FileName ===
+// ================
+
+/** Props for a {@link FileName}. */
+interface InternalFileNameProps
+    extends tableColumn.TableColumnProps<backendModule.FileAsset, FilesTableState, FileRowState> {}
+
+/** The icon and name of a specific file asset. */
+function FileName(props: InternalFileNameProps) {
+    const { item, setItem, selected, setRowState } = props
+
+    // TODO[sb]: Wait for backend implementation. `editable` should also be re-enabled, and the
+    // context menu entry should be re-added.
+    // Backend implementation is tracked here: https://github.com/enso-org/cloud-v2/issues/505.
+    const doRename = async () => {
+        return await Promise.resolve(null)
+    }
+
+    return (
+        <div
+            className="flex text-left items-center align-middle whitespace-nowrap"
+            onClick={event => {
+                if (
+                    eventModule.isSingleClick(event) &&
+                    (selected ||
+                        shortcuts.SHORTCUT_REGISTRY.matchesMouseAction(
+                            shortcuts.MouseAction.editName,
+                            event
+                        ))
+                ) {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: true,
+                    }))
+                }
+            }}
+        >
+            <img src={fileInfo.fileIcon()} />
+            <EditableSpan
+                editable={false}
+                onSubmit={async newTitle => {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: false,
+                    }))
+                    if (newTitle !== item.title) {
+                        const oldTitle = item.title
+                        setItem(oldItem => ({ ...oldItem, title: newTitle }))
+                        try {
+                            await doRename(/* newTitle */)
+                        } catch {
+                            setItem(oldItem => ({ ...oldItem, title: oldTitle }))
+                        }
+                    }
+                }}
+                onCancel={() => {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: false,
+                    }))
+                }}
+                className="bg-transparent grow px-2"
+            >
+                {item.title}
+            </EditableSpan>
+        </div>
+    )
+}
+
+// ==========================
+// === FileRowContextMenu ===
+// ==========================
+
+/** Props for a {@link FileRowContextMenu}. */
+interface InternalDirectoryRowContextMenuProps {
+    innerProps: tableRow.TableRowInnerProps<
+        backendModule.FileAsset,
+        backendModule.FileId,
+        FileRowState
+    >
+    event: React.MouseEvent
+    doDelete: () => Promise<void>
+}
+
+/** The context menu for a row of a {@link FilesTable}. */
+function FileRowContextMenu(props: InternalDirectoryRowContextMenuProps) {
+    const {
+        innerProps: { item },
+        event,
+        doDelete,
+    } = props
+    const { setModal } = modalProvider.useSetModal()
+
+    return (
+        <ContextMenu key={item.id} event={event}>
+            {/*<ContextMenuEntry disabled onClick={doCopy}>
+                                Copy
+                            </ContextMenuEntry>
+                            <ContextMenuEntry disabled onClick={doCut}>
+                                Cut
+                            </ContextMenuEntry>*/}
+            <ContextMenuEntry
+                onClick={() => {
+                    setModal(
+                        <ConfirmDeleteModal
+                            description={`the ${ASSET_TYPE_NAME} '${item.title}'`}
+                            doDelete={doDelete}
+                        />
+                    )
+                }}
+            >
+                <span className="text-red-700">Delete</span>
+            </ContextMenuEntry>
+            {/*<ContextMenuEntry disabled onClick={doDownload}>
+                                Download
+                            </ContextMenuEntry>*/}
+        </ContextMenu>
+    )
+}
+
+// ===============
+// === FileRow ===
+// ===============
+
+/** A row in a {@link FilesTable}. */
+function FileRow(
+    props: tableRow.TableRowProps<
+        backendModule.FileAsset,
+        backendModule.FileId,
+        FilesTableState,
+        FileRowState
+    >
+) {
+    const {
+        keyProp: key,
+        item: rawItem,
+        state: { fileEvent, dispatchFileListEvent, markItemAsHidden, markItemAsVisible },
+    } = props
+    const logger = loggerProvider.useLogger()
+    const { backend } = backendProvider.useBackend()
+    const { setModal } = modalProvider.useSetModal()
+    const [item, setItem] = React.useState(rawItem)
+    const [status, setStatus] = React.useState(presence.Presence.present)
+
+    React.useEffect(() => {
+        setItem(rawItem)
+    }, [rawItem])
+
+    const doDelete = async () => {
+        if (backend.type !== backendModule.BackendType.local) {
+            setStatus(presence.Presence.deleting)
+            markItemAsHidden(key)
+            try {
+                await backend.deleteFile(item.id, item.title)
+                dispatchFileListEvent({
+                    type: fileListEventModule.FileListEventType.delete,
+                    fileId: key,
+                })
+            } catch (error) {
+                setStatus(presence.Presence.present)
+                markItemAsVisible(key)
+                const message = `Unable to delete file: ${
+                    errorModule.tryGetMessage(error) ?? 'unknown error.'
+                }`
+                toast.error(message)
+                logger.error(message)
+            }
+        }
+    }
+
+    hooks.useEventHandler(fileEvent, async event => {
+        switch (event.type) {
+            case fileEventModule.FileEventType.createMultiple: {
+                const file = event.files.get(key)
+                if (file != null) {
+                    if (backend.type !== backendModule.BackendType.remote) {
+                        const message = 'Files cannot be uploaded on the local backend.'
+                        toast.error(message)
+                        logger.error(message)
+                    } else {
+                        setStatus(presence.Presence.inserting)
+                        try {
+                            const createdFile = await backend.uploadFile(
+                                {
+                                    fileId: null,
+                                    fileName: item.title,
+                                    parentDirectoryId: item.parentId,
+                                },
+                                file
+                            )
+                            setStatus(presence.Presence.present)
+                            const newItem: backendModule.FileAsset = {
+                                ...item,
+                                ...createdFile,
+                            }
+                            setItem(newItem)
+                        } catch (error) {
+                            dispatchFileListEvent({
+                                type: fileListEventModule.FileListEventType.delete,
+                                fileId: key,
+                            })
+                            const message = `Error creating new file: ${
+                                errorModule.tryGetMessage(error) ?? 'unknown error.'
+                            }`
+                            toast.error(message)
+                            logger.error(message)
+                        }
+                    }
+                }
+                break
+            }
+            case fileEventModule.FileEventType.deleteMultiple: {
+                if (event.fileIds.has(key)) {
+                    await doDelete()
+                }
+                break
+            }
+        }
+    })
+
+    return (
+        <TableRow
+            className={presence.CLASS_NAME[status]}
+            {...props}
+            onContextMenu={(innerProps, event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                setModal(
+                    <FileRowContextMenu innerProps={innerProps} event={event} doDelete={doDelete} />
+                )
+            }}
+            item={item}
+        />
+    )
+}
+
+// ==================
+// === FilesTable ===
+// ==================
+
+/** State passed through from a {@link FilesTable} to every cell. */
+interface FilesTableState {
+    fileEvent: fileEventModule.FileEvent | null
+    dispatchFileListEvent: (event: fileListEventModule.FileListEvent) => void
+    markItemAsHidden: (key: string) => void
+    markItemAsVisible: (key: string) => void
+}
+
+/** Data associated with a {@link FileRow}, used for rendering. */
+interface FileRowState {
+    isEditingName: boolean
+}
+
+/** The default {@link FileRowState} associated with a {@link FileRow}. */
+const INITIAL_ROW_STATE: FileRowState = Object.freeze({
+    isEditingName: false,
+})
+
+/** Props for a {@link FilesTable}. */
+export interface FilesTableProps {
+    directoryId: backendModule.DirectoryId | null
+    items: backendModule.FileAsset[]
+    filter: ((item: backendModule.FileAsset) => boolean) | null
+    isLoading: boolean
+    columnDisplayMode: columnModule.ColumnDisplayMode
+    fileListEvent: fileListEventModule.FileListEvent | null
+    dispatchFileListEvent: (projectListEvent: fileListEventModule.FileListEvent) => void
+}
+
+/** The table of file assets. */
+function FilesTable(props: FilesTableProps) {
+    const {
+        directoryId,
+        items: rawItems,
+        filter,
+        isLoading,
+        columnDisplayMode,
+        fileListEvent,
+        dispatchFileListEvent,
+    } = props
+    const { organization } = authProvider.useNonPartialUserSession()
+    const { backend } = backendProvider.useBackend()
+    const { setModal } = modalProvider.useSetModal()
+    const [items, setItems] = React.useState(rawItems)
+    const [fileEvent, dispatchFileEvent] = hooks.useEvent<fileEventModule.FileEvent>()
+
+    React.useEffect(() => {
+        setItems(rawItems)
+    }, [rawItems])
+
+    const visibleItems = React.useMemo(
+        () => (filter != null ? items.filter(filter) : items),
+        [items, filter]
+    )
+
+    // === Tracking number of visually hidden items ===
+
+    const [shouldForceShowPlaceholder, setShouldForceShowPlaceholder] = React.useState(false)
+    const keysOfHiddenItemsRef = React.useRef(new Set<string>())
+
+    const updateShouldForceShowPlaceholder = React.useCallback(() => {
+        setShouldForceShowPlaceholder(
+            visibleItems.every(item => keysOfHiddenItemsRef.current.has(item.id))
+        )
+    }, [visibleItems])
+
+    React.useEffect(updateShouldForceShowPlaceholder, [updateShouldForceShowPlaceholder])
+
+    React.useEffect(() => {
+        const oldKeys = keysOfHiddenItemsRef.current
+        keysOfHiddenItemsRef.current = new Set(
+            items.map(backendModule.getAssetId).filter(key => oldKeys.has(key))
+        )
+    }, [items])
+
+    const markItemAsHidden = React.useCallback(
+        (key: string) => {
+            keysOfHiddenItemsRef.current.add(key)
+            updateShouldForceShowPlaceholder()
+        },
+        [updateShouldForceShowPlaceholder]
+    )
+
+    const markItemAsVisible = React.useCallback(
+        (key: string) => {
+            keysOfHiddenItemsRef.current.delete(key)
+            updateShouldForceShowPlaceholder()
+        },
+        [updateShouldForceShowPlaceholder]
+    )
+
+    // === End tracking number of visually hidden items ===
+
+    hooks.useEventHandler(fileListEvent, event => {
+        switch (event.type) {
+            case fileListEventModule.FileListEventType.uploadMultiple: {
+                const placeholderItems: backendModule.FileAsset[] = Array.from(event.files)
+                    .reverse()
+                    .map(file => ({
+                        type: backendModule.AssetType.file,
+                        id: backendModule.FileId(uniqueString.uniqueString()),
+                        title: file.name,
+                        parentId: directoryId ?? backendModule.DirectoryId(''),
+                        permissions: permissions.tryGetSingletonOwnerPermission(organization),
+                        modifiedAt: dateTime.toRfc3339(new Date()),
+                        projectState: null,
+                    }))
+                setItems(oldItems => [...placeholderItems, ...oldItems])
+                dispatchFileEvent({
+                    type: fileEventModule.FileEventType.createMultiple,
+                    files: new Map(
+                        placeholderItems.map((placeholderItem, i) => [
+                            placeholderItem.id,
+                            // This is SAFE, as `placeholderItems` is created using a map on
+                            // `event.files`.
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            event.files[i]!,
+                        ])
+                    ),
+                })
+                break
+            }
+            case fileListEventModule.FileListEventType.delete: {
+                setItems(oldItems => oldItems.filter(item => item.id !== event.fileId))
+                break
+            }
+        }
+    })
+
+    const state = React.useMemo(
+        // The type MUST be here to trigger excess property errors at typecheck time.
+        (): FilesTableState => ({
+            fileEvent,
+            dispatchFileListEvent,
+            markItemAsHidden,
+            markItemAsVisible,
+        }),
+        [fileEvent, dispatchFileListEvent, markItemAsHidden, markItemAsVisible]
+    )
+
+    if (backend.type === backendModule.BackendType.local) {
+        return <></>
+    } else {
+        return (
+            <Table<backendModule.FileAsset, backendModule.FileId, FilesTableState, FileRowState>
+                rowComponent={FileRow}
+                items={visibleItems}
+                isLoading={isLoading}
+                state={state}
+                initialRowState={INITIAL_ROW_STATE}
+                getKey={backendModule.getAssetId}
+                placeholder={filter != null ? PLACEHOLDER_WITH_QUERY : PLACEHOLDER_WITHOUT_QUERY}
+                forceShowPlaceholder={shouldForceShowPlaceholder}
+                columns={columnModule.columnsFor(columnDisplayMode, backend.type).map(column =>
+                    column === columnModule.Column.name
+                        ? {
+                              id: column,
+                              className: columnModule.COLUMN_CSS_CLASS[column],
+                              heading: (
+                                  <FileNameHeading
+                                      directoryId={directoryId}
+                                      dispatchFileListEvent={dispatchFileListEvent}
+                                  />
+                              ),
+                              render: FileName,
+                          }
+                        : {
+                              id: column,
+                              className: columnModule.COLUMN_CSS_CLASS[column],
+                              heading: <>{columnModule.COLUMN_NAME[column]}</>,
+                              render: columnModule.COLUMN_RENDERER[column],
+                          }
+                )}
+                onContextMenu={(selectedKeys, event, setSelectedKeys) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    const doDeleteAll = () => {
+                        setModal(
+                            <ConfirmDeleteModal
+                                description={
+                                    `${selectedKeys.size} selected ` + ASSET_TYPE_NAME_PLURAL
+                                }
+                                doDelete={() => {
+                                    dispatchFileEvent({
+                                        type: fileEventModule.FileEventType.deleteMultiple,
+                                        fileIds: selectedKeys,
+                                    })
+                                    setSelectedKeys(new Set())
+                                }}
+                            />
+                        )
+                    }
+                    const pluralized = pluralize(selectedKeys.size)
+                    setModal(
+                        <ContextMenu key={uniqueString.uniqueString()} event={event}>
+                            {/*<ContextMenuEntry disabled onClick={doCopyAll}>
+                                Copy {files.size} {pluralized}
+                            </ContextMenuEntry>
+                            <ContextMenuEntry disabled onClick={doCutAll}>
+                                Cut {files.size} {pluralized}
+                            </ContextMenuEntry>*/}
+                            <ContextMenuEntry onClick={doDeleteAll}>
+                                <span className="text-red-700">
+                                    Delete {selectedKeys.size} {pluralized}
+                                </span>
+                            </ContextMenuEntry>
+                        </ContextMenu>
+                    )
+                }}
+            />
+        )
+    }
+}
+
+export default FilesTable
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/ide.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/ide.tsx
index ac99be1cf63..d355428f3ff 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/ide.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/ide.tsx
@@ -33,11 +33,22 @@ function Ide(props: IdeProps) {
     const { backend } = backendProvider.useBackend()
     const { accessToken } = auth.useNonPartialUserSession()
 
+    let hasEffectRun = false
+
     React.useEffect(() => {
+        // This is a hack to work around the IDE WASM not playing nicely with React Strict Mode.
+        // This is unavoidable as the WASM must fully set up to be able to properly drop its assets,
+        // but React re-executes this side-effect faster tha the WASM can do so.
+        if (hasEffectRun) {
+            // eslint-disable-next-line no-restricted-syntax
+            return
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        hasEffectRun = true
         void (async () => {
             const ideVersion =
                 project.ideVersion?.value ??
-                ('listVersions' in backend
+                (backend.type === backendModule.BackendType.remote
                     ? await backend.listVersions({
                           versionType: backendModule.VersionType.ide,
                           default: true,
@@ -45,7 +56,7 @@ function Ide(props: IdeProps) {
                     : null)?.[0].number.value
             const engineVersion =
                 project.engineVersion?.value ??
-                ('listVersions' in backend
+                (backend.type === backendModule.BackendType.remote
                     ? await backend.listVersions({
                           versionType: backendModule.VersionType.backend,
                           default: true,
@@ -62,14 +73,17 @@ function Ide(props: IdeProps) {
             } else if (binaryAddress == null) {
                 throw new Error("Could not get the address of the project's binary endpoint.")
             } else {
-                const assetsRoot = (() => {
-                    switch (backend.type) {
-                        case backendModule.BackendType.remote:
-                            return `${IDE_CDN_URL}/${ideVersion}/`
-                        case backendModule.BackendType.local:
-                            return ''
+                let assetsRoot: string
+                switch (backend.type) {
+                    case backendModule.BackendType.remote: {
+                        assetsRoot = `${IDE_CDN_URL}/${ideVersion}/`
+                        break
                     }
-                })()
+                    case backendModule.BackendType.local: {
+                        assetsRoot = ''
+                        break
+                    }
+                }
                 const runNewProject = async () => {
                     const engineConfig =
                         backend.type === backendModule.BackendType.remote
@@ -130,9 +144,9 @@ function Ide(props: IdeProps) {
             }
         })()
         // The backend MUST NOT be a dependency, since the IDE should only be recreated when a new
-        // project is opened.
+        // project is opened, and a local project does not exist on the cloud and vice versa.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [appRunner, project])
+    }, [project, /* should never change */ appRunner])
 
     return <></>
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/input.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/input.tsx
index c36f5eb7a2a..9d8f9f69590 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/input.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/input.tsx
@@ -5,17 +5,20 @@ import * as React from 'react'
 // === Input ===
 // =============
 
+/** Props for an `<input>` HTML element/ */
+type InputAttributes = JSX.IntrinsicElements['input']
+
 /** Props for an {@link Input}. */
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends InputAttributes {
     setValue: (value: string) => void
 }
 
 /** A component for authentication from inputs, with preset styles. */
 function Input(props: InputProps) {
-    const { setValue, ...passThrough } = props
+    const { setValue, ...passthroughProps } = props
     return (
         <input
-            {...passThrough}
+            {...passthroughProps}
             onChange={event => {
                 setValue(event.target.value)
             }}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx
index a4122b33093..f1e9d1ed766 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/managePermissionsModal.tsx
@@ -9,7 +9,6 @@ import * as backendModule from '../backend'
 import * as backendProvider from '../../providers/backend'
 import * as errorModule from '../../error'
 import * as modalProvider from '../../providers/modal'
-import * as newtype from '../../newtype'
 
 import Autocomplete from './autocomplete'
 import Modal from './modal'
@@ -62,9 +61,22 @@ const ACTION_CSS_CLASS: Record<ManagePermissionsAction, string> = {
 /** Props for a {@link ManagePermissionsModal}. */
 export interface ManagePermissionsModalProps {
     asset: backendModule.Asset
+    initialPermissions: backendModule.PermissionAction[]
+    emailsOfUsersWithPermission: Set<backendModule.EmailAddress>
     /* If present, the user cannot be changed. */
     user?: backendModule.User
-    onSuccess: () => void
+    onSubmit: (
+        users: backendModule.SimpleUser[],
+        permissions: backendModule.PermissionAction[]
+    ) => void
+    onSuccess?: (
+        users: backendModule.SimpleUser[],
+        permissions: backendModule.PermissionAction[]
+    ) => void
+    onFailure?: (
+        users: backendModule.SimpleUser[],
+        permissions: backendModule.PermissionAction[]
+    ) => void
     eventTarget: HTMLElement
 }
 
@@ -72,7 +84,16 @@ export interface ManagePermissionsModalProps {
  * @throws {Error} when the current backend is the local backend, or when the user is offline.
  * This should never happen, as this modal should not be accessible in either case. */
 export function ManagePermissionsModal(props: ManagePermissionsModalProps) {
-    const { asset, user: rawUser, onSuccess, eventTarget } = props
+    const {
+        asset,
+        initialPermissions,
+        emailsOfUsersWithPermission,
+        user: rawUser,
+        onSubmit: rawOnSubmit,
+        onSuccess,
+        onFailure,
+        eventTarget,
+    } = props
     const { organization } = auth.useNonPartialUserSession()
     const { backend } = backendProvider.useBackend()
     const { unsetModal } = modalProvider.useSetModal()
@@ -90,12 +111,13 @@ export function ManagePermissionsModal(props: ManagePermissionsModalProps) {
 
     const user = React.useMemo(() => {
         const firstEmail = emails[0]
-        if (firstEmail == null || emails.length !== 1) {
+        if (rawUser != null) {
             return rawUser
+        } else if (firstEmail != null && emails.length === 1) {
+            return asset.permissions?.find(permission => permission.user.user_email === firstEmail)
+                ?.user
         } else {
-            return (asset.permissions ?? []).find(
-                permission => permission.user.user_email === firstEmail
-            )?.user
+            return null
         }
     }, [rawUser, emails, /* should never change */ asset.permissions])
 
@@ -108,32 +130,6 @@ export function ManagePermissionsModal(props: ManagePermissionsModalProps) {
             ? ManagePermissionsAction.inviteToOrganization
             : ManagePermissionsAction.share
 
-    /** Overridden by the user's permissions only if it is not empty. */
-    const initialPermissions = React.useMemo(
-        () =>
-            permissions.size !== 0
-                ? null
-                : user != null
-                ? new Set(
-                      (asset.permissions ?? [])
-                          .filter(
-                              assetPermission => assetPermission.user.user_email === user.user_email
-                          )
-                          .map(userPermission => userPermission.permission)
-                  )
-                : null,
-        // `permissions` is NOT a dependency; this is an expensive computation so it is only used
-        // to determine whether the computation should be avoided completely.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [user, /* should never change */ asset.permissions]
-    )
-
-    const emailsOfUsersWithPermission = React.useMemo(
-        () =>
-            new Set(asset.permissions?.map(userPermission => userPermission.user.user_email) ?? []),
-        [/* should never change */ asset.permissions]
-    )
-
     const userEmailRef = React.useRef<HTMLInputElement>(null)
 
     if (backend.type === backendModule.BackendType.local || organization == null) {
@@ -176,7 +172,7 @@ export function ManagePermissionsModal(props: ManagePermissionsModalProps) {
                 setEmails(newEmails)
                 const lowercaseEmail =
                     newEmails[0] != null
-                        ? newtype.asNewtype<backendModule.EmailAddress>(newEmails[0].toLowerCase())
+                        ? backendModule.EmailAddress(newEmails[0].toLowerCase())
                         : null
                 if (
                     userEmailRef.current?.validity.valid === true &&
@@ -235,21 +231,24 @@ export function ManagePermissionsModal(props: ManagePermissionsModalProps) {
                     try {
                         await backend.inviteUser({
                             organizationId: organization.id,
-                            userEmail: newtype.asNewtype<backendModule.EmailAddress>(firstEmail),
+                            userEmail: backendModule.EmailAddress(firstEmail),
                         })
                     } catch (error) {
                         toast.error(errorModule.tryGetMessage(error) ?? 'Unknown error.')
                     }
                 } else if (finalUsers.length !== 0) {
                     unsetModal()
+                    const permissionsArray = [...permissions]
                     try {
+                        rawOnSubmit(finalUsers, permissionsArray)
                         await backend.createPermission({
                             userSubjects: finalUsers.map(finalUser => finalUser.id),
                             resourceId: asset.id,
-                            actions: [...permissions],
+                            actions: permissionsArray,
                         })
-                        onSuccess()
+                        onSuccess?.(finalUsers, permissionsArray)
                     } catch {
+                        onFailure?.(finalUsers, permissionsArray)
                         const finalUserEmails = finalUsers.map(finalUser => `'${finalUser.email}'`)
                         toast.error(`Unable to set permissions of ${finalUserEmails.join(', ')}.`)
                     }
@@ -263,7 +262,9 @@ export function ManagePermissionsModal(props: ManagePermissionsModalProps) {
                 organization.id,
                 users,
                 user,
+                rawOnSubmit,
                 onSuccess,
+                onFailure,
                 /* should never change */ unsetModal,
                 /* should never change */ backend,
                 /* should never change */ rawUser,
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/permissionSelector.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/permissionSelector.tsx
index cc34de38809..92827def19e 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/permissionSelector.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/permissionSelector.tsx
@@ -30,7 +30,7 @@ const PERMISSIONS = [
 /** Props for a {@link PermissionSelector}. */
 export interface PermissionSelectorProps {
     /** If this prop changes, the internal state will be updated too. */
-    initialPermissions?: Set<backend.PermissionAction> | null
+    initialPermissions?: backend.PermissionAction[] | null
     className?: string
     permissionClassName?: string
     onChange: (permissions: Set<backend.PermissionAction>) => void
@@ -38,22 +38,18 @@ export interface PermissionSelectorProps {
 
 /** A horizontal selector for all possible permissions. */
 function PermissionSelector(props: PermissionSelectorProps) {
-    const {
-        initialPermissions: rawInitialPermissions,
-        className,
-        permissionClassName,
-        onChange,
-    } = props
+    const { initialPermissions, className, permissionClassName, onChange } = props
     const [permissions, setPermissions] = React.useState(() => new Set<backend.PermissionAction>())
 
     React.useEffect(() => {
-        if (rawInitialPermissions != null) {
-            setPermissions(rawInitialPermissions)
-            onChange(rawInitialPermissions)
+        if (initialPermissions != null) {
+            const initialPermissionsSet = new Set(initialPermissions)
+            setPermissions(initialPermissionsSet)
+            onChange(initialPermissionsSet)
         }
         // `onChange` is NOT a dependency.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rawInitialPermissions])
+    }, [initialPermissions])
 
     return (
         <div className={`flex justify-items-center ${className ?? ''}`}>
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx
deleted file mode 100644
index 32a9a406cc5..00000000000
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectActionButton.tsx
+++ /dev/null
@@ -1,424 +0,0 @@
-/** @file An interactive button displaying the status of a project. */
-import * as React from 'react'
-import toast from 'react-hot-toast'
-
-import ArrowUpIcon from 'enso-assets/arrow_up.svg'
-import PlayIcon from 'enso-assets/play.svg'
-
-import * as backendModule from '../backend'
-import * as backendProvider from '../../providers/backend'
-import * as localBackend from '../localBackend'
-import * as modalProvider from '../../providers/modal'
-import * as svg from '../../components/svg'
-
-import * as spinner from './spinner'
-
-// =============
-// === Types ===
-// =============
-
-/** Data associated with a project, used for rendering.
- * FIXME[sb]: This is a hack that is required because each row does not carry its own extra state.
- * It will be obsoleted by the implementation in https://github.com/enso-org/enso/pull/6546. */
-export interface ProjectData {
-    isRunning: boolean
-}
-
-/** Possible types of project state change. */
-export enum ProjectEventType {
-    open = 'open',
-    cancelOpeningAll = 'cancelOpeningAll',
-}
-
-/** Properties common to all project state change events. */
-interface ProjectBaseEvent<Type extends ProjectEventType> {
-    type: Type
-}
-
-/** Requests the specified project to be opened. */
-export interface ProjectOpenEvent extends ProjectBaseEvent<ProjectEventType.open> {
-    /** This must be a name because it may be specified by name on the command line.
-     * Note that this will not work properly with the cloud backend if there are multiple projects
-     * with the same name. */
-    projectId: backendModule.ProjectId
-    onSpinnerStateChange: ((state: spinner.SpinnerState) => void) | null
-}
-
-/** Requests the specified project to be opened. */
-export interface ProjectCancelOpeningAllEvent
-    extends ProjectBaseEvent<ProjectEventType.cancelOpeningAll> {}
-
-/** Every possible type of project event. */
-export type ProjectEvent = ProjectCancelOpeningAllEvent | ProjectOpenEvent
-
-// =================
-// === Constants ===
-// =================
-
-/** The default {@link ProjectData} associated with a {@link backendModule.Project}. */
-export const DEFAULT_PROJECT_DATA: ProjectData = Object.freeze({
-    isRunning: false,
-})
-const LOADING_MESSAGE =
-    'Your environment is being created. It will take some time, please be patient.'
-/** The interval between requests checking whether the IDE is ready. */
-const CHECK_STATUS_INTERVAL_MS = 5000
-/** The interval between requests checking whether the VM is ready. */
-const CHECK_RESOURCES_INTERVAL_MS = 1000
-/** The corresponding {@link SpinnerState} for each {@link backendModule.ProjectState},
- * when using the remote backend. */
-const REMOTE_SPINNER_STATE: Record<backendModule.ProjectState, spinner.SpinnerState> = {
-    [backendModule.ProjectState.closed]: spinner.SpinnerState.initial,
-    [backendModule.ProjectState.created]: spinner.SpinnerState.initial,
-    [backendModule.ProjectState.new]: spinner.SpinnerState.initial,
-    [backendModule.ProjectState.openInProgress]: spinner.SpinnerState.loadingSlow,
-    [backendModule.ProjectState.opened]: spinner.SpinnerState.done,
-}
-/** The corresponding {@link SpinnerState} for each {@link backendModule.ProjectState},
- * when using the local backend. */
-const LOCAL_SPINNER_STATE: Record<backendModule.ProjectState, spinner.SpinnerState> = {
-    [backendModule.ProjectState.closed]: spinner.SpinnerState.initial,
-    [backendModule.ProjectState.created]: spinner.SpinnerState.initial,
-    [backendModule.ProjectState.new]: spinner.SpinnerState.initial,
-    [backendModule.ProjectState.openInProgress]: spinner.SpinnerState.loadingMedium,
-    [backendModule.ProjectState.opened]: spinner.SpinnerState.done,
-}
-
-// =================
-// === Component ===
-// =================
-
-/** Props for a {@link ProjectActionButton}. */
-export interface ProjectActionButtonProps {
-    project: backendModule.Asset<backendModule.AssetType.project>
-    projectData: ProjectData
-    setProjectData: React.Dispatch<React.SetStateAction<ProjectData>>
-    appRunner: AppRunner | null
-    event: ProjectEvent | null
-    /** Called when the project is opened via the {@link ProjectActionButton}. */
-    doOpenManually: () => void
-    onClose: () => void
-    openIde: () => void
-    doRefresh: () => void
-}
-
-/** An interactive button displaying the status of a project. */
-function ProjectActionButton(props: ProjectActionButtonProps) {
-    const {
-        project,
-        setProjectData,
-        event,
-        appRunner,
-        doOpenManually,
-        onClose,
-        openIde,
-        doRefresh,
-    } = props
-    const { backend } = backendProvider.useBackend()
-    const { unsetModal } = modalProvider.useSetModal()
-
-    const shouldCheckIfActuallyOpen =
-        backend.type === backendModule.BackendType.remote &&
-        (project.projectState.type === backendModule.ProjectState.opened ||
-            project.projectState.type === backendModule.ProjectState.openInProgress)
-
-    const [state, setState] = React.useState(() => {
-        if (shouldCheckIfActuallyOpen) {
-            return backendModule.ProjectState.created
-        } else {
-            return project.projectState.type
-        }
-    })
-    const [isCheckingStatus, setIsCheckingStatus] = React.useState(false)
-    const [isCheckingResources, setIsCheckingResources] = React.useState(false)
-    const [spinnerState, setSpinnerState] = React.useState(REMOTE_SPINNER_STATE[state])
-    const [onSpinnerStateChange, setOnSpinnerStateChange] = React.useState<
-        ((state: spinner.SpinnerState | null) => void) | null
-    >(null)
-    const [shouldOpenWhenReady, setShouldOpenWhenReady] = React.useState(false)
-    const [toastId, setToastId] = React.useState<string | null>(null)
-
-    React.useEffect(() => {
-        if (toastId != null) {
-            return () => {
-                toast.dismiss(toastId)
-            }
-        } else {
-            return
-        }
-    }, [toastId])
-
-    React.useEffect(() => {
-        // Ensure that the previous spinner state is visible for at least one frame.
-        requestAnimationFrame(() => {
-            const newSpinnerState =
-                backend.type === backendModule.BackendType.remote
-                    ? REMOTE_SPINNER_STATE[state]
-                    : LOCAL_SPINNER_STATE[state]
-            setSpinnerState(newSpinnerState)
-            onSpinnerStateChange?.(
-                state === backendModule.ProjectState.closed ? null : newSpinnerState
-            )
-        })
-    }, [state, onSpinnerStateChange, backend.type])
-
-    React.useEffect(() => {
-        onSpinnerStateChange?.(spinner.SpinnerState.initial)
-    }, [onSpinnerStateChange])
-
-    React.useEffect(() => {
-        if (toastId != null && state !== backendModule.ProjectState.openInProgress) {
-            toast.dismiss(toastId)
-        }
-    }, [state, toastId])
-
-    React.useEffect(() => {
-        if (shouldCheckIfActuallyOpen) {
-            setState(backendModule.ProjectState.openInProgress)
-            setIsCheckingResources(true)
-        }
-    }, [shouldCheckIfActuallyOpen])
-
-    const openProject = React.useCallback(async () => {
-        setState(backendModule.ProjectState.openInProgress)
-        try {
-            switch (backend.type) {
-                case backendModule.BackendType.remote:
-                    setToastId(toast.loading(LOADING_MESSAGE))
-                    await backend.openProject(project.id)
-                    setProjectData(oldProjectData => ({ ...oldProjectData, isRunning: true }))
-                    doRefresh()
-                    setIsCheckingStatus(true)
-                    break
-                case backendModule.BackendType.local:
-                    await backend.openProject(project.id)
-                    setProjectData(oldProjectData => ({ ...oldProjectData, isRunning: true }))
-                    setState(oldState => {
-                        if (oldState === backendModule.ProjectState.openInProgress) {
-                            setTimeout(() => {
-                                doRefresh()
-                            }, 0)
-                            return backendModule.ProjectState.opened
-                        } else {
-                            return oldState
-                        }
-                    })
-                    break
-            }
-        } catch {
-            setIsCheckingStatus(false)
-            setIsCheckingResources(false)
-            toast.error(`Error opening project '${project.title}'.`)
-            setState(backendModule.ProjectState.closed)
-        }
-    }, [backend, doRefresh, project.id, project.title, setProjectData])
-
-    React.useEffect(() => {
-        if (event != null) {
-            switch (event.type) {
-                case ProjectEventType.open: {
-                    if (event.projectId !== project.id) {
-                        setShouldOpenWhenReady(false)
-                        if (onSpinnerStateChange === event.onSpinnerStateChange) {
-                            setOnSpinnerStateChange(null)
-                        }
-                    } else {
-                        setShouldOpenWhenReady(true)
-                        setOnSpinnerStateChange(() => event.onSpinnerStateChange)
-                        void openProject()
-                    }
-                    break
-                }
-                case ProjectEventType.cancelOpeningAll: {
-                    setShouldOpenWhenReady(false)
-                    onSpinnerStateChange?.(null)
-                    setOnSpinnerStateChange(null)
-                    break
-                }
-            }
-        }
-        // This effect MUST run if and only if `event` changes.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [event])
-
-    React.useEffect(() => {
-        if (shouldOpenWhenReady && state === backendModule.ProjectState.opened) {
-            openIde()
-            setShouldOpenWhenReady(false)
-        }
-    }, [openIde, shouldOpenWhenReady, state])
-
-    React.useEffect(() => {
-        if (
-            backend.type === backendModule.BackendType.local &&
-            project.id !== localBackend.LocalBackend.currentlyOpeningProjectId
-        ) {
-            setState(backendModule.ProjectState.closed)
-        }
-        // `localBackend.LocalBackend.currentlyOpeningProjectId` is a mutable outer scope value.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [project, state, backend.type, localBackend.LocalBackend.currentlyOpeningProjectId])
-
-    React.useEffect(() => {
-        if (!isCheckingStatus) {
-            return
-        } else {
-            let handle: number | null = null
-            let continuePolling = true
-            let previousTimestamp = 0
-            const checkProjectStatus = async () => {
-                try {
-                    const response = await backend.getProjectDetails(project.id)
-                    handle = null
-                    if (
-                        continuePolling &&
-                        response.state.type === backendModule.ProjectState.opened
-                    ) {
-                        continuePolling = false
-                        setIsCheckingStatus(false)
-                        setIsCheckingResources(true)
-                    }
-                } finally {
-                    if (continuePolling) {
-                        const nowTimestamp = Number(new Date())
-                        const delay = CHECK_STATUS_INTERVAL_MS - (nowTimestamp - previousTimestamp)
-                        previousTimestamp = nowTimestamp
-                        handle = window.setTimeout(
-                            () => void checkProjectStatus(),
-                            Math.max(0, delay)
-                        )
-                    }
-                }
-            }
-            void checkProjectStatus()
-            return () => {
-                continuePolling = false
-                if (handle != null) {
-                    clearTimeout(handle)
-                }
-            }
-        }
-    }, [backend, isCheckingStatus, project.id])
-
-    React.useEffect(() => {
-        if (!isCheckingResources) {
-            return
-        } else {
-            let handle: number | null = null
-            let continuePolling = true
-            let previousTimestamp = 0
-            const checkProjectResources = async () => {
-                if (backend.type === backendModule.BackendType.local) {
-                    setState(backendModule.ProjectState.opened)
-                    setIsCheckingResources(false)
-                } else {
-                    try {
-                        // This call will error if the VM is not ready yet.
-                        await backend.checkResources(project.id)
-                        handle = null
-                        if (continuePolling) {
-                            continuePolling = false
-                            setState(backendModule.ProjectState.opened)
-                            setIsCheckingResources(false)
-                        }
-                    } catch {
-                        if (continuePolling) {
-                            const nowTimestamp = Number(new Date())
-                            const delay =
-                                CHECK_RESOURCES_INTERVAL_MS - (nowTimestamp - previousTimestamp)
-                            previousTimestamp = nowTimestamp
-                            handle = window.setTimeout(
-                                () => void checkProjectResources(),
-                                Math.max(0, delay)
-                            )
-                        }
-                    }
-                }
-            }
-            void checkProjectResources()
-            return () => {
-                continuePolling = false
-                if (handle != null) {
-                    clearTimeout(handle)
-                }
-            }
-        }
-    }, [backend, isCheckingResources, project.id])
-
-    const closeProject = async () => {
-        onClose()
-        setShouldOpenWhenReady(false)
-        setState(backendModule.ProjectState.closed)
-        onSpinnerStateChange?.(null)
-        setOnSpinnerStateChange(null)
-        appRunner?.stopApp()
-        setIsCheckingStatus(false)
-        setIsCheckingResources(false)
-        try {
-            await backend.closeProject(project.id)
-        } finally {
-            // This is not 100% correct, but it is better than never setting `isRunning` to `false`,
-            // which would prevent the project from ever being deleted.
-            setProjectData(oldProjectData => ({ ...oldProjectData, isRunning: false }))
-        }
-    }
-
-    switch (state) {
-        case null:
-        case backendModule.ProjectState.created:
-        case backendModule.ProjectState.new:
-        case backendModule.ProjectState.closed:
-            return (
-                <button
-                    className="w-6"
-                    onClick={clickEvent => {
-                        clickEvent.stopPropagation()
-                        unsetModal()
-                        doOpenManually()
-                    }}
-                >
-                    <img src={PlayIcon} />
-                </button>
-            )
-        case backendModule.ProjectState.openInProgress:
-            return (
-                <button
-                    className="w-6"
-                    onClick={async clickEvent => {
-                        clickEvent.stopPropagation()
-                        unsetModal()
-                        await closeProject()
-                    }}
-                >
-                    <svg.StopIcon className={spinner.SPINNER_CSS_CLASSES[spinnerState]} />
-                </button>
-            )
-        case backendModule.ProjectState.opened:
-            return (
-                <>
-                    <button
-                        className="w-6"
-                        onClick={async clickEvent => {
-                            clickEvent.stopPropagation()
-                            unsetModal()
-                            await closeProject()
-                        }}
-                    >
-                        <svg.StopIcon className={spinner.SPINNER_CSS_CLASSES[spinnerState]} />
-                    </button>
-                    <button
-                        className="w-6"
-                        onClick={clickEvent => {
-                            clickEvent.stopPropagation()
-                            unsetModal()
-                            openIde()
-                        }}
-                    >
-                        <img src={ArrowUpIcon} />
-                    </button>
-                </>
-            )
-    }
-}
-
-export default ProjectActionButton
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectsTable.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectsTable.tsx
new file mode 100644
index 00000000000..f7c277c7a3c
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/projectsTable.tsx
@@ -0,0 +1,1072 @@
+/** @file Table displaying a list of projects. */
+import * as React from 'react'
+import toast from 'react-hot-toast'
+
+import ArrowUpIcon from 'enso-assets/arrow_up.svg'
+import PlayIcon from 'enso-assets/play.svg'
+import PlusIcon from 'enso-assets/plus.svg'
+
+import * as authProvider from '../../authentication/providers/auth'
+import * as backendModule from '../backend'
+import * as backendProvider from '../../providers/backend'
+import * as columnModule from '../column'
+import * as dateTime from '../dateTime'
+import * as errorModule from '../../error'
+import * as eventModule from '../event'
+import * as hooks from '../../hooks'
+import * as loggerProvider from '../../providers/logger'
+import * as modalProvider from '../../providers/modal'
+import * as permissions from '../permissions'
+import * as presence from '../presence'
+import * as projectEventModule from '../events/projectEvent'
+import * as projectListEventModule from '../events/projectListEvent'
+import * as shortcuts from '../shortcuts'
+import * as string from '../../string'
+import * as svg from '../../components/svg'
+import * as uniqueString from '../../uniqueString'
+import * as validation from '../validation'
+
+import * as spinner from './spinner'
+import * as tableColumn from './tableColumn'
+import TableRow, * as tableRow from './tableRow'
+import ConfirmDeleteModal from './confirmDeleteModal'
+import ContextMenu from './contextMenu'
+import ContextMenuEntry from './contextMenuEntry'
+import EditableSpan from './editableSpan'
+import Table from './table'
+
+// =============
+// === Types ===
+// =============
+
+/** The state of the spinner. It should go from initial, to loading, to done. */
+enum SpinnerState {
+    initial = 'initial',
+    loading = 'loading',
+    done = 'done',
+}
+
+/** The state of checking whether a project is ready. It should go from not checking, to checking
+ * status, to checking resources, to done. */
+enum CheckState {
+    /** The project is not open. */
+    notChecking = 'not-checking',
+    /** A local project is being opened. There are no status and resource checks; the state is
+     * set to done when the RPC call finishes. */
+    localProject = 'local-project',
+    /** Status is not yet `ProjectState.opened`. */
+    checkingStatus = 'checking-status',
+    /** `backend.checkResources` calls are still failing. */
+    checkingResources = 'checking-resources',
+    /** The project is open. */
+    done = 'done',
+}
+
+// =================
+// === Constants ===
+// =================
+
+/** The user-facing name of this asset type. */
+const ASSET_TYPE_NAME = 'project'
+/** The user-facing plural name of this asset type. */
+const ASSET_TYPE_NAME_PLURAL = 'projects'
+// 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)
+/** Placeholder row. */
+const PLACEHOLDER = (
+    <span className="opacity-75">
+        You have no projects yet. Go ahead and create one using the form above.
+    </span>
+)
+
+// === ProjectActionButton constants ===
+
+const LOADING_MESSAGE =
+    'Your environment is being created. It will take some time, please be patient.'
+/** The interval between requests checking whether the IDE is ready. */
+const CHECK_STATUS_INTERVAL_MS = 5000
+/** The interval between requests checking whether the VM is ready. */
+const CHECK_RESOURCES_INTERVAL_MS = 1000
+/** The corresponding {@link SpinnerState} for each {@link backendModule.ProjectState},
+ * when using the remote backend. */
+const REMOTE_SPINNER_STATE: Record<backendModule.ProjectState, spinner.SpinnerState> = {
+    [backendModule.ProjectState.closed]: spinner.SpinnerState.initial,
+    [backendModule.ProjectState.created]: spinner.SpinnerState.initial,
+    [backendModule.ProjectState.new]: spinner.SpinnerState.initial,
+    [backendModule.ProjectState.openInProgress]: spinner.SpinnerState.loadingSlow,
+    [backendModule.ProjectState.opened]: spinner.SpinnerState.done,
+}
+/** The corresponding {@link SpinnerState} for each {@link backendModule.ProjectState},
+ * when using the local backend. */
+const LOCAL_SPINNER_STATE: Record<backendModule.ProjectState, spinner.SpinnerState> = {
+    [backendModule.ProjectState.closed]: spinner.SpinnerState.initial,
+    [backendModule.ProjectState.created]: spinner.SpinnerState.initial,
+    [backendModule.ProjectState.new]: spinner.SpinnerState.initial,
+    [backendModule.ProjectState.openInProgress]: spinner.SpinnerState.loadingMedium,
+    [backendModule.ProjectState.opened]: spinner.SpinnerState.done,
+}
+
+// ===========================
+// === ProjectActionButton ===
+// ===========================
+
+/** Props for a {@link ProjectActionButton}. */
+export interface ProjectActionButtonProps {
+    project: backendModule.ProjectAsset
+    rowState: ProjectRowState
+    setRowState: React.Dispatch<React.SetStateAction<ProjectRowState>>
+    projectEvent: projectEventModule.ProjectEvent | null
+    /** Called when the project is opened via the {@link ProjectActionButton}. */
+    doOpenManually: (projectId: backendModule.ProjectId) => void
+    onClose: () => void
+    appRunner: AppRunner | null
+    openIde: () => void
+}
+
+/** An interactive button displaying the status of a project. */
+function ProjectActionButton(props: ProjectActionButtonProps) {
+    const {
+        project,
+        rowState,
+        setRowState,
+        projectEvent,
+        appRunner,
+        doOpenManually,
+        onClose,
+        openIde,
+    } = props
+    const { backend } = backendProvider.useBackend()
+    const { unsetModal } = modalProvider.useSetModal()
+
+    const shouldCheckIfActuallyOpen =
+        backend.type === backendModule.BackendType.remote &&
+        (project.projectState.type === backendModule.ProjectState.opened ||
+            project.projectState.type === backendModule.ProjectState.openInProgress)
+
+    const [state, setState] = React.useState(() => {
+        if (shouldCheckIfActuallyOpen) {
+            return backendModule.ProjectState.created
+        } else {
+            return project.projectState.type
+        }
+    })
+    const [checkState, setCheckState] = React.useState(CheckState.notChecking)
+    const [spinnerState, setSpinnerState] = React.useState(REMOTE_SPINNER_STATE[state])
+    const [onSpinnerStateChange, setOnSpinnerStateChange] = React.useState<
+        ((state: spinner.SpinnerState | null) => void) | null
+    >(null)
+    const [shouldOpenWhenReady, setShouldOpenWhenReady] = React.useState(false)
+    const [toastId, setToastId] = React.useState<string | null>(null)
+
+    const openProject = React.useCallback(async () => {
+        setState(backendModule.ProjectState.openInProgress)
+        try {
+            switch (backend.type) {
+                case backendModule.BackendType.remote:
+                    setToastId(toast.loading(LOADING_MESSAGE))
+                    setRowState({ ...rowState, isRunning: true })
+                    await backend.openProject(project.id, null, project.title)
+                    setCheckState(CheckState.checkingStatus)
+                    break
+                case backendModule.BackendType.local:
+                    setCheckState(CheckState.localProject)
+                    setRowState({ ...rowState, isRunning: true })
+                    await backend.openProject(project.id, null, project.title)
+                    setCheckState(oldCheckState => {
+                        if (oldCheckState === CheckState.localProject) {
+                            setState(backendModule.ProjectState.opened)
+                        }
+                        return oldCheckState
+                    })
+                    break
+            }
+        } catch (error) {
+            setCheckState(CheckState.notChecking)
+            toast.error(
+                `Error opening project '${project.title}': ${
+                    errorModule.tryGetMessage(error) ?? 'unknown error'
+                }.`
+            )
+            setState(backendModule.ProjectState.closed)
+        }
+    }, [backend, project.id, project.title, rowState, /* should never change */ setRowState])
+
+    React.useEffect(() => {
+        if (toastId != null) {
+            return () => {
+                toast.dismiss(toastId)
+            }
+        } else {
+            return
+        }
+    }, [toastId])
+
+    React.useEffect(() => {
+        // Ensure that the previous spinner state is visible for at least one frame.
+        requestAnimationFrame(() => {
+            const newSpinnerState =
+                backend.type === backendModule.BackendType.remote
+                    ? REMOTE_SPINNER_STATE[state]
+                    : LOCAL_SPINNER_STATE[state]
+            setSpinnerState(newSpinnerState)
+            onSpinnerStateChange?.(
+                state === backendModule.ProjectState.closed ? null : newSpinnerState
+            )
+        })
+    }, [state, onSpinnerStateChange, backend.type])
+
+    React.useEffect(() => {
+        onSpinnerStateChange?.(spinner.SpinnerState.initial)
+    }, [onSpinnerStateChange])
+
+    React.useEffect(() => {
+        if (toastId != null && state !== backendModule.ProjectState.openInProgress) {
+            toast.dismiss(toastId)
+        }
+    }, [state, toastId])
+
+    React.useEffect(() => {
+        if (shouldCheckIfActuallyOpen) {
+            setState(backendModule.ProjectState.openInProgress)
+            setCheckState(CheckState.checkingResources)
+        }
+    }, [shouldCheckIfActuallyOpen])
+
+    hooks.useEventHandler(projectEvent, event => {
+        switch (event.type) {
+            default: {
+                // Ignore; all other events are handled by `ProjectRow`.
+                break
+            }
+            case projectEventModule.ProjectEventType.open: {
+                if (event.projectId !== project.id) {
+                    setShouldOpenWhenReady(false)
+                } else {
+                    setShouldOpenWhenReady(true)
+                    void openProject()
+                }
+                break
+            }
+            case projectEventModule.ProjectEventType.cancelOpeningAll: {
+                // `CheckState` should not be set to `notChecking`, as there is currently no way
+                // to actually cancel an open action. Instead, the project should not be opened
+                // automatically.
+                setShouldOpenWhenReady(false)
+                onSpinnerStateChange?.(null)
+                setOnSpinnerStateChange(null)
+                break
+            }
+            case projectEventModule.ProjectEventType.create: {
+                if (event.placeholderId === project.id) {
+                    setState(backendModule.ProjectState.openInProgress)
+                    setOnSpinnerStateChange(() => event.onSpinnerStateChange)
+                } else if (event.onSpinnerStateChange === onSpinnerStateChange) {
+                    setOnSpinnerStateChange(null)
+                }
+                break
+            }
+            case projectEventModule.ProjectEventType.showAsOpening: {
+                if (event.projectId === project.id) {
+                    setState(backendModule.ProjectState.openInProgress)
+                }
+                break
+            }
+        }
+    })
+
+    React.useEffect(() => {
+        if (shouldOpenWhenReady && state === backendModule.ProjectState.opened) {
+            openIde()
+            setShouldOpenWhenReady(false)
+        }
+    }, [shouldOpenWhenReady, state, openIde])
+
+    React.useEffect(() => {
+        switch (checkState) {
+            case CheckState.notChecking:
+            case CheckState.localProject:
+            case CheckState.done: {
+                return
+            }
+            case CheckState.checkingStatus: {
+                let handle: number | null = null
+                let continuePolling = true
+                let previousTimestamp = 0
+                const checkProjectStatus = async () => {
+                    try {
+                        const response = await backend.getProjectDetails(project.id, project.title)
+                        handle = null
+                        if (
+                            continuePolling &&
+                            response.state.type === backendModule.ProjectState.opened
+                        ) {
+                            continuePolling = false
+                            setCheckState(CheckState.checkingResources)
+                        }
+                    } finally {
+                        if (continuePolling) {
+                            const nowTimestamp = Number(new Date())
+                            const delay =
+                                CHECK_STATUS_INTERVAL_MS - (nowTimestamp - previousTimestamp)
+                            previousTimestamp = nowTimestamp
+                            handle = window.setTimeout(
+                                () => void checkProjectStatus(),
+                                Math.max(0, delay)
+                            )
+                        }
+                    }
+                }
+                void checkProjectStatus()
+                return () => {
+                    continuePolling = false
+                    if (handle != null) {
+                        window.clearTimeout(handle)
+                    }
+                }
+            }
+            case CheckState.checkingResources: {
+                let handle: number | null = null
+                let continuePolling = true
+                let previousTimestamp = 0
+                const checkProjectResources = async () => {
+                    if (backend.type === backendModule.BackendType.local) {
+                        // This should never happen, but still should be handled.
+                        setState(backendModule.ProjectState.opened)
+                        setCheckState(CheckState.done)
+                    } else {
+                        try {
+                            // This call will error if the VM is not ready yet.
+                            await backend.checkResources(project.id, project.title)
+                            handle = null
+                            if (continuePolling) {
+                                continuePolling = false
+                                setState(backendModule.ProjectState.opened)
+                                setCheckState(CheckState.done)
+                            }
+                        } catch {
+                            if (continuePolling) {
+                                const nowTimestamp = Number(new Date())
+                                const delay =
+                                    CHECK_RESOURCES_INTERVAL_MS - (nowTimestamp - previousTimestamp)
+                                previousTimestamp = nowTimestamp
+                                handle = window.setTimeout(
+                                    () => void checkProjectResources(),
+                                    Math.max(0, delay)
+                                )
+                            }
+                        }
+                    }
+                }
+                void checkProjectResources()
+                return () => {
+                    continuePolling = false
+                    if (handle != null) {
+                        window.clearTimeout(handle)
+                    }
+                }
+            }
+        }
+    }, [checkState, project.id, project.title, backend])
+
+    const closeProject = async () => {
+        onClose()
+        setShouldOpenWhenReady(false)
+        setState(backendModule.ProjectState.closed)
+        onSpinnerStateChange?.(null)
+        setOnSpinnerStateChange(null)
+        appRunner?.stopApp()
+        setCheckState(CheckState.notChecking)
+        try {
+            await backend.closeProject(project.id, project.title)
+        } finally {
+            // This is not 100% correct, but it is better than never setting `isRunning` to `false`,
+            // which would prevent the project from ever being deleted.
+            setRowState({ ...rowState, isRunning: false })
+        }
+    }
+
+    switch (state) {
+        case null:
+        case backendModule.ProjectState.created:
+        case backendModule.ProjectState.new:
+        case backendModule.ProjectState.closed:
+            return (
+                <button
+                    className="w-6"
+                    onClick={clickEvent => {
+                        clickEvent.stopPropagation()
+                        unsetModal()
+                        doOpenManually(project.id)
+                    }}
+                >
+                    <img src={PlayIcon} />
+                </button>
+            )
+        case backendModule.ProjectState.openInProgress:
+            return (
+                <button
+                    className="w-6"
+                    onClick={async clickEvent => {
+                        clickEvent.stopPropagation()
+                        unsetModal()
+                        await closeProject()
+                    }}
+                >
+                    <svg.StopIcon className={spinner.SPINNER_CSS_CLASSES[spinnerState]} />
+                </button>
+            )
+        case backendModule.ProjectState.opened:
+            return (
+                <>
+                    <button
+                        className="w-6"
+                        onClick={async clickEvent => {
+                            clickEvent.stopPropagation()
+                            unsetModal()
+                            await closeProject()
+                        }}
+                    >
+                        <svg.StopIcon className={spinner.SPINNER_CSS_CLASSES[spinnerState]} />
+                    </button>
+                    <button
+                        className="w-6"
+                        onClick={clickEvent => {
+                            clickEvent.stopPropagation()
+                            unsetModal()
+                            openIde()
+                        }}
+                    >
+                        <img src={ArrowUpIcon} />
+                    </button>
+                </>
+            )
+    }
+}
+
+// ==========================
+// === ProjectNameHeading ===
+// ==========================
+
+/** Props for a {@link ProjectNameHeading}. */
+interface InternalProjectNameHeadingProps {
+    doCreateProject: () => void
+}
+
+/** The column header for the "name" column for the table of project assets. */
+function ProjectNameHeading(props: InternalProjectNameHeadingProps) {
+    const { doCreateProject } = props
+
+    const onClick = (event: React.MouseEvent) => {
+        event.stopPropagation()
+        doCreateProject()
+    }
+
+    return (
+        <div className="inline-flex">
+            {string.capitalizeFirst(ASSET_TYPE_NAME_PLURAL)}
+            <button className="mx-1" onClick={onClick}>
+                <img src={PlusIcon} />
+            </button>
+        </div>
+    )
+}
+
+// ===================
+// === ProjectName ===
+// ===================
+
+/** Props for a {@link ProjectName}. */
+interface InternalProjectNameProps
+    extends tableColumn.TableColumnProps<
+        backendModule.ProjectAsset,
+        ProjectsTableState,
+        ProjectRowState
+    > {}
+
+/** The icon and name of a specific project asset. */
+function ProjectName(props: InternalProjectNameProps) {
+    const {
+        item,
+        setItem,
+        selected,
+        rowState,
+        setRowState,
+        state: {
+            appRunner,
+            projectEvent,
+            dispatchProjectEvent,
+            doOpenManually,
+            doOpenIde,
+            doCloseIde,
+        },
+    } = props
+    const logger = loggerProvider.useLogger()
+    const { backend } = backendProvider.useBackend()
+
+    const doRename = async (newName: string) => {
+        try {
+            await backend.projectUpdate(
+                item.id,
+                {
+                    ami: null,
+                    ideVersion: null,
+                    projectName: newName,
+                },
+                item.title
+            )
+            return
+        } catch (error) {
+            const message = `Unable to rename project: ${
+                errorModule.tryGetMessage(error) ?? 'unknown error.'
+            }`
+            toast.error(message)
+            logger.error(message)
+            throw error
+        }
+    }
+
+    return (
+        <div
+            className="flex text-left items-center align-middle whitespace-nowrap"
+            onClick={event => {
+                if (!rowState.isEditingName && eventModule.isDoubleClick(event)) {
+                    // It is a double click; open the project.
+                    dispatchProjectEvent({
+                        type: projectEventModule.ProjectEventType.open,
+                        projectId: item.id,
+                    })
+                } else if (
+                    eventModule.isSingleClick(event) &&
+                    (selected ||
+                        shortcuts.SHORTCUT_REGISTRY.matchesMouseAction(
+                            shortcuts.MouseAction.editName,
+                            event
+                        ))
+                ) {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: true,
+                    }))
+                }
+            }}
+        >
+            <ProjectActionButton
+                project={item}
+                rowState={rowState}
+                setRowState={setRowState}
+                projectEvent={projectEvent}
+                doOpenManually={doOpenManually}
+                appRunner={appRunner}
+                openIde={() => {
+                    doOpenIde(item)
+                }}
+                onClose={doCloseIde}
+            />
+            <EditableSpan
+                editable={rowState.isEditingName}
+                onSubmit={async newTitle => {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: false,
+                    }))
+                    if (newTitle !== item.title) {
+                        const oldTitle = item.title
+                        setItem(oldItem => ({ ...oldItem, title: newTitle }))
+                        try {
+                            await doRename(newTitle)
+                        } catch {
+                            setItem(oldItem => ({ ...oldItem, title: oldTitle }))
+                        }
+                    }
+                }}
+                onCancel={() => {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: false,
+                    }))
+                }}
+                {...(backend.type === backendModule.BackendType.local
+                    ? {
+                          inputPattern: validation.LOCAL_PROJECT_NAME_PATTERN,
+                          inputTitle: validation.LOCAL_PROJECT_NAME_TITLE,
+                      }
+                    : {})}
+                className={`bg-transparent grow px-2 ${
+                    rowState.isEditingName ? 'cursor-text' : 'cursor-pointer'
+                }`}
+            >
+                {item.title}
+            </EditableSpan>
+        </div>
+    )
+}
+
+// =============================
+// === ProjectRowContextMenu ===
+// =============================
+
+/** Props for a {@link ProjectRowContextMenu}. */
+interface InternalProjectRowContextMenuProps {
+    innerProps: tableRow.TableRowInnerProps<
+        backendModule.ProjectAsset,
+        backendModule.ProjectId,
+        ProjectRowState
+    >
+    event: React.MouseEvent
+    dispatchProjectEvent: (projectListEvent: projectEventModule.ProjectEvent) => void
+    doDelete: () => Promise<void>
+}
+
+/** The context menu for a row of a {@link ProjectsTable}. */
+function ProjectRowContextMenu(props: InternalProjectRowContextMenuProps) {
+    const {
+        innerProps: { item, rowState, setRowState },
+        event,
+        dispatchProjectEvent,
+        doDelete,
+    } = props
+    const { backend } = backendProvider.useBackend()
+    const { setModal, unsetModal } = modalProvider.useSetModal()
+
+    const isDeleteDisabled = backend.type === backendModule.BackendType.local && rowState.isRunning
+    const doOpenForEditing = () => {
+        unsetModal()
+        dispatchProjectEvent({
+            type: projectEventModule.ProjectEventType.open,
+            projectId: item.id,
+        })
+    }
+    const doRename = () => {
+        setRowState(oldRowState => ({
+            ...oldRowState,
+            isEditingName: true,
+        }))
+        unsetModal()
+    }
+    return (
+        <ContextMenu key={item.id} event={event}>
+            <ContextMenuEntry onClick={doOpenForEditing}>Open for editing</ContextMenuEntry>
+            {/* TODO[sb]: Implement once backend support is in place.
+              * https://github.com/enso-org/cloud-v2/issues/506
+            backend.type !== backendModule.BackendType.local && (
+                <ContextMenuEntry disabled onClick={doOpenAsFolder}>
+                    Open as folder
+                </ContextMenuEntry>
+            )*/}
+            <ContextMenuEntry onClick={doRename}>Rename</ContextMenuEntry>
+            <ContextMenuEntry
+                disabled={isDeleteDisabled}
+                {...(isDeleteDisabled
+                    ? {
+                          title: 'A running local project cannot be removed.',
+                      }
+                    : {})}
+                onClick={() => {
+                    setModal(
+                        <ConfirmDeleteModal
+                            description={`the ${ASSET_TYPE_NAME} '${item.title}'`}
+                            doDelete={doDelete}
+                        />
+                    )
+                }}
+            >
+                <span className="text-red-700">Delete</span>
+            </ContextMenuEntry>
+        </ContextMenu>
+    )
+}
+
+// ==================
+// === ProjectRow ===
+// ==================
+
+/** A row in a {@link ProjectsTable}. */
+function ProjectRow(
+    props: tableRow.TableRowProps<
+        backendModule.ProjectAsset,
+        backendModule.ProjectId,
+        ProjectsTableState,
+        ProjectRowState
+    >
+) {
+    const {
+        keyProp: key,
+        item: rawItem,
+        state: {
+            projectEvent,
+            dispatchProjectEvent,
+            dispatchProjectListEvent,
+            markItemAsHidden,
+            markItemAsVisible,
+        },
+    } = props
+    const logger = loggerProvider.useLogger()
+    const { backend } = backendProvider.useBackend()
+    const { setModal } = modalProvider.useSetModal()
+    const [item, setItem] = React.useState(rawItem)
+    const [status, setStatus] = React.useState(presence.Presence.present)
+
+    React.useEffect(() => {
+        setItem(rawItem)
+    }, [rawItem])
+
+    const doDelete = async () => {
+        setStatus(presence.Presence.deleting)
+        markItemAsHidden(key)
+        try {
+            await backend.deleteProject(item.id, item.title)
+            dispatchProjectListEvent({
+                type: projectListEventModule.ProjectListEventType.delete,
+                projectId: key,
+            })
+        } catch (error) {
+            setStatus(presence.Presence.present)
+            markItemAsVisible(key)
+            const message = errorModule.tryGetMessage(error) ?? 'Unable to delete project.'
+            toast.error(message)
+            logger.error(message)
+        }
+    }
+
+    hooks.useEventHandler(projectEvent, async event => {
+        switch (event.type) {
+            default: {
+                // Ignore; all other events are handled by `ProjectActionButton`.
+                break
+            }
+            case projectEventModule.ProjectEventType.create: {
+                if (key === event.placeholderId) {
+                    setStatus(presence.Presence.inserting)
+                    try {
+                        const createdProject = await backend.createProject({
+                            parentDirectoryId: item.parentId,
+                            projectName: item.title,
+                            projectTemplateName: event.templateId,
+                        })
+                        setStatus(presence.Presence.present)
+                        const newItem: backendModule.ProjectAsset = {
+                            ...item,
+                            id: createdProject.projectId,
+                            projectState: createdProject.state,
+                        }
+                        setItem(newItem)
+                        // This MUST be delayed, otherwise the `ProjectActionButton` does not yet
+                        // have the correct `Project`.
+                        setTimeout(() => {
+                            dispatchProjectEvent({
+                                type: projectEventModule.ProjectEventType.open,
+                                projectId: createdProject.projectId,
+                            })
+                        }, 0)
+                    } catch (error) {
+                        dispatchProjectListEvent({
+                            type: projectListEventModule.ProjectListEventType.delete,
+                            projectId: key,
+                        })
+                        const message = `Error creating new project: ${
+                            errorModule.tryGetMessage(error) ?? 'unknown error.'
+                        }`
+                        toast.error(message)
+                        logger.error(message)
+                    }
+                }
+                break
+            }
+            case projectEventModule.ProjectEventType.deleteMultiple: {
+                if (event.projectIds.has(key)) {
+                    await doDelete()
+                }
+                break
+            }
+        }
+    })
+
+    return (
+        <TableRow
+            className={presence.CLASS_NAME[status]}
+            {...props}
+            onContextMenu={(innerProps, event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                setModal(
+                    <ProjectRowContextMenu
+                        innerProps={innerProps}
+                        event={event}
+                        dispatchProjectEvent={dispatchProjectEvent}
+                        doDelete={doDelete}
+                    />
+                )
+            }}
+            item={item}
+        />
+    )
+}
+
+// =====================
+// === ProjectsTable ===
+// =====================
+
+/** State passed through from a {@link ProjectsTable} to every cell. */
+interface ProjectsTableState {
+    appRunner: AppRunner | null
+    projectEvent: projectEventModule.ProjectEvent | null
+    dispatchProjectEvent: (event: projectEventModule.ProjectEvent) => void
+    dispatchProjectListEvent: (event: projectListEventModule.ProjectListEvent) => void
+    markItemAsHidden: (key: string) => void
+    markItemAsVisible: (key: string) => void
+    /** Called when the project is opened via the {@link ProjectActionButton}. */
+    doOpenManually: (projectId: backendModule.ProjectId) => void
+    doOpenIde: (project: backendModule.ProjectAsset) => void
+    doCloseIde: () => void
+}
+
+/** Data associated with a {@link ProjectRow}, used for rendering. */
+export interface ProjectRowState {
+    isRunning: boolean
+    isEditingName: boolean
+}
+
+/** The default {@link ProjectRowState} associated with a {@link ProjectRow}. */
+export const INITIAL_ROW_STATE: ProjectRowState = Object.freeze({
+    isRunning: false,
+    isEditingName: false,
+})
+
+/** Props for a {@link ProjectsTable}. */
+export interface ProjectsTableProps {
+    appRunner: AppRunner | null
+    directoryId: backendModule.DirectoryId | null
+    items: backendModule.ProjectAsset[]
+    filter: ((item: backendModule.ProjectAsset) => boolean) | null
+    isLoading: boolean
+    columnDisplayMode: columnModule.ColumnDisplayMode
+    projectEvent: projectEventModule.ProjectEvent | null
+    dispatchProjectEvent: (projectEvent: projectEventModule.ProjectEvent) => void
+    projectListEvent: projectListEventModule.ProjectListEvent | null
+    dispatchProjectListEvent: (projectListEvent: projectListEventModule.ProjectListEvent) => void
+    doCreateProject: () => void
+    doOpenIde: (project: backendModule.ProjectAsset) => void
+    doCloseIde: () => void
+}
+
+/** The table of project assets. */
+function ProjectsTable(props: ProjectsTableProps) {
+    const {
+        appRunner,
+        directoryId,
+        items: rawItems,
+        filter,
+        isLoading,
+        columnDisplayMode,
+        projectEvent,
+        dispatchProjectEvent,
+        projectListEvent,
+        dispatchProjectListEvent,
+        doCreateProject,
+        doOpenIde,
+        doCloseIde: rawDoCloseIde,
+    } = props
+    const { organization } = authProvider.useNonPartialUserSession()
+    const { backend } = backendProvider.useBackend()
+    const { setModal } = modalProvider.useSetModal()
+    const [items, setItems] = React.useState(rawItems)
+
+    React.useEffect(() => {
+        setItems(rawItems)
+    }, [rawItems])
+
+    const visibleItems = React.useMemo(
+        () => (filter != null ? items.filter(filter) : items),
+        [items, filter]
+    )
+
+    // === Tracking number of visually hidden items ===
+
+    const [shouldForceShowPlaceholder, setShouldForceShowPlaceholder] = React.useState(false)
+    const keysOfHiddenItemsRef = React.useRef(new Set<string>())
+
+    const updateShouldForceShowPlaceholder = React.useCallback(() => {
+        setShouldForceShowPlaceholder(
+            visibleItems.every(item => keysOfHiddenItemsRef.current.has(item.id))
+        )
+    }, [visibleItems])
+
+    React.useEffect(updateShouldForceShowPlaceholder, [updateShouldForceShowPlaceholder])
+
+    React.useEffect(() => {
+        const oldKeys = keysOfHiddenItemsRef.current
+        keysOfHiddenItemsRef.current = new Set(
+            items.map(backendModule.getAssetId).filter(key => oldKeys.has(key))
+        )
+    }, [items])
+
+    const markItemAsHidden = React.useCallback(
+        (key: string) => {
+            keysOfHiddenItemsRef.current.add(key)
+            updateShouldForceShowPlaceholder()
+        },
+        [updateShouldForceShowPlaceholder]
+    )
+
+    const markItemAsVisible = React.useCallback(
+        (key: string) => {
+            keysOfHiddenItemsRef.current.delete(key)
+            updateShouldForceShowPlaceholder()
+        },
+        [updateShouldForceShowPlaceholder]
+    )
+
+    // === End tracking number of visually hidden items ===
+
+    const getNewProjectName = React.useCallback(
+        (templateId?: string | null) => {
+            const prefix = `${templateId ?? 'New_Project'}_`
+            const projectNameTemplate = new RegExp(`^${prefix}(?<projectIndex>\\d+)$`)
+            const projectIndices = items
+                .map(project => projectNameTemplate.exec(project.title)?.groups?.projectIndex)
+                .map(maybeIndex => (maybeIndex != null ? parseInt(maybeIndex, 10) : 0))
+            return `${prefix}${Math.max(0, ...projectIndices) + 1}`
+        },
+        [items]
+    )
+
+    hooks.useEventHandler(projectListEvent, event => {
+        switch (event.type) {
+            case projectListEventModule.ProjectListEventType.create: {
+                const projectName = getNewProjectName(event.templateId)
+                const dummyId = backendModule.ProjectId(uniqueString.uniqueString())
+                const placeholderItem: backendModule.ProjectAsset = {
+                    id: dummyId,
+                    title: projectName,
+                    modifiedAt: dateTime.toRfc3339(new Date()),
+                    parentId: directoryId ?? backendModule.DirectoryId(''),
+                    permissions: permissions.tryGetSingletonOwnerPermission(organization),
+                    projectState: { type: backendModule.ProjectState.new },
+                    type: backendModule.AssetType.project,
+                }
+                setItems(oldProjectAssets => [placeholderItem, ...oldProjectAssets])
+                dispatchProjectEvent({
+                    type: projectEventModule.ProjectEventType.create,
+                    placeholderId: dummyId,
+                    templateId: event.templateId,
+                    onSpinnerStateChange: event.onSpinnerStateChange,
+                })
+                break
+            }
+            case projectListEventModule.ProjectListEventType.delete: {
+                setItems(oldItems => oldItems.filter(item => item.id !== event.projectId))
+                break
+            }
+        }
+    })
+
+    const doOpenManually = React.useCallback(
+        (projectId: backendModule.ProjectId) => {
+            dispatchProjectEvent({
+                type: projectEventModule.ProjectEventType.open,
+                projectId,
+            })
+        },
+        [/* should never change */ dispatchProjectEvent]
+    )
+
+    const doCloseIde = React.useCallback(() => {
+        dispatchProjectEvent({
+            type: projectEventModule.ProjectEventType.cancelOpeningAll,
+        })
+        rawDoCloseIde()
+    }, [rawDoCloseIde, /* should never change */ dispatchProjectEvent])
+
+    const state = React.useMemo(
+        // The type MUST be here to trigger excess property errors at typecheck time.
+        (): ProjectsTableState => ({
+            appRunner,
+            projectEvent,
+            dispatchProjectEvent,
+            dispatchProjectListEvent,
+            markItemAsHidden,
+            markItemAsVisible,
+            doOpenManually,
+            doOpenIde,
+            doCloseIde,
+        }),
+        [
+            appRunner,
+            projectEvent,
+            doOpenManually,
+            doOpenIde,
+            doCloseIde,
+            markItemAsHidden,
+            markItemAsVisible,
+            /* should never change */ dispatchProjectEvent,
+            /* should never change */ dispatchProjectListEvent,
+        ]
+    )
+
+    return (
+        <Table<
+            backendModule.ProjectAsset,
+            backendModule.ProjectId,
+            ProjectsTableState,
+            ProjectRowState
+        >
+            rowComponent={ProjectRow}
+            items={visibleItems}
+            isLoading={isLoading}
+            state={state}
+            initialRowState={INITIAL_ROW_STATE}
+            getKey={backendModule.getAssetId}
+            placeholder={PLACEHOLDER}
+            forceShowPlaceholder={shouldForceShowPlaceholder}
+            columns={columnModule.columnsFor(columnDisplayMode, backend.type).map(column =>
+                column === columnModule.Column.name
+                    ? {
+                          id: column,
+                          className: columnModule.COLUMN_CSS_CLASS[column],
+                          heading: <ProjectNameHeading doCreateProject={doCreateProject} />,
+                          render: ProjectName,
+                      }
+                    : {
+                          id: column,
+                          className: columnModule.COLUMN_CSS_CLASS[column],
+                          heading: <>{columnModule.COLUMN_NAME[column]}</>,
+                          render: columnModule.COLUMN_RENDERER[column],
+                      }
+            )}
+            onContextMenu={(selectedKeys, event, setSelectedKeys) => {
+                event.preventDefault()
+                event.stopPropagation()
+                // This is not a React component even though it contains JSX.
+                // eslint-disable-next-line no-restricted-syntax
+                const doDeleteAll = () => {
+                    setModal(
+                        <ConfirmDeleteModal
+                            description={`${selectedKeys.size} selected projects`}
+                            doDelete={() => {
+                                setSelectedKeys(new Set())
+                                dispatchProjectEvent({
+                                    type: projectEventModule.ProjectEventType.deleteMultiple,
+                                    projectIds: selectedKeys,
+                                })
+                                return Promise.resolve()
+                            }}
+                        />
+                    )
+                }
+                const pluralized = pluralize(selectedKeys.size)
+                setModal(
+                    <ContextMenu key={uniqueString.uniqueString()} event={event}>
+                        <ContextMenuEntry onClick={doDeleteAll}>
+                            <span className="text-red-700">
+                                Delete {selectedKeys.size} {pluralized}
+                            </span>
+                        </ContextMenuEntry>
+                    </ContextMenu>
+                )
+            }}
+        />
+    )
+}
+
+export default ProjectsTable
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx
deleted file mode 100644
index b11427a6024..00000000000
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/renameModal.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-/** @file Modal for confirming delete of any type of asset. */
-import * as React from 'react'
-import toast from 'react-hot-toast'
-
-import CloseIcon from 'enso-assets/close.svg'
-
-import * as modalProvider from '../../providers/modal'
-
-import Input from './input'
-import Modal from './modal'
-
-// ===================
-// === RenameModal ===
-// ===================
-
-/** Props for a {@link RenameModal}. */
-export interface RenameModalProps {
-    assetType: string
-    name: string
-    namePattern?: string
-    title?: string
-    doRename: (newName: string) => Promise<void>
-    onComplete: () => void
-}
-
-/** A modal for renaming an asset. */
-function RenameModal(props: RenameModalProps) {
-    const { assetType, name, namePattern, title, doRename, onComplete } = props
-    const { unsetModal } = modalProvider.useSetModal()
-
-    const [newName, setNewName] = React.useState<string | null>(null)
-
-    const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault()
-        if (newName == null) {
-            toast.error('Please provide a new name.')
-        } else {
-            unsetModal()
-            try {
-                await toast.promise(doRename(newName), {
-                    loading: `Renaming ${assetType} '${name}' to '${newName}'...`,
-                    success: `Renamed ${assetType} '${name}' to '${newName}'.`,
-                    // This is UNSAFE, as the original function's parameter is of type `any`.
-                    error: (promiseError: Error) =>
-                        `Error renaming ${assetType} '${name}' to '${newName}': ${promiseError.message}`,
-                })
-            } finally {
-                onComplete()
-            }
-        }
-    }
-
-    return (
-        <Modal centered className="bg-opacity-90">
-            <form
-                onClick={event => {
-                    event.stopPropagation()
-                }}
-                onSubmit={onSubmit}
-                className="relative bg-white shadow-soft rounded-lg w-96 p-2"
-            >
-                <div className="flex">
-                    {/* Padding. */}
-                    <div className="grow" />
-                    <button type="button" onClick={unsetModal}>
-                        <img src={CloseIcon} />
-                    </button>
-                </div>
-                <div className="m-2">
-                    What do you want to rename the {assetType} &lsquo;{name}&rsquo; to?
-                </div>
-                <div className="m-2">
-                    <Input
-                        autoFocus
-                        required
-                        // Never disabled, as disabling unfocuses the input.
-                        id="renamed_asset_name"
-                        type="text"
-                        pattern={namePattern}
-                        title={title}
-                        className="border-primary bg-gray-200 rounded-full w-full px-2"
-                        defaultValue={newName ?? name}
-                        setValue={setNewName}
-                    />
-                </div>
-                <div className="m-1">
-                    <button
-                        type="submit"
-                        className="hover:cursor-pointer inline-block text-white bg-blue-600 rounded-full px-4 py-1 m-1"
-                    >
-                        Rename
-                    </button>
-                    <button
-                        type="button"
-                        className="hover:cursor-pointer inline-block bg-gray-200 rounded-full px-4 py-1 m-1"
-                        onClick={unsetModal}
-                    >
-                        Cancel
-                    </button>
-                </div>
-            </form>
-        </Modal>
-    )
-}
-
-export default RenameModal
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/rows.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/rows.tsx
deleted file mode 100644
index 9886349c9f7..00000000000
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/rows.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/** @file Table that projects an object into each column. */
-import * as React from 'react'
-
-import Spinner, * as spinner from './spinner'
-
-// =================
-// === Constants ===
-// =================
-
-/** The size of the loading spinner. */
-const LOADING_SPINNER_SIZE = 36
-
-// =============
-// === Types ===
-// =============
-
-/** Metadata describing how to render a column of the table. */
-export interface Column<T> {
-    id: string
-    heading: JSX.Element
-    render: (item: T, index: number) => React.ReactNode
-}
-
-// =================
-// === Component ===
-// =================
-
-/** Props for a {@link Rows}. */
-export interface RowsProps<T> {
-    items: T[]
-    getKey: (item: T) => string
-    isLoading: boolean
-    placeholder: JSX.Element
-    columns: Column<T>[]
-    onClick: (item: T, event: React.MouseEvent<HTMLTableRowElement>) => void
-    onContextMenu: (item: T, event: React.MouseEvent<HTMLTableRowElement>) => void
-}
-
-/** Table that projects an object into each column. */
-function Rows<T>(props: RowsProps<T>) {
-    const { columns, items, isLoading, getKey, placeholder, onClick, onContextMenu } = props
-    const [spinnerState, setSpinnerState] = React.useState(spinner.SpinnerState.initial)
-
-    const headerRow = (
-        <tr>
-            {columns.map(column => (
-                <th
-                    key={column.id}
-                    className="text-vs px-4 align-middle py-1 border-0 border-r whitespace-nowrap font-semibold text-left"
-                >
-                    {column.heading}
-                </th>
-            ))}
-        </tr>
-    )
-
-    React.useEffect(() => {
-        if (isLoading) {
-            // Ensure the spinner stays in the "initial" state for at least one frame.
-            requestAnimationFrame(() => {
-                setSpinnerState(spinner.SpinnerState.loadingFast)
-            })
-        } else {
-            setSpinnerState(spinner.SpinnerState.initial)
-        }
-    }, [isLoading])
-
-    const itemRows = isLoading ? (
-        <tr className="h-10">
-            <td colSpan={columns.length}>
-                <div className="grid justify-around w-full">
-                    <Spinner size={LOADING_SPINNER_SIZE} state={spinnerState} />
-                </div>
-            </td>
-        </tr>
-    ) : items.length === 0 ? (
-        <tr className="h-10">
-            <td colSpan={columns.length}>{placeholder}</td>
-        </tr>
-    ) : (
-        items.map((item, index) => (
-            <tr
-                key={getKey(item)}
-                tabIndex={-1}
-                onClick={event => {
-                    onClick(item, event)
-                }}
-                onContextMenu={event => {
-                    onContextMenu(item, event)
-                }}
-                className="h-10 transition duration-300 ease-in-out hover:bg-gray-100 focus:bg-gray-200"
-            >
-                {columns.map(column => (
-                    <td key={column.id} className="px-4 border-0 border-r vertical-align-middle">
-                        {column.render(item, index)}
-                    </td>
-                ))}
-            </tr>
-        ))
-    )
-    return (
-        <>
-            {headerRow}
-            {itemRows}
-        </>
-    )
-}
-
-export default Rows
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx
deleted file mode 100644
index fb103075ba7..00000000000
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretCreateForm.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/** @file Form to create a project. */
-import * as React from 'react'
-import toast from 'react-hot-toast'
-
-import * as backendModule from '../backend'
-import * as backendProvider from '../../providers/backend'
-import * as error from '../../error'
-import * as modalProvider from '../../providers/modal'
-import CreateForm, * as createForm from './createForm'
-
-// ========================
-// === SecretCreateForm ===
-// ========================
-
-/** Props for a {@link SecretCreateForm}. */
-export interface SecretCreateFormProps extends createForm.CreateFormPassthroughProps {
-    directoryId: backendModule.DirectoryId
-    onSuccess: () => void
-}
-
-/** A form to create a secret. */
-function SecretCreateForm(props: SecretCreateFormProps) {
-    const { directoryId, onSuccess, ...passThrough } = props
-    const { backend } = backendProvider.useBackend()
-    const { unsetModal } = modalProvider.useSetModal()
-
-    const [name, setName] = React.useState<string | null>(null)
-    const [value, setValue] = React.useState<string | null>(null)
-
-    if (backend.type === backendModule.BackendType.local) {
-        return <></>
-    } else {
-        const onSubmit = async (event: React.FormEvent) => {
-            event.preventDefault()
-            if (name == null || name === '') {
-                toast.error('Please provide a secret name.')
-            } else if (value == null) {
-                // Secret value explicitly can be empty.
-                toast.error('Please provide a secret value.')
-            } else {
-                unsetModal()
-                await toast
-                    .promise(
-                        backend.createSecret({
-                            parentDirectoryId: directoryId,
-                            secretName: name,
-                            secretValue: value,
-                        }),
-                        {
-                            loading: 'Creating secret...',
-                            success: 'Sucessfully created secret.',
-                            error: error.unsafeIntoErrorMessage,
-                        }
-                    )
-                    .then(onSuccess)
-            }
-        }
-
-        return (
-            <CreateForm title="New Secret" onSubmit={onSubmit} {...passThrough}>
-                <div className="flex flex-row flex-nowrap m-1">
-                    <label className="inline-block flex-1 grow m-1" htmlFor="project_name">
-                        Name
-                    </label>
-                    <input
-                        id="project_name"
-                        type="text"
-                        size={1}
-                        className="bg-gray-200 rounded-full flex-1 grow-2 px-2 m-1"
-                        onChange={event => {
-                            setName(event.target.value)
-                        }}
-                    />
-                </div>
-                <div className="flex flex-row flex-nowrap m-1">
-                    <label className="inline-block flex-1 grow m-1" htmlFor="secret_value">
-                        Value
-                    </label>
-                    <input
-                        id="secret_value"
-                        type="text"
-                        size={1}
-                        className="bg-gray-200 rounded-full flex-1 grow-2 px-2 m-1"
-                        onChange={event => {
-                            setValue(event.target.value)
-                        }}
-                    />
-                </div>
-            </CreateForm>
-        )
-    }
-}
-
-export default SecretCreateForm
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretsTable.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretsTable.tsx
new file mode 100644
index 00000000000..21275f7e22c
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/secretsTable.tsx
@@ -0,0 +1,606 @@
+/** @file Table displaying a list of secrets. */
+import * as React from 'react'
+import toast from 'react-hot-toast'
+
+import PlusIcon from 'enso-assets/plus.svg'
+import SecretIcon from 'enso-assets/secret.svg'
+
+import * as backendModule from '../backend'
+import * as columnModule from '../column'
+import * as dateTime from '../dateTime'
+import * as errorModule from '../../error'
+import * as eventModule from '../event'
+import * as hooks from '../../hooks'
+import * as permissions from '../permissions'
+import * as presence from '../presence'
+import * as secretEventModule from '../events/secretEvent'
+import * as secretListEventModule from '../events/secretListEvent'
+import * as shortcuts from '../shortcuts'
+import * as string from '../../string'
+import * as uniqueString from '../../uniqueString'
+
+import * as authProvider from '../../authentication/providers/auth'
+import * as backendProvider from '../../providers/backend'
+import * as loggerProvider from '../../providers/logger'
+import * as modalProvider from '../../providers/modal'
+
+import * as tableColumn from './tableColumn'
+import CreateForm, * as createForm from './createForm'
+import TableRow, * as tableRow from './tableRow'
+import ConfirmDeleteModal from './confirmDeleteModal'
+import ContextMenu from './contextMenu'
+import ContextMenuEntry from './contextMenuEntry'
+import EditableSpan from './editableSpan'
+import Table from './table'
+
+// =================
+// === Constants ===
+// =================
+
+/** The user-facing name of this asset type. */
+const ASSET_TYPE_NAME = 'secret'
+/** The user-facing plural name of this asset type. */
+const ASSET_TYPE_NAME_PLURAL = 'secrets'
+// 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)
+/** Placeholder row when the search query is not empty. */
+const PLACEHOLDER_WITH_QUERY = (
+    <span className="opacity-75">
+        This folder does not contain any secrets matching your query.
+    </span>
+)
+/** Placeholder row when the search query is empty. */
+const PLACEHOLDER_WITHOUT_QUERY = (
+    <span className="opacity-75">This folder does not contain any secrets.</span>
+)
+
+// ========================
+// === SecretCreateForm ===
+// ========================
+
+/** Props for a {@link SecretCreateForm}. */
+interface InternalSecretCreateFormProps extends createForm.CreateFormPassthroughProps {
+    dispatchSecretListEvent: (event: secretListEventModule.SecretListEvent) => void
+}
+
+/** A form to create a new secret asset. */
+function SecretCreateForm(props: InternalSecretCreateFormProps) {
+    const { dispatchSecretListEvent, ...passThrough } = props
+    const { backend } = backendProvider.useBackend()
+    const { unsetModal } = modalProvider.useSetModal()
+
+    const [name, setName] = React.useState<string | null>(null)
+    const [value, setValue] = React.useState<string | null>(null)
+
+    if (backend.type === backendModule.BackendType.local) {
+        return <></>
+    } else {
+        const onSubmit = (event: React.FormEvent) => {
+            event.preventDefault()
+            if (name == null) {
+                toast.error('Please provide a secret name.')
+            } else if (value == null) {
+                // Secret value explicitly can be empty.
+                toast.error('Please provide a secret value.')
+            } else {
+                unsetModal()
+                dispatchSecretListEvent({
+                    type: secretListEventModule.SecretListEventType.create,
+                    name: name,
+                    value: value,
+                })
+            }
+        }
+
+        return (
+            <CreateForm title="New Secret" onSubmit={onSubmit} {...passThrough}>
+                <div className="flex flex-row flex-nowrap m-1">
+                    <label className="inline-block flex-1 grow m-1" htmlFor="project_name">
+                        Name
+                    </label>
+                    <input
+                        id="project_name"
+                        type="text"
+                        size={1}
+                        className="bg-gray-200 rounded-full flex-1 grow-2 px-2 m-1"
+                        onChange={event => {
+                            setName(event.target.value)
+                        }}
+                    />
+                </div>
+                <div className="flex flex-row flex-nowrap m-1">
+                    <label className="inline-block flex-1 grow m-1" htmlFor="secret_value">
+                        Value
+                    </label>
+                    <input
+                        id="secret_value"
+                        type="text"
+                        size={1}
+                        className="bg-gray-200 rounded-full flex-1 grow-2 px-2 m-1"
+                        onChange={event => {
+                            setValue(event.target.value)
+                        }}
+                    />
+                </div>
+            </CreateForm>
+        )
+    }
+}
+
+// =========================
+// === SecretNameHeading ===
+// =========================
+
+/** Props for a {@link SecretNameHeading}. */
+interface InternalSecretNameHeadingProps {
+    dispatchSecretListEvent: (event: secretListEventModule.SecretListEvent) => void
+}
+
+/** The column header for the "name" column for the table of secret assets. */
+function SecretNameHeading(props: InternalSecretNameHeadingProps) {
+    const { dispatchSecretListEvent } = props
+    const { setModal } = modalProvider.useSetModal()
+
+    return (
+        <div className="inline-flex">
+            {string.capitalizeFirst(ASSET_TYPE_NAME_PLURAL)}
+            <button
+                className="mx-1"
+                onClick={event => {
+                    event.stopPropagation()
+                    const buttonPosition = event.currentTarget.getBoundingClientRect()
+                    setModal(
+                        <SecretCreateForm
+                            left={buttonPosition.left + window.scrollX}
+                            top={buttonPosition.top + window.scrollY}
+                            dispatchSecretListEvent={dispatchSecretListEvent}
+                        />
+                    )
+                }}
+            >
+                <img src={PlusIcon} />
+            </button>
+        </div>
+    )
+}
+
+// ==================
+// === SecretName ===
+// ==================
+
+/** Props for a {@link SecretName}. */
+interface InternalSecretNameProps
+    extends tableColumn.TableColumnProps<
+        backendModule.SecretAsset,
+        SecretsTableState,
+        SecretRowState
+    > {}
+
+/** The icon and name of a specific secret asset. */
+function SecretName(props: InternalSecretNameProps) {
+    const { item, setItem, selected, setRowState } = props
+
+    // TODO[sb]: Wait for backend implementation. `editable` should also be re-enabled, and the
+    // context menu entry should be re-added.
+    // Backend implementation is tracked here: https://github.com/enso-org/cloud-v2/issues/505.
+    const doRename = async (/* _newName: string */) => {
+        await Promise.resolve(null)
+    }
+
+    return (
+        <div
+            className="flex text-left items-center align-middle whitespace-nowrap"
+            onClick={event => {
+                if (
+                    eventModule.isSingleClick(event) &&
+                    (selected ||
+                        shortcuts.SHORTCUT_REGISTRY.matchesMouseAction(
+                            shortcuts.MouseAction.editName,
+                            event
+                        ))
+                ) {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: true,
+                    }))
+                }
+            }}
+        >
+            <img src={SecretIcon} />{' '}
+            <EditableSpan
+                editable={false}
+                onSubmit={async newTitle => {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: false,
+                    }))
+                    if (newTitle !== item.title) {
+                        const oldTitle = item.title
+                        setItem(oldItem => ({ ...oldItem, title: newTitle }))
+                        try {
+                            await doRename(/* newTitle */)
+                        } catch {
+                            setItem(oldItem => ({ ...oldItem, title: oldTitle }))
+                        }
+                    }
+                }}
+                onCancel={() => {
+                    setRowState(oldRowState => ({
+                        ...oldRowState,
+                        isEditingName: false,
+                    }))
+                }}
+                className="bg-transparent grow px-2"
+            >
+                {item.title}
+            </EditableSpan>
+        </div>
+    )
+}
+
+// ============================
+// === SecretRowContextMenu ===
+// ============================
+
+/** Props for a {@link SecretRowContextMenu}. */
+interface InternalDirectoryRowContextMenuProps {
+    innerProps: tableRow.TableRowInnerProps<
+        backendModule.SecretAsset,
+        backendModule.SecretId,
+        SecretRowState
+    >
+    event: React.MouseEvent
+    doDelete: () => Promise<void>
+}
+
+/** The context menu for a row of a {@link SecretsTable}. */
+function SecretRowContextMenu(props: InternalDirectoryRowContextMenuProps) {
+    const {
+        innerProps: { item },
+        event,
+        doDelete,
+    } = props
+    const { setModal } = modalProvider.useSetModal()
+
+    return (
+        <ContextMenu key={item.id} event={event}>
+            <ContextMenuEntry
+                onClick={() => {
+                    setModal(
+                        <ConfirmDeleteModal
+                            description={`the ${ASSET_TYPE_NAME} '${item.title}'`}
+                            doDelete={doDelete}
+                        />
+                    )
+                }}
+            >
+                <span className="text-red-700">Delete</span>
+            </ContextMenuEntry>
+        </ContextMenu>
+    )
+}
+
+// =================
+// === SecretRow ===
+// =================
+
+/** A row in a {@link SecretsTable}. */
+function SecretRow(
+    props: tableRow.TableRowProps<
+        backendModule.SecretAsset,
+        backendModule.SecretId,
+        SecretsTableState,
+        SecretRowState
+    >
+) {
+    const {
+        keyProp: key,
+        item: rawItem,
+        state: { secretEvent, dispatchSecretListEvent, markItemAsHidden, markItemAsVisible },
+    } = props
+    const logger = loggerProvider.useLogger()
+    const { backend } = backendProvider.useBackend()
+    const { setModal } = modalProvider.useSetModal()
+    const [item, setItem] = React.useState(rawItem)
+    const [status, setStatus] = React.useState(presence.Presence.present)
+
+    React.useEffect(() => {
+        setItem(rawItem)
+    }, [rawItem])
+
+    const doDelete = async () => {
+        if (backend.type !== backendModule.BackendType.local) {
+            setStatus(presence.Presence.deleting)
+            markItemAsHidden(key)
+            try {
+                await backend.deleteSecret(item.id, item.title)
+                dispatchSecretListEvent({
+                    type: secretListEventModule.SecretListEventType.delete,
+                    secretId: key,
+                })
+            } catch (error) {
+                setStatus(presence.Presence.present)
+                markItemAsVisible(key)
+                const message = `Unable to delete secret: ${
+                    errorModule.tryGetMessage(error) ?? 'unknown error.'
+                }`
+                toast.error(message)
+                logger.error(message)
+            }
+        }
+    }
+
+    hooks.useEventHandler(secretEvent, async event => {
+        switch (event.type) {
+            case secretEventModule.SecretEventType.create: {
+                if (key === event.placeholderId) {
+                    if (backend.type !== backendModule.BackendType.remote) {
+                        const message = 'Secrets cannot be created on the local backend.'
+                        toast.error(message)
+                        logger.error(message)
+                    } else {
+                        setStatus(presence.Presence.inserting)
+                        try {
+                            const createdSecret = await backend.createSecret({
+                                parentDirectoryId: item.parentId,
+                                secretName: item.title,
+                                secretValue: event.value,
+                            })
+                            setStatus(presence.Presence.present)
+                            const newItem: backendModule.SecretAsset = {
+                                ...item,
+                                ...createdSecret,
+                            }
+                            setItem(newItem)
+                        } catch (error) {
+                            dispatchSecretListEvent({
+                                type: secretListEventModule.SecretListEventType.delete,
+                                secretId: key,
+                            })
+                            const message = `Error creating new secret: ${
+                                errorModule.tryGetMessage(error) ?? 'unknown error.'
+                            }`
+                            toast.error(message)
+                            logger.error(message)
+                        }
+                    }
+                }
+                break
+            }
+            case secretEventModule.SecretEventType.deleteMultiple: {
+                if (event.secretIds.has(key)) {
+                    await doDelete()
+                }
+                break
+            }
+        }
+    })
+
+    return (
+        <TableRow
+            className={presence.CLASS_NAME[status]}
+            {...props}
+            onContextMenu={(innerProps, event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                setModal(
+                    <SecretRowContextMenu
+                        innerProps={innerProps}
+                        event={event}
+                        doDelete={doDelete}
+                    />
+                )
+            }}
+            item={item}
+        />
+    )
+}
+
+// ====================
+// === SecretsTable ===
+// ====================
+
+/** State passed through from a {@link SecretsTable} to every cell. */
+interface SecretsTableState {
+    secretEvent: secretEventModule.SecretEvent | null
+    dispatchSecretListEvent: (event: secretListEventModule.SecretListEvent) => void
+    markItemAsHidden: (key: string) => void
+    markItemAsVisible: (key: string) => void
+}
+
+/** Data associated with a {@link SecretRow}, used for rendering. */
+export interface SecretRowState {
+    isEditingName: boolean
+}
+
+/** The default {@link SecretRowState} associated with a {@link SecretRow}. */
+export const INITIAL_ROW_STATE: SecretRowState = Object.freeze({
+    isEditingName: false,
+})
+
+/** Props for a {@link SecretsTable}. */
+export interface SecretsTableProps {
+    directoryId: backendModule.DirectoryId | null
+    items: backendModule.SecretAsset[]
+    filter: ((item: backendModule.SecretAsset) => boolean) | null
+    isLoading: boolean
+    columnDisplayMode: columnModule.ColumnDisplayMode
+}
+
+/** The table of secret assets. */
+function SecretsTable(props: SecretsTableProps) {
+    const { directoryId, items: rawItems, filter, isLoading, columnDisplayMode } = props
+    const logger = loggerProvider.useLogger()
+    const { organization } = authProvider.useNonPartialUserSession()
+    const { backend } = backendProvider.useBackend()
+    const { setModal } = modalProvider.useSetModal()
+    const [items, setItems] = React.useState(rawItems)
+    const [secretEvent, dispatchSecretEvent] = hooks.useEvent<secretEventModule.SecretEvent>()
+    const [secretListEvent, dispatchSecretListEvent] =
+        hooks.useEvent<secretListEventModule.SecretListEvent>()
+
+    React.useEffect(() => {
+        setItems(rawItems)
+    }, [rawItems])
+
+    const visibleItems = React.useMemo(
+        () => (filter != null ? items.filter(filter) : items),
+        [items, filter]
+    )
+
+    // === Tracking number of visually hidden items ===
+
+    const [shouldForceShowPlaceholder, setShouldForceShowPlaceholder] = React.useState(false)
+    const keysOfHiddenItemsRef = React.useRef(new Set<string>())
+
+    const updateShouldForceShowPlaceholder = React.useCallback(() => {
+        setShouldForceShowPlaceholder(
+            visibleItems.every(item => keysOfHiddenItemsRef.current.has(item.id))
+        )
+    }, [visibleItems])
+
+    React.useEffect(updateShouldForceShowPlaceholder, [updateShouldForceShowPlaceholder])
+
+    React.useEffect(() => {
+        const oldKeys = keysOfHiddenItemsRef.current
+        keysOfHiddenItemsRef.current = new Set(
+            items.map(backendModule.getAssetId).filter(key => oldKeys.has(key))
+        )
+    }, [items])
+
+    const markItemAsHidden = React.useCallback(
+        (key: string) => {
+            keysOfHiddenItemsRef.current.add(key)
+            updateShouldForceShowPlaceholder()
+        },
+        [updateShouldForceShowPlaceholder]
+    )
+
+    const markItemAsVisible = React.useCallback(
+        (key: string) => {
+            keysOfHiddenItemsRef.current.delete(key)
+            updateShouldForceShowPlaceholder()
+        },
+        [updateShouldForceShowPlaceholder]
+    )
+
+    // === End tracking number of visually hidden items ===
+
+    hooks.useEventHandler(secretListEvent, event => {
+        switch (event.type) {
+            case secretListEventModule.SecretListEventType.create: {
+                if (backend.type !== backendModule.BackendType.remote) {
+                    const message = 'Secrets cannot be created on the local backend.'
+                    toast.error(message)
+                    logger.error(message)
+                } else {
+                    const placeholderItem: backendModule.SecretAsset = {
+                        id: backendModule.SecretId(uniqueString.uniqueString()),
+                        title: event.name,
+                        modifiedAt: dateTime.toRfc3339(new Date()),
+                        parentId: directoryId ?? backendModule.DirectoryId(''),
+                        permissions: permissions.tryGetSingletonOwnerPermission(organization),
+                        projectState: null,
+                        type: backendModule.AssetType.secret,
+                    }
+                    setItems(oldItems => [placeholderItem, ...oldItems])
+                    dispatchSecretEvent({
+                        type: secretEventModule.SecretEventType.create,
+                        placeholderId: placeholderItem.id,
+                        value: event.value,
+                    })
+                }
+                break
+            }
+            case secretListEventModule.SecretListEventType.delete: {
+                setItems(oldItems => oldItems.filter(item => item.id !== event.secretId))
+                break
+            }
+        }
+    })
+
+    const state = React.useMemo(
+        // The type MUST be here to trigger excess property errors at typecheck time.
+        (): SecretsTableState => ({
+            secretEvent,
+            dispatchSecretListEvent,
+            markItemAsHidden,
+            markItemAsVisible,
+        }),
+        [secretEvent, dispatchSecretListEvent, markItemAsHidden, markItemAsVisible]
+    )
+
+    if (backend.type === backendModule.BackendType.local) {
+        return <></>
+    } else {
+        return (
+            <Table<
+                backendModule.SecretAsset,
+                backendModule.SecretId,
+                SecretsTableState,
+                SecretRowState
+            >
+                rowComponent={SecretRow}
+                items={visibleItems}
+                isLoading={isLoading}
+                state={state}
+                initialRowState={INITIAL_ROW_STATE}
+                getKey={backendModule.getAssetId}
+                placeholder={filter != null ? PLACEHOLDER_WITH_QUERY : PLACEHOLDER_WITHOUT_QUERY}
+                forceShowPlaceholder={shouldForceShowPlaceholder}
+                columns={columnModule.columnsFor(columnDisplayMode, backend.type).map(column =>
+                    column === columnModule.Column.name
+                        ? {
+                              id: column,
+                              className: columnModule.COLUMN_CSS_CLASS[column],
+                              heading: (
+                                  <SecretNameHeading
+                                      dispatchSecretListEvent={dispatchSecretListEvent}
+                                  />
+                              ),
+                              render: SecretName,
+                          }
+                        : {
+                              id: column,
+                              className: columnModule.COLUMN_CSS_CLASS[column],
+                              heading: <>{columnModule.COLUMN_NAME[column]}</>,
+                              render: columnModule.COLUMN_RENDERER[column],
+                          }
+                )}
+                onContextMenu={(selectedKeys, event, setSelectedKeys) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    const doDeleteAll = () => {
+                        setModal(
+                            <ConfirmDeleteModal
+                                description={
+                                    `${selectedKeys.size} selected ` + ASSET_TYPE_NAME_PLURAL
+                                }
+                                doDelete={() => {
+                                    dispatchSecretEvent({
+                                        type: secretEventModule.SecretEventType.deleteMultiple,
+                                        secretIds: selectedKeys,
+                                    })
+                                    setSelectedKeys(new Set())
+                                }}
+                            />
+                        )
+                    }
+                    const pluralized = pluralize(selectedKeys.size)
+                    setModal(
+                        <ContextMenu key={uniqueString.uniqueString()} event={event}>
+                            <ContextMenuEntry onClick={doDeleteAll}>
+                                <span className="text-red-700">
+                                    Delete {selectedKeys.size} {pluralized}
+                                </span>
+                            </ContextMenuEntry>
+                        </ContextMenu>
+                    )
+                }}
+            />
+        )
+    }
+}
+
+export default SecretsTable
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/table.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/table.tsx
new file mode 100644
index 00000000000..c8fa13b01b1
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/table.tsx
@@ -0,0 +1,246 @@
+/** @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 shortcuts from '../shortcuts'
+
+import * as tableColumn from './tableColumn'
+import Spinner, * as spinner from './spinner'
+import TableRow, * as tableRow from './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
+}
+
+// =============
+// === Table ===
+// =============
+
+/** Props for a {@link Table}. */
+interface InternalTableProps<T, Key extends string = string, State = never, RowState = never> {
+    rowComponent?: (props: tableRow.TableRowProps<T, Key, State, RowState>) => JSX.Element
+    items: T[]
+    state?: State
+    initialRowState?: RowState
+    getKey: (item: T) => Key
+    columns: tableColumn.TableColumn<T, State, RowState>[]
+    isLoading: boolean
+    placeholder: JSX.Element
+    forceShowPlaceholder?: boolean
+    onContextMenu: (
+        selectedKeys: Set<Key>,
+        event: React.MouseEvent<HTMLTableElement>,
+        setSelectedKeys: (items: Set<Key>) => void
+    ) => void
+}
+
+/** Props for a {@link Table}. */
+export type TableProps<
+    T,
+    Key extends string = string,
+    State = never,
+    RowState = never
+> = InternalTableProps<T, Key, State, RowState> &
+    ([RowState] extends [never] ? unknown : InitialRowStateProp<RowState>) &
+    ([State] extends [never] ? unknown : StateProp<State>)
+
+/** Table that projects an object into each column. */
+function Table<T, Key extends string = string, State = never, RowState = never>(
+    props: TableProps<T, Key, State, RowState>
+) {
+    const {
+        rowComponent: RowComponent = TableRow,
+        items,
+        getKey,
+        columns,
+        isLoading,
+        placeholder,
+        forceShowPlaceholder = false,
+        onContextMenu,
+        ...rowProps
+    } = props
+
+    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.
+    const [selectedKeys, setSelectedKeys] = React.useState(() => new Set<Key>())
+    const [previouslySelectedKey, setPreviouslySelectedKey] = React.useState<Key | null>(null)
+
+    React.useEffect(() => {
+        const onDocumentClick = (event: MouseEvent) => {
+            if (
+                !shortcuts.SHORTCUT_REGISTRY.matchesMouseAction(
+                    shortcuts.MouseAction.selectAdditional,
+                    event
+                ) &&
+                !shortcuts.SHORTCUT_REGISTRY.matchesMouseAction(
+                    shortcuts.MouseAction.selectAdditionalRange,
+                    event
+                ) &&
+                selectedKeys.size !== 0
+            ) {
+                setSelectedKeys(new Set())
+            }
+        }
+        document.addEventListener('click', onDocumentClick)
+        return () => {
+            document.removeEventListener('click', onDocumentClick)
+        }
+    }, [selectedKeys])
+
+    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, Key, RowState>, 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.SHORTCUT_REGISTRY.matchesMouseAction(
+                    shortcuts.MouseAction.selectRange,
+                    event
+                )
+            ) {
+                setSelectedKeys(new Set(getNewlySelectedKeys()))
+            } else if (
+                shortcuts.SHORTCUT_REGISTRY.matchesMouseAction(
+                    shortcuts.MouseAction.selectAdditionalRange,
+                    event
+                )
+            ) {
+                setSelectedKeys(
+                    oldSelectedItems => new Set([...oldSelectedItems, ...getNewlySelectedKeys()])
+                )
+            } else if (
+                shortcuts.SHORTCUT_REGISTRY.matchesMouseAction(
+                    shortcuts.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, /* should never change */ getKey]
+    )
+
+    const headerRow = (
+        <tr>
+            {columns.map(column => (
+                <th
+                    key={column.id}
+                    className={`text-vs px-4 align-middle py-1 border-0 border-r whitespace-nowrap font-semibold text-left ${
+                        column.className ?? ''
+                    }`}
+                >
+                    {column.heading}
+                </th>
+            ))}
+        </tr>
+    )
+
+    const itemRows = isLoading ? (
+        <tr className="h-10">
+            <td colSpan={columns.length}>
+                <div className="grid justify-around w-full">
+                    <Spinner size={LOADING_SPINNER_SIZE} state={spinnerState} />
+                </div>
+            </td>
+        </tr>
+    ) : items.length === 0 || forceShowPlaceholder ? (
+        <tr className="h-10">
+            <td colSpan={columns.length}>{placeholder}</td>
+        </tr>
+    ) : (
+        items.map(item => {
+            const key = getKey(item)
+            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}
+                    selected={selectedKeys.has(key)}
+                    allowContextMenu={
+                        selectedKeys.size === 0 ||
+                        (selectedKeys.size === 1 && selectedKeys.has(key))
+                    }
+                    onClick={onRowClick}
+                />
+            )
+        })
+    )
+
+    return (
+        <table
+            className="table-fixed items-center border-collapse w-0 mt-2"
+            onContextMenu={event => {
+                onContextMenu(selectedKeys, event, setSelectedKeys)
+            }}
+        >
+            <thead>{headerRow}</thead>
+            <tbody>{itemRows}</tbody>
+        </table>
+    )
+}
+
+export default Table
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/tableColumn.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/tableColumn.tsx
new file mode 100644
index 00000000000..2c3e47efb58
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/tableColumn.tsx
@@ -0,0 +1,23 @@
+/** @file Types for columns in a `Table`. */
+
+// =============
+// === Types ===
+// =============
+
+/** Props for a {@link Column}. */
+export interface TableColumnProps<T, State = never, RowState = never> {
+    item: T
+    setItem: React.Dispatch<React.SetStateAction<T>>
+    selected: boolean
+    state: State
+    rowState: RowState
+    setRowState: React.Dispatch<React.SetStateAction<RowState>>
+}
+
+/** Metadata describing how to render a column of the table. */
+export interface TableColumn<T, State = never, RowState = never> {
+    id: string
+    className?: string
+    heading: JSX.Element
+    render: (props: TableColumnProps<T, State, RowState>) => JSX.Element
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/tableRow.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/tableRow.tsx
new file mode 100644
index 00000000000..62621e9ec79
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/tableRow.tsx
@@ -0,0 +1,165 @@
+/** @file A row in a `Table`. */
+import * as React from 'react'
+
+import * as modalProvider from '../../providers/modal'
+
+import * as tableColumn from './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: (newItem: T) => void
+}
+
+/** State and setters passed to event handlers on a {@link TableRow}. */
+export type TableRowInnerProps<
+    T,
+    Key extends string = string,
+    TableRowState = never
+> = InternalTableRowInnerProps<T, Key> &
+    ([TableRowState] extends never ? unknown : InternalTableRowStateProps<TableRowState>)
+
+/** Props for a {@link TableRow}. */
+interface InternalBaseTableRowProps<
+    T,
+    Key extends string = string,
+    State = never,
+    TableRowState = never
+> extends Omit<JSX.IntrinsicElements['tr'], 'onClick' | 'onContextMenu'> {
+    keyProp: Key
+    item: T
+    state?: State
+    initialRowState?: TableRowState
+    columns: tableColumn.TableColumn<T, State, TableRowState>[]
+    selected: boolean
+    allowContextMenu: boolean
+    onClick: (props: TableRowInnerProps<T, Key, TableRowState>, event: React.MouseEvent) => void
+    onContextMenu?: (
+        props: TableRowInnerProps<T, Key, TableRowState>,
+        event: React.MouseEvent<HTMLTableRowElement>
+    ) => void
+}
+
+/** Props for a {@link TableRow}. */
+export type TableRowProps<
+    T,
+    Key extends string = string,
+    State = never,
+    TableRowState = never
+> = InternalBaseTableRowProps<T, Key, State, TableRowState> &
+    ([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. */
+function TableRow<T, Key extends string = string, State = never, RowState = never>(
+    props: TableRowProps<T, Key, State, RowState>
+) {
+    const {
+        keyProp: key,
+        item: rawItem,
+        state,
+        initialRowState,
+        columns,
+        selected,
+        allowContextMenu,
+        onClick,
+        onContextMenu,
+        className,
+        ...passthrough
+    } = props
+    const { unsetModal } = modalProvider.useSetModal()
+
+    /** The internal state for this row. This may change as backend requests are sent. */
+    const [item, setItem] = React.useState(rawItem)
+    /** 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 [rowState, setRowState] = React.useState<RowState>(initialRowState!)
+
+    React.useEffect(() => {
+        setItem(rawItem)
+    }, [rawItem])
+
+    const innerProps: TableRowInnerProps<T, Key, RowState> = {
+        key,
+        item,
+        setItem,
+        rowState,
+        setRowState,
+    }
+
+    return (
+        <tr
+            tabIndex={-1}
+            onClick={event => {
+                unsetModal()
+                onClick(innerProps, event)
+            }}
+            onContextMenu={event => {
+                if (allowContextMenu) {
+                    onContextMenu?.(innerProps, event)
+                }
+            }}
+            className={`h-10 transition duration-300 ease-in-out hover:bg-gray-100 ${
+                className ?? ''
+            } ${selected ? 'bg-gray-200' : ''}`}
+            {...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={`px-4 border-0 border-r vertical-align-middle ${
+                            column.className ?? ''
+                        }`}
+                    >
+                        <Render
+                            item={item}
+                            setItem={setItem}
+                            selected={selected}
+                            /** 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 {@link TableProps}.
+                             */
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            state={state!}
+                            rowState={rowState}
+                            setRowState={setRowState}
+                        />
+                    </td>
+                )
+            })}
+        </tr>
+    )
+}
+
+export default TableRow
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx
index 15f3ef10c17..c9388e465e2 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/templates.tsx
@@ -37,9 +37,9 @@ enum ShadowClass {
     both = 'shadow-inset-v-lg',
 }
 
-// =================
-// === Templates ===
-// =================
+// =============
+// === Types ===
+// =============
 
 /** Template metadata. */
 export interface Template {
@@ -49,6 +49,10 @@ export interface Template {
     background: string
 }
 
+// =================
+// === Constants ===
+// =================
+
 /** The full list of templates. */
 export const TEMPLATES: [Template, ...Template[]] = [
     {
@@ -73,19 +77,19 @@ export const TEMPLATES: [Template, ...Template[]] = [
         title: 'Combine spreadsheets',
         id: 'Orders',
         description: 'Glue multiple spreadsheets together to analyse all your data at once.',
-        background: 'url("/spreadsheets.png") 50% 20% / 80% no-repeat, #479366',
+        background: 'url("./spreadsheets.png") 50% 20% / 80% no-repeat, #479366',
     },
     {
         title: 'Geospatial analysis',
         id: 'Restaurants',
         description: 'Learn where to open a coffee shop to maximize your income.',
-        background: 'url("/geo.png") center / cover',
+        background: 'url("./geo.png") center / cover, #6b7280',
     },
     {
         title: 'Analyze GitHub stars',
         id: 'Stargazers',
         description: "Find out which of Enso's repositories are most popular over time.",
-        background: 'url("/visualize.png") center / cover',
+        background: 'url("./visualize.png") center / cover, #6b7280',
     },
 ]
 
@@ -154,6 +158,17 @@ interface InternalTemplateButtonProps {
 function TemplateButton(props: InternalTemplateButtonProps) {
     const { template, onTemplateClick } = props
     const [spinnerState, setSpinnerState] = React.useState<spinner.SpinnerState | null>(null)
+    const onSpinnerStateChange = React.useCallback(
+        (newSpinnerState: spinner.SpinnerState | null) => {
+            setSpinnerState(newSpinnerState)
+            if (newSpinnerState === spinner.SpinnerState.done) {
+                setTimeout(() => {
+                    setSpinnerState(null)
+                }, SPINNER_DONE_DURATION_MS)
+            }
+        },
+        []
+    )
 
     return (
         <button
@@ -161,14 +176,7 @@ function TemplateButton(props: InternalTemplateButtonProps) {
             className="h-40 cursor-pointer"
             onClick={() => {
                 setSpinnerState(spinner.SpinnerState.initial)
-                onTemplateClick(template.id, newSpinnerState => {
-                    setSpinnerState(newSpinnerState)
-                    if (newSpinnerState === spinner.SpinnerState.done) {
-                        setTimeout(() => {
-                            setSpinnerState(null)
-                        }, SPINNER_DONE_DURATION_MS)
-                    }
-                })
+                onTemplateClick(template.id, onSpinnerStateChange)
             }}
         >
             <div
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/theModal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/theModal.tsx
new file mode 100644
index 00000000000..5787079a00b
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/theModal.tsx
@@ -0,0 +1,17 @@
+/** @file A component that renders the modal instance from the modal React Context. */
+import * as React from 'react'
+
+import * as modalProvider from '../../providers/modal'
+
+// ================
+// === TheModal ===
+// ================
+
+/** Renders the modal instance from the modal React Context (if any). */
+function TheModal() {
+    const { modal } = modalProvider.useModal()
+
+    return <>{modal}</>
+}
+
+export default TheModal
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx
index 1c13c9212f0..cbd931ac4cd 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/topBar.tsx
@@ -9,7 +9,7 @@ import MagnifyingGlassIcon from 'enso-assets/magnifying_glass.svg'
 import SpeechBubbleIcon from 'enso-assets/speech_bubble.svg'
 
 import * as backendModule from '../backend'
-import * as dashboard from './dashboard'
+import * as tabModule from '../tab'
 
 import * as backendProvider from '../../providers/backend'
 import * as modalProvider from '../../providers/modal'
@@ -25,7 +25,7 @@ export interface TopBarProps {
     /** Whether the application may have the local backend running. */
     supportsLocalBackend: boolean
     projectName: string | null
-    tab: dashboard.Tab
+    tab: tabModule.Tab
     toggleTab: () => void
     setBackendType: (backendType: backendModule.BackendType) => void
     isHelpChatOpen: boolean
@@ -48,24 +48,8 @@ function TopBar(props: TopBarProps) {
         query,
         setQuery,
     } = props
-    const [isUserMenuVisible, setIsUserMenuVisible] = React.useState(false)
-    const { modal } = modalProvider.useModal()
-    const { setModal, unsetModal } = modalProvider.useSetModal()
     const { backend } = backendProvider.useBackend()
-
-    React.useEffect(() => {
-        if (!modal) {
-            setIsUserMenuVisible(false)
-        }
-    }, [modal])
-
-    React.useEffect(() => {
-        if (isUserMenuVisible) {
-            setModal(() => <UserMenu />)
-        } else {
-            unsetModal()
-        }
-    }, [isUserMenuVisible, setModal, unsetModal])
+    const { updateModal } = modalProvider.useSetModal()
 
     return (
         <div className="flex mx-2 h-8">
@@ -105,7 +89,7 @@ function TopBar(props: TopBarProps) {
             >
                 <span
                     className={`opacity-50 overflow-hidden transition-width nowrap ${
-                        tab === dashboard.Tab.dashboard ? 'm-2 w-16' : 'w-0'
+                        tab === tabModule.Tab.dashboard ? 'm-2 w-16' : 'w-0'
                     }`}
                 >
                     {projectName ?? 'Dashboard'}
@@ -115,7 +99,7 @@ function TopBar(props: TopBarProps) {
                 </div>
                 <span
                     className={`opacity-50 overflow-hidden transition-width nowrap ${
-                        tab === dashboard.Tab.ide ? 'm-2 w-16' : 'w-0'
+                        tab === tabModule.Tab.ide ? 'm-2 w-16' : 'w-0'
                     }`}
                 >
                     {projectName ?? 'No project open'}
@@ -155,7 +139,7 @@ function TopBar(props: TopBarProps) {
                 <div
                     onClick={event => {
                         event.stopPropagation()
-                        setIsUserMenuVisible(!isUserMenuVisible)
+                        updateModal(oldModal => (oldModal?.type === UserMenu ? null : <UserMenu />))
                     }}
                     className="rounded-full w-8 h-8 bg-cover cursor-pointer"
                 >
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/userMenu.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/userMenu.tsx
index 86c7a29f647..6f4dfacc91e 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/userMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/userMenu.tsx
@@ -27,7 +27,7 @@ function UserMenuItem(props: React.PropsWithChildren<UserMenuItemProps>) {
         <div
             className={`whitespace-nowrap px-4 py-2 ${disabled ? 'opacity-50' : ''} ${
                 onClick ? 'hover:bg-blue-500 hover:text-white' : ''
-            } ${onClick && !disabled ? 'cursor-pointer' : ''}`}
+            } ${onClick != null && !disabled ? 'cursor-pointer' : ''}`}
             onClick={onClick}
         >
             {children}
@@ -76,7 +76,7 @@ function UserMenu() {
                     {canChangePassword && (
                         <UserMenuItem
                             onClick={() => {
-                                setModal(() => <ChangePasswordModal />)
+                                setModal(<ChangePasswordModal />)
                             }}
                         >
                             Change your password
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/dateTime.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/dateTime.ts
index 820797860d2..a50eae9baad 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/dateTime.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/dateTime.ts
@@ -14,6 +14,10 @@ const HALF_DAY_HOURS = 12
 
 /** A string with date and time, following the RFC3339 specification. */
 export type Rfc3339DateTime = newtype.Newtype<string, 'Rfc3339DateTime'>
+/** Create a {@link Rfc3339DateTime}. */
+// This is a constructor function that constructs values of the type it is named after.
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const Rfc3339DateTime = newtype.newtypeConstructor<Rfc3339DateTime>()
 
 /** Formats date time into the preferred format: `YYYY-MM-DD, hh:mm`. */
 export function formatDateTime(date: Date) {
@@ -44,5 +48,5 @@ export function formatDateTimeChatFriendly(date: Date) {
 
 /** Formats a {@link Date} as a {@link Rfc3339DateTime}  */
 export function toRfc3339(date: Date) {
-    return newtype.asNewtype<Rfc3339DateTime>(date.toISOString())
+    return Rfc3339DateTime(date.toISOString())
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/event.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/event.ts
new file mode 100644
index 00000000000..ea1908b0805
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/event.ts
@@ -0,0 +1,17 @@
+/** @file Utility functions related to event handling. */
+
+import * as React from 'react'
+
+// =============================
+// === Mouse event utilities ===
+// =============================
+
+/** Returns `true` if and only if the event is a single click event. */
+export function isSingleClick(event: React.MouseEvent) {
+    return event.detail === 1
+}
+
+/** Returns `true` if and only if the event is a double click event. */
+export function isDoubleClick(event: React.MouseEvent) {
+    return event.detail === 2
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/directoryEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/directoryEvent.ts
new file mode 100644
index 00000000000..db5c1e29c97
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/directoryEvent.ts
@@ -0,0 +1,40 @@
+/** @file Events related to changes in directory state. */
+import * as backendModule from '../backend'
+
+// This is required, to whitelist this event.
+// eslint-disable-next-line no-restricted-syntax
+declare module '../../hooks' {
+    /** A map containing all known event types. */
+    export interface KnownEventsMap {
+        directoryEvent: DirectoryEvent
+    }
+}
+
+// ======================
+// === DirectoryEvent ===
+// ======================
+
+/** Possible types of directory state change. */
+export enum DirectoryEventType {
+    create = 'create',
+    deleteMultiple = 'delete-multiple',
+}
+
+/** Properties common to all directory state change events. */
+interface DirectoryBaseEvent<Type extends DirectoryEventType> {
+    type: Type
+}
+
+/** A signal to create a directory. */
+export interface DirectoryCreateEvent extends DirectoryBaseEvent<DirectoryEventType.create> {
+    placeholderId: backendModule.DirectoryId
+}
+
+/** A signal to delete multiple directories. */
+export interface DirectoryDeleteMultipleEvent
+    extends DirectoryBaseEvent<DirectoryEventType.deleteMultiple> {
+    directoryIds: Set<backendModule.DirectoryId>
+}
+
+/** Every possible type of directory event. */
+export type DirectoryEvent = DirectoryCreateEvent | DirectoryDeleteMultipleEvent
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/directoryListEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/directoryListEvent.ts
new file mode 100644
index 00000000000..2840e03da84
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/directoryListEvent.ts
@@ -0,0 +1,36 @@
+/** @file Events related to changes in the directory list. */
+
+// This is required, to whitelist this event.
+// eslint-disable-next-line no-restricted-syntax
+declare module '../../hooks' {
+    /** A map containing all known event types. */
+    export interface KnownEventsMap {
+        directoryListEvent: DirectoryListEvent
+    }
+}
+
+// ==========================
+// === DirectoryListEvent ===
+// ==========================
+
+/** Possible changes to the directory list. */
+export enum DirectoryListEventType {
+    create = 'create',
+    delete = 'delete',
+}
+
+/** Properties common to all directory list change events. */
+interface DirectoryListBaseEvent<Type extends DirectoryListEventType> {
+    type: Type
+}
+
+/** A signal to create a new directory. */
+interface DirectoryListCreateEvent extends DirectoryListBaseEvent<DirectoryListEventType.create> {}
+
+/** A signal to delete a directory. */
+interface DirectoryListDeleteEvent extends DirectoryListBaseEvent<DirectoryListEventType.delete> {
+    directoryId: string
+}
+
+/** Every possible type of directory list event. */
+export type DirectoryListEvent = DirectoryListCreateEvent | DirectoryListDeleteEvent
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/fileEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/fileEvent.ts
new file mode 100644
index 00000000000..bf744410c20
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/fileEvent.ts
@@ -0,0 +1,39 @@
+/** @file Events related to changes in file state. */
+import * as backendModule from '../backend'
+
+// This is required, to whitelist this event.
+// eslint-disable-next-line no-restricted-syntax
+declare module '../../hooks' {
+    /** A map containing all known event types. */
+    export interface KnownEventsMap {
+        fileEvent: FileEvent
+    }
+}
+
+// =================
+// === FileEvent ===
+// =================
+
+/** Possible types of file state change. */
+export enum FileEventType {
+    createMultiple = 'create-multiple',
+    deleteMultiple = 'delete-multiple',
+}
+
+/** Properties common to all file state change events. */
+interface FileBaseEvent<Type extends FileEventType> {
+    type: Type
+}
+
+/** A signal to create multiple files. */
+export interface FileCreateMultipleEvent extends FileBaseEvent<FileEventType.createMultiple> {
+    files: Map<backendModule.FileId, File>
+}
+
+/** A signal to delete multiple files. */
+export interface FileDeleteMultipleEvent extends FileBaseEvent<FileEventType.deleteMultiple> {
+    fileIds: Set<backendModule.FileId>
+}
+
+/** Every possible type of file event. */
+export type FileEvent = FileCreateMultipleEvent | FileDeleteMultipleEvent
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/fileListEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/fileListEvent.ts
new file mode 100644
index 00000000000..b8691184c59
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/fileListEvent.ts
@@ -0,0 +1,38 @@
+/** @file Events related to changes in the file list. */
+
+// This is required, to whitelist this event.
+// eslint-disable-next-line no-restricted-syntax
+declare module '../../hooks' {
+    /** A map containing all known event types. */
+    export interface KnownEventsMap {
+        fileListEvent: FileListEvent
+    }
+}
+
+// =====================
+// === FileListEvent ===
+// =====================
+
+/** Possible changes to the file list. */
+export enum FileListEventType {
+    uploadMultiple = 'upload-multiple',
+    delete = 'delete',
+}
+
+/** Properties common to all file list change events. */
+interface FileListBaseEvent<Type extends FileListEventType> {
+    type: Type
+}
+
+/** A signal to upload multiple files. */
+interface FileListUploadMultipleEvent extends FileListBaseEvent<FileListEventType.uploadMultiple> {
+    files: FileList
+}
+
+/** A signal to delete a file. */
+interface FileListDeleteEvent extends FileListBaseEvent<FileListEventType.delete> {
+    fileId: string
+}
+
+/** Every possible type of file list event. */
+export type FileListEvent = FileListDeleteEvent | FileListUploadMultipleEvent
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/projectEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/projectEvent.ts
new file mode 100644
index 00000000000..4716e53ce4a
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/projectEvent.ts
@@ -0,0 +1,67 @@
+/** @file Events related to changes in project state. */
+import * as backendModule from '../backend'
+import * as spinner from '../components/spinner'
+
+// This is required, to whitelist this event.
+// eslint-disable-next-line no-restricted-syntax
+declare module '../../hooks' {
+    /** A map containing all known event types. */
+    export interface KnownEventsMap {
+        projectEvent: ProjectEvent
+    }
+}
+
+// ====================
+// === ProjectEvent ===
+// ====================
+
+/** Possible types of project state change. */
+export enum ProjectEventType {
+    create = 'create',
+    open = 'open',
+    showAsOpening = 'show-as-opening',
+    cancelOpeningAll = 'cancel-opening-all',
+    deleteMultiple = 'delete-multiple',
+}
+
+/** Properties common to all project state change events. */
+interface ProjectBaseEvent<Type extends ProjectEventType> {
+    type: Type
+}
+
+/** A signal to create a project. */
+export interface ProjectCreateEvent extends ProjectBaseEvent<ProjectEventType.create> {
+    placeholderId: backendModule.ProjectId
+    templateId: string | null
+    onSpinnerStateChange: ((state: spinner.SpinnerState) => void) | null
+}
+
+/** A signal to open the specified project. */
+export interface ProjectOpenEvent extends ProjectBaseEvent<ProjectEventType.open> {
+    projectId: backendModule.ProjectId
+}
+
+/** A signal to display the specified project as opening, but not actually send the call to the
+ * backend. */
+export interface ProjectShowAsOpeningEvent
+    extends ProjectBaseEvent<ProjectEventType.showAsOpening> {
+    projectId: backendModule.ProjectId
+}
+
+/** A signal to stop automatically opening any project that is currently opening. */
+export interface ProjectCancelOpeningAllEvent
+    extends ProjectBaseEvent<ProjectEventType.cancelOpeningAll> {}
+
+/** A signal to delete multiple projects. */
+export interface ProjectDeleteMultipleEvent
+    extends ProjectBaseEvent<ProjectEventType.deleteMultiple> {
+    projectIds: Set<backendModule.ProjectId>
+}
+
+/** Every possible type of project event. */
+export type ProjectEvent =
+    | ProjectCancelOpeningAllEvent
+    | ProjectCreateEvent
+    | ProjectDeleteMultipleEvent
+    | ProjectOpenEvent
+    | ProjectShowAsOpeningEvent
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/projectListEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/projectListEvent.ts
new file mode 100644
index 00000000000..8639b6181b4
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/projectListEvent.ts
@@ -0,0 +1,40 @@
+/** @file Events related to changes in the project list. */
+import * as spinner from '../components/spinner'
+
+// This is required, to whitelist this event.
+// eslint-disable-next-line no-restricted-syntax
+declare module '../../hooks' {
+    /** A map containing all known event types. */
+    export interface KnownEventsMap {
+        projectListEvent: ProjectListEvent
+    }
+}
+
+// ========================
+// === ProjectListEvent ===
+// ========================
+
+/** Possible changes to the project list. */
+export enum ProjectListEventType {
+    create = 'create',
+    delete = 'delete',
+}
+
+/** Properties common to all project list events. */
+interface ProjectListBaseEvent<Type extends ProjectListEventType> {
+    type: Type
+}
+
+/** A signal to create a new project. */
+interface ProjectListCreateEvent extends ProjectListBaseEvent<ProjectListEventType.create> {
+    templateId: string | null
+    onSpinnerStateChange: ((state: spinner.SpinnerState) => void) | null
+}
+
+/** A signal to delete a project. */
+interface ProjectListDeleteEvent extends ProjectListBaseEvent<ProjectListEventType.delete> {
+    projectId: string
+}
+
+/** Every possible type of project list event. */
+export type ProjectListEvent = ProjectListCreateEvent | ProjectListDeleteEvent
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/secretEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/secretEvent.ts
new file mode 100644
index 00000000000..c6527fc2b92
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/secretEvent.ts
@@ -0,0 +1,40 @@
+/** @file Events related to changes in secret state. */
+import * as backendModule from '../backend'
+
+// This is required, to whitelist this event.
+// eslint-disable-next-line no-restricted-syntax
+declare module '../../hooks' {
+    /** A map containing all known event types. */
+    export interface KnownEventsMap {
+        secretEvent: SecretEvent
+    }
+}
+
+// ===================
+// === SecretEvent ===
+// ===================
+
+/** Possible types of secret state change. */
+export enum SecretEventType {
+    create = 'create',
+    deleteMultiple = 'delete-multiple',
+}
+
+/** Properties common to all secret state change events. */
+interface SecretBaseEvent<Type extends SecretEventType> {
+    type: Type
+}
+
+/** A signal to create a secret. */
+export interface SecretCreateEvent extends SecretBaseEvent<SecretEventType.create> {
+    placeholderId: backendModule.SecretId
+    value: string
+}
+
+/** A signal to delete multiple secrets. */
+export interface SecretDeleteMultipleEvent extends SecretBaseEvent<SecretEventType.deleteMultiple> {
+    secretIds: Set<backendModule.SecretId>
+}
+
+/** Every possible type of secret event. */
+export type SecretEvent = SecretCreateEvent | SecretDeleteMultipleEvent
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/secretListEvent.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/secretListEvent.ts
new file mode 100644
index 00000000000..2804adb2a58
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/events/secretListEvent.ts
@@ -0,0 +1,39 @@
+/** @file Events related to changes in the secret list. */
+
+// This is required, to whitelist this event.
+// eslint-disable-next-line no-restricted-syntax
+declare module '../../hooks' {
+    /** A map containing all known event types. */
+    export interface KnownEventsMap {
+        secretListEvent: SecretListEvent
+    }
+}
+
+// =======================
+// === SecretListEvent ===
+// =======================
+
+/** Possible changes to the secret list. */
+export enum SecretListEventType {
+    create = 'create',
+    delete = 'delete',
+}
+
+/** Properties common to all secret list change events. */
+interface SecretListBaseEvent<Type extends SecretListEventType> {
+    type: Type
+}
+
+/** A signal to create a new secret. */
+interface SecretListCreateEvent extends SecretListBaseEvent<SecretListEventType.create> {
+    name: string
+    value: string
+}
+
+/** A signal to delete a secret. */
+interface SecretListDeleteEvent extends SecretListBaseEvent<SecretListEventType.delete> {
+    secretId: string
+}
+
+/** Every possible type of secret list event. */
+export type SecretListEvent = SecretListCreateEvent | SecretListDeleteEvent
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/featureFlags.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/featureFlags.ts
new file mode 100644
index 00000000000..489ced059bd
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/featureFlags.ts
@@ -0,0 +1,12 @@
+/** @file Flags for features that are implemented, but disabled either because
+ * they are not production-ready, or because it is unknown whether they are still needed. */
+
+export const FEATURE_FLAGS = {
+    /** A selector that lets the user choose between pre-defined sets of visible columns. */
+    columnDisplayModeSwitcher: false,
+}
+
+if (IS_DEV_MODE) {
+    // @ts-expect-error This is exposed for development purposes only.
+    window.featureFlags = FEATURE_FLAGS
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/localBackend.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/localBackend.ts
index 8a09d3bef97..c8fc29cefce 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/localBackend.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/localBackend.ts
@@ -4,7 +4,7 @@
  * The functions are asynchronous and return a {@link Promise} that resolves to the response from
  * the API. */
 import * as backend from './backend'
-import * as newtype from '../newtype'
+import * as errorModule from '../error'
 import * as projectManager from './projectManager'
 
 // ========================
@@ -13,24 +13,18 @@ import * as projectManager from './projectManager'
 
 /** Convert a {@link projectManager.IpWithSocket} to a {@link backend.Address}. */
 function ipWithSocketToAddress(ipWithSocket: projectManager.IpWithSocket) {
-    return newtype.asNewtype<backend.Address>(`ws://${ipWithSocket.host}:${ipWithSocket.port}`)
+    return backend.Address(`ws://${ipWithSocket.host}:${ipWithSocket.port}`)
 }
 
 // ====================
 // === LocalBackend ===
 // ====================
 
-/** The currently open project and its ID. */
-interface CurrentlyOpenProjectInfo {
-    id: projectManager.ProjectId
-    project: projectManager.OpenProject
-}
-
 /** Class for sending requests to the Project Manager API endpoints.
  * This is used instead of the cloud backend API when managing local projects from the dashboard. */
 export class LocalBackend implements Partial<backend.Backend> {
     static currentlyOpeningProjectId: backend.ProjectId | null = null
-    static currentlyOpenProject: CurrentlyOpenProjectInfo | null = null
+    static currentlyOpenProjects = new Map<projectManager.ProjectId, projectManager.OpenProject>()
     readonly type = backend.BackendType.local
     private readonly projectManager = projectManager.ProjectManager.default()
 
@@ -53,17 +47,16 @@ export class LocalBackend implements Partial<backend.Backend> {
             id: project.id,
             title: project.name,
             modifiedAt: project.lastOpened ?? project.created,
-            parentId: newtype.asNewtype<backend.AssetId>(''),
+            parentId: backend.DirectoryId(''),
             permissions: [],
             projectState: {
-                type:
-                    project.id === LocalBackend.currentlyOpenProject?.id
-                        ? backend.ProjectState.opened
-                        : project.id === LocalBackend.currentlyOpeningProjectId
-                        ? backend.ProjectState.openInProgress
-                        : project.lastOpened != null
-                        ? backend.ProjectState.closed
-                        : backend.ProjectState.created,
+                type: LocalBackend.currentlyOpenProjects.has(project.id)
+                    ? backend.ProjectState.opened
+                    : project.id === LocalBackend.currentlyOpeningProjectId
+                    ? backend.ProjectState.openInProgress
+                    : project.lastOpened != null
+                    ? backend.ProjectState.closed
+                    : backend.ProjectState.created,
             },
         }))
     }
@@ -91,7 +84,7 @@ export class LocalBackend implements Partial<backend.Backend> {
      * @throws An error if the JSON-RPC call fails. */
     async createProject(body: backend.CreateProjectRequestBody): Promise<backend.CreatedProject> {
         const project = await this.projectManager.createProject({
-            name: newtype.asNewtype<projectManager.ProjectName>(body.projectName),
+            name: projectManager.ProjectName(body.projectName),
             ...(body.projectTemplateName != null
                 ? { projectTemplate: body.projectTemplateName }
                 : {}),
@@ -111,37 +104,45 @@ export class LocalBackend implements Partial<backend.Backend> {
     /** Close the project identified by the given project ID.
      *
      * @throws An error if the JSON-RPC call fails. */
-    async closeProject(projectId: backend.ProjectId): Promise<void> {
+    async closeProject(projectId: backend.ProjectId, title: string | null): Promise<void> {
         if (LocalBackend.currentlyOpeningProjectId === projectId) {
             LocalBackend.currentlyOpeningProjectId = null
         }
-        if (LocalBackend.currentlyOpenProject?.id === projectId) {
-            LocalBackend.currentlyOpenProject = null
+        LocalBackend.currentlyOpenProjects.delete(projectId)
+        try {
+            await this.projectManager.closeProject({ projectId })
+            return
+        } catch (error) {
+            throw new Error(
+                `Unable to close project ${
+                    title != null ? `'${title}'` : `with ID '${projectId}'`
+                }: ${errorModule.tryGetMessage(error) ?? 'unknown error'}.`
+            )
         }
-        await this.projectManager.closeProject({ projectId })
     }
 
     /** Close the project identified by the given project ID.
      *
      * @throws An error if the JSON-RPC call fails. */
     async getProjectDetails(projectId: backend.ProjectId): Promise<backend.Project> {
-        if (projectId !== LocalBackend.currentlyOpenProject?.id) {
+        const cachedProject = LocalBackend.currentlyOpenProjects.get(projectId)
+        if (cachedProject == null) {
             const result = await this.projectManager.listProjects({})
             const project = result.projects.find(listedProject => listedProject.id === projectId)
             const engineVersion = project?.engineVersion
             if (project == null) {
                 throw new Error(`The project ID '${projectId}' is invalid.`)
             } else if (engineVersion == null) {
-                throw new Error(`The project '${projectId}' does not have an engine version.`)
+                throw new Error(`The project '${project.name}' does not have an engine version.`)
             } else {
-                return Promise.resolve<backend.Project>({
+                return {
                     name: project.name,
                     engineVersion: {
-                        lifecycle: backend.VersionLifecycle.stable,
+                        lifecycle: backend.detectVersionLifecycle(engineVersion),
                         value: engineVersion,
                     },
                     ideVersion: {
-                        lifecycle: backend.VersionLifecycle.stable,
+                        lifecycle: backend.detectVersionLifecycle(engineVersion),
                         value: engineVersion,
                     },
                     jsonAddress: null,
@@ -157,43 +158,55 @@ export class LocalBackend implements Partial<backend.Backend> {
                                 ? backend.ProjectState.closed
                                 : backend.ProjectState.created,
                     },
-                })
+                }
             }
         } else {
-            const project = LocalBackend.currentlyOpenProject.project
-            return Promise.resolve<backend.Project>({
-                name: project.projectName,
+            return {
+                name: cachedProject.projectName,
                 engineVersion: {
-                    lifecycle: backend.VersionLifecycle.stable,
-                    value: project.engineVersion,
+                    lifecycle: backend.detectVersionLifecycle(cachedProject.engineVersion),
+                    value: cachedProject.engineVersion,
                 },
                 ideVersion: {
-                    lifecycle: backend.VersionLifecycle.stable,
-                    value: project.engineVersion,
+                    lifecycle: backend.detectVersionLifecycle(cachedProject.engineVersion),
+                    value: cachedProject.engineVersion,
                 },
-                jsonAddress: ipWithSocketToAddress(project.languageServerJsonAddress),
-                binaryAddress: ipWithSocketToAddress(project.languageServerBinaryAddress),
+                jsonAddress: ipWithSocketToAddress(cachedProject.languageServerJsonAddress),
+                binaryAddress: ipWithSocketToAddress(cachedProject.languageServerBinaryAddress),
                 organizationId: '',
-                packageName: project.projectName,
+                packageName: cachedProject.projectName,
                 projectId,
                 state: {
                     type: backend.ProjectState.opened,
                 },
-            })
+            }
         }
     }
 
     /** Prepare a project for execution.
      *
      * @throws An error if the JSON-RPC call fails. */
-    async openProject(projectId: backend.ProjectId): Promise<void> {
+    async openProject(
+        projectId: backend.ProjectId,
+        _body: backend.OpenProjectRequestBody | null,
+        title: string | null
+    ): Promise<void> {
         LocalBackend.currentlyOpeningProjectId = projectId
-        const project = await this.projectManager.openProject({
-            projectId,
-            missingComponentAction: projectManager.MissingComponentAction.install,
-        })
-        if (LocalBackend.currentlyOpeningProjectId === projectId) {
-            LocalBackend.currentlyOpenProject = { id: projectId, project }
+        if (!LocalBackend.currentlyOpenProjects.has(projectId)) {
+            try {
+                const project = await this.projectManager.openProject({
+                    projectId,
+                    missingComponentAction: projectManager.MissingComponentAction.install,
+                })
+                LocalBackend.currentlyOpenProjects.set(projectId, project)
+                return
+            } catch (error) {
+                throw new Error(
+                    `Unable to open project ${
+                        title != null ? `'${title}'` : `with ID '${projectId}'`
+                    }: ${errorModule.tryGetMessage(error) ?? 'unknown error'}.`
+                )
+            }
         }
     }
 
@@ -210,7 +223,7 @@ export class LocalBackend implements Partial<backend.Backend> {
             if (body.projectName != null) {
                 await this.projectManager.renameProject({
                     projectId,
-                    name: newtype.asNewtype<projectManager.ProjectName>(body.projectName),
+                    name: projectManager.ProjectName(body.projectName),
                 })
             }
             const result = await this.projectManager.listProjects({})
@@ -219,7 +232,7 @@ export class LocalBackend implements Partial<backend.Backend> {
             if (project == null) {
                 throw new Error(`The project ID '${projectId}' is invalid.`)
             } else if (engineVersion == null) {
-                throw new Error(`The project '${projectId}' does not have an engine version.`)
+                throw new Error(`The project '${project.name}' does not have an engine version.`)
             } else {
                 return {
                     ami: null,
@@ -242,13 +255,20 @@ export class LocalBackend implements Partial<backend.Backend> {
     /** Delete a project.
      *
      * @throws An error if the JSON-RPC call fails. */
-    async deleteProject(projectId: backend.ProjectId): Promise<void> {
+    async deleteProject(projectId: backend.ProjectId, title: string | null): Promise<void> {
         if (LocalBackend.currentlyOpeningProjectId === projectId) {
             LocalBackend.currentlyOpeningProjectId = null
         }
-        if (LocalBackend.currentlyOpenProject?.id === projectId) {
-            LocalBackend.currentlyOpenProject = null
+        LocalBackend.currentlyOpenProjects.delete(projectId)
+        try {
+            await this.projectManager.deleteProject({ projectId })
+            return
+        } catch (error) {
+            throw new Error(
+                `Unable to delete project ${
+                    title != null ? `'${title}'` : `with ID '${projectId}'`
+                }: ${errorModule.tryGetMessage(error) ?? 'unknown error'}.`
+            )
         }
-        await this.projectManager.deleteProject({ projectId })
     }
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/permissions.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/permissions.ts
new file mode 100644
index 00000000000..c5802a8e480
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/permissions.ts
@@ -0,0 +1,23 @@
+/** @file Utilities for working with permissions. */
+import * as backend from './backend'
+
+/** Returns an array containing the owner permission if `owner` is not `null`;
+ * else returns an empty array (`[]`). */
+export function tryGetSingletonOwnerPermission(owner: backend.UserOrOrganization | null) {
+    return owner != null
+        ? [
+              {
+                  user: {
+                      // The names are defined by the backend and cannot be changed.
+                      /* eslint-disable @typescript-eslint/naming-convention */
+                      pk: backend.Subject(''),
+                      organization_id: owner.id,
+                      user_email: owner.email,
+                      user_name: owner.name,
+                      /* eslint-enable @typescript-eslint/naming-convention */
+                  },
+                  permission: backend.PermissionAction.own,
+              },
+          ]
+        : []
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/presence.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/presence.ts
new file mode 100644
index 00000000000..6020616d77b
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/presence.ts
@@ -0,0 +1,29 @@
+/** @file Types and functions for representing optimistic state.
+ * Optimistic UI is when UI updates are applied immediately with the expected result, instead of
+ * waiting for a server response, based on the assumption that virtually all requests succeed.
+ * In our case it is MANDATORY because immediate user feedback is important. */
+
+// ================
+// === Presence ===
+// ================
+
+/** The state of an item being synced to a remote server. */
+export enum Presence {
+    /** The item is present. */
+    present = 'present',
+    /** The item will be inserted, but the backend request has not yet finished. */
+    inserting = 'inserting',
+    /** The item will be deleted, but the backend request has not yet finished. */
+    deleting = 'deleting',
+}
+
+// =================
+// === Constants ===
+// =================
+
+/** The corresponding CSS classes for table rows, for each {@link Presence}. */
+export const CLASS_NAME: Record<Presence, string> = {
+    [Presence.present]: '',
+    [Presence.deleting]: 'hidden',
+    [Presence.inserting]: 'opacity-50 pointer-events-none-recursive',
+} as const
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager.ts
index 38d3b35bd7e..0cd3e1a110b 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager.ts
@@ -53,14 +53,25 @@ interface JSONRPCErrorResponse extends JSONRPCBaseResponse {
 /** The return value of a JSON-RPC call. */
 type JSONRPCResponse<T> = JSONRPCErrorResponse | JSONRPCSuccessResponse<T>
 
+// These are constructor functions that construct values of the type they are named after.
+/* eslint-disable @typescript-eslint/no-redeclare */
+
 // This intentionally has the same brand as in the cloud backend API.
 /** An ID of a project. */
 export type ProjectId = newtype.Newtype<string, 'ProjectId'>
+/** Create a {@link ProjectId}. */
+export const ProjectId = newtype.newtypeConstructor<ProjectId>()
 /** A name of a project. */
 export type ProjectName = newtype.Newtype<string, 'ProjectName'>
+/** Create a {@link ProjectName}. */
+export const ProjectName = newtype.newtypeConstructor<ProjectName>()
 /** The newtype's `TypeName` is intentionally different from the name of this type alias,
  * to match the backend's newtype. */
 export type UTCDateTime = dateTime.Rfc3339DateTime
+/** Create a {@link UTCDateTime}. */
+export const UTCDateTime = newtype.newtypeConstructor<UTCDateTime>()
+
+/* eslint-enable @typescript-eslint/no-redeclare */
 
 /** Details for a project. */
 export interface ProjectMetadata {
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/remoteBackend.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/remoteBackend.ts
index cb447037f35..aef884920fc 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/remoteBackend.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/remoteBackend.ts
@@ -7,7 +7,6 @@ import * as backend from './backend'
 import * as config from '../config'
 import * as http from '../http'
 import * as loggerProvider from '../providers/logger'
-import * as newtype from '../newtype'
 
 // =================
 // === Constants ===
@@ -70,6 +69,14 @@ const CREATE_TAG_PATH = 'tags'
 const LIST_TAGS_PATH = 'tags'
 /** Relative HTTP path to the "list versions" endpoint of the Cloud backend API. */
 const LIST_VERSIONS_PATH = 'versions'
+/** Relative HTTP path to the "update directory" endpoint of the Cloud backend API. */
+function updateDirectoryPath(directoryId: backend.DirectoryId) {
+    return `directories/${directoryId}`
+}
+/** Relative HTTP path to the "delete directory" endpoint of the Cloud backend API. */
+function deleteDirectoryPath(directoryId: backend.DirectoryId) {
+    return `directories/${directoryId}`
+}
 /** Relative HTTP path to the "close project" endpoint of the Cloud backend API. */
 function closeProjectPath(projectId: backend.ProjectId) {
     return `projects/${projectId}/close`
@@ -228,7 +235,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return organization info for the current user.
      *
-     * @returns `null` if any status code other than 200 OK was received. */
+     * @returns `null` if a non-successful status code (not 200-299) was received. */
     async usersMe(): Promise<backend.UserOrOrganization | null> {
         const response = await this.get<backend.UserOrOrganization>(USERS_ME_PATH)
         if (!responseIsSuccessful(response)) {
@@ -240,8 +247,11 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return a list of assets in a directory.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async listDirectory(query: backend.ListDirectoryRequestParams): Promise<backend.Asset[]> {
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async listDirectory(
+        query: backend.ListDirectoryRequestParams,
+        title: string | null
+    ): Promise<backend.Asset[]> {
         const response = await this.get<ListDirectoryResponseBody>(
             LIST_DIRECTORY_PATH +
                 '?' +
@@ -255,7 +265,11 @@ export class RemoteBackend implements backend.Backend {
                 // The directory is probably empty.
                 return []
             } else if (query.parentId != null) {
-                return this.throw(`Unable to list directory with ID '${query.parentId}'.`)
+                return this.throw(
+                    `Unable to list directory ${
+                        title != null ? `'${title}'` : `with ID '${query.parentId}'`
+                    }.`
+                )
             } else {
                 return this.throw('Unable to list root directory.')
             }
@@ -270,9 +284,11 @@ export class RemoteBackend implements backend.Backend {
 
     /** Create a directory.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async createDirectory(body: backend.CreateDirectoryRequestBody): Promise<backend.Directory> {
-        const response = await this.post<backend.Directory>(CREATE_DIRECTORY_PATH, body)
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async createDirectory(
+        body: backend.CreateDirectoryRequestBody
+    ): Promise<backend.CreatedDirectory> {
+        const response = await this.post<backend.CreatedDirectory>(CREATE_DIRECTORY_PATH, body)
         if (!responseIsSuccessful(response)) {
             return this.throw(`Unable to create directory with name '${body.title}'.`)
         } else {
@@ -280,9 +296,48 @@ export class RemoteBackend implements backend.Backend {
         }
     }
 
+    /** Change the name of a directory.
+     *
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async updateDirectory(
+        directoryId: backend.DirectoryId,
+        body: backend.UpdateDirectoryRequestBody,
+        title: string | null
+    ) {
+        const response = await this.put<backend.UpdatedDirectory>(
+            updateDirectoryPath(directoryId),
+            body
+        )
+        if (!responseIsSuccessful(response)) {
+            return this.throw(
+                `Unable to update directory ${
+                    title != null ? `'${title}'` : `with ID '${directoryId}'`
+                }.`
+            )
+        } else {
+            return await response.json()
+        }
+    }
+
+    /** Change the name of a directory.
+     *
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async deleteDirectory(directoryId: backend.DirectoryId, title: string | null) {
+        const response = await this.delete(deleteDirectoryPath(directoryId))
+        if (!responseIsSuccessful(response)) {
+            return this.throw(
+                `Unable to delete directory ${
+                    title != null ? `'${title}'` : `with ID '${directoryId}'`
+                }.`
+            )
+        } else {
+            return
+        }
+    }
+
     /** Return a list of projects belonging to the current user.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async listProjects(): Promise<backend.ListedProject[]> {
         const response = await this.get<ListProjectsResponseBody>(LIST_PROJECTS_PATH)
         if (!responseIsSuccessful(response)) {
@@ -291,20 +346,16 @@ export class RemoteBackend implements backend.Backend {
             return (await response.json()).projects.map(project => ({
                 ...project,
                 jsonAddress:
-                    project.address != null
-                        ? newtype.asNewtype<backend.Address>(`${project.address}json`)
-                        : null,
+                    project.address != null ? backend.Address(`${project.address}json`) : null,
                 binaryAddress:
-                    project.address != null
-                        ? newtype.asNewtype<backend.Address>(`${project.address}binary`)
-                        : null,
+                    project.address != null ? backend.Address(`${project.address}binary`) : null,
             }))
         }
     }
 
     /** Create a project.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async createProject(body: backend.CreateProjectRequestBody): Promise<backend.CreatedProject> {
         const response = await this.post<backend.CreatedProject>(CREATE_PROJECT_PATH, body)
         if (!responseIsSuccessful(response)) {
@@ -316,11 +367,15 @@ export class RemoteBackend implements backend.Backend {
 
     /** Close a project.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async closeProject(projectId: backend.ProjectId): Promise<void> {
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async closeProject(projectId: backend.ProjectId, title: string | null): Promise<void> {
         const response = await this.post(closeProjectPath(projectId), {})
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to close project with ID '${projectId}'.`)
+            return this.throw(
+                `Unable to close project ${
+                    title != null ? `'${title}'` : `with ID '${projectId}'`
+                }.`
+            )
         } else {
             return
         }
@@ -328,37 +383,46 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return details for a project.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async getProjectDetails(projectId: backend.ProjectId): Promise<backend.Project> {
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async getProjectDetails(
+        projectId: backend.ProjectId,
+        title: string | null
+    ): Promise<backend.Project> {
         const response = await this.get<backend.ProjectRaw>(getProjectDetailsPath(projectId))
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to get details of project with ID '${projectId}'.`)
+            return this.throw(
+                `Unable to get details of project ${
+                    title != null ? `'${title}'` : `with ID '${projectId}'`
+                }.`
+            )
         } else {
             const project = await response.json()
             return {
                 ...project,
                 jsonAddress:
-                    project.address != null
-                        ? newtype.asNewtype<backend.Address>(`${project.address}json`)
-                        : null,
+                    project.address != null ? backend.Address(`${project.address}json`) : null,
                 binaryAddress:
-                    project.address != null
-                        ? newtype.asNewtype<backend.Address>(`${project.address}binary`)
-                        : null,
+                    project.address != null ? backend.Address(`${project.address}binary`) : null,
             }
         }
     }
 
     /** Prepare a project for execution.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async openProject(
         projectId: backend.ProjectId,
-        body: backend.OpenProjectRequestBody = DEFAULT_OPEN_PROJECT_BODY
+        body: backend.OpenProjectRequestBody | null,
+        title: string | null
     ): Promise<void> {
-        const response = await this.post(openProjectPath(projectId), body)
+        const response = await this.post(
+            openProjectPath(projectId),
+            body ?? DEFAULT_OPEN_PROJECT_BODY
+        )
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to open project with ID '${projectId}'.`)
+            return this.throw(
+                `Unable to open project ${title != null ? `'${title}'` : `with ID '${projectId}'`}.`
+            )
         } else {
             return
         }
@@ -366,14 +430,19 @@ export class RemoteBackend implements backend.Backend {
 
     /** Update the name or AMI of a project.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async projectUpdate(
         projectId: backend.ProjectId,
-        body: backend.ProjectUpdateRequestBody
+        body: backend.ProjectUpdateRequestBody,
+        title: string | null
     ): Promise<backend.UpdatedProject> {
         const response = await this.put<backend.UpdatedProject>(projectUpdatePath(projectId), body)
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to update project with ID '${projectId}'.`)
+            return this.throw(
+                `Unable to update project ${
+                    title != null ? `'${title}'` : `with ID '${projectId}'`
+                }.`
+            )
         } else {
             return await response.json()
         }
@@ -381,11 +450,15 @@ export class RemoteBackend implements backend.Backend {
 
     /** Delete a project.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async deleteProject(projectId: backend.ProjectId): Promise<void> {
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async deleteProject(projectId: backend.ProjectId, title: string | null): Promise<void> {
         const response = await this.delete(deleteProjectPath(projectId))
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to delete project with ID '${projectId}'.`)
+            return this.throw(
+                `Unable to delete project ${
+                    title != null ? `'${title}'` : `with ID '${projectId}'`
+                }.`
+            )
         } else {
             return
         }
@@ -393,11 +466,18 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return the resource usage of a project.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async checkResources(projectId: backend.ProjectId): Promise<backend.ResourceUsage> {
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async checkResources(
+        projectId: backend.ProjectId,
+        title: string | null
+    ): Promise<backend.ResourceUsage> {
         const response = await this.get<backend.ResourceUsage>(checkResourcesPath(projectId))
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to get resource usage for project with ID '${projectId}'.`)
+            return this.throw(
+                `Unable to get resource usage for project ${
+                    title != null ? `'${title}'` : `with ID '${projectId}'`
+                }.`
+            )
         } else {
             return await response.json()
         }
@@ -405,7 +485,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return a list of files accessible by the current user.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async listFiles(): Promise<backend.File[]> {
         const response = await this.get<ListFilesResponseBody>(LIST_FILES_PATH)
         if (!responseIsSuccessful(response)) {
@@ -417,7 +497,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Upload a file.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async uploadFile(
         params: backend.UploadFileRequestParams,
         body: Blob
@@ -451,11 +531,13 @@ export class RemoteBackend implements backend.Backend {
 
     /** Delete a file.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async deleteFile(fileId: backend.FileId): Promise<void> {
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async deleteFile(fileId: backend.FileId, title: string | null): Promise<void> {
         const response = await this.delete(deleteFilePath(fileId))
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to delete file with ID '${fileId}'.`)
+            return this.throw(
+                `Unable to delete file ${title != null ? `'${title}'` : `with ID '${fileId}'`}.`
+            )
         } else {
             return
         }
@@ -463,7 +545,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Create a secret environment variable.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async createSecret(body: backend.CreateSecretRequestBody): Promise<backend.SecretAndInfo> {
         const response = await this.post<backend.SecretAndInfo>(CREATE_SECRET_PATH, body)
         if (!responseIsSuccessful(response)) {
@@ -475,11 +557,13 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return a secret environment variable.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async getSecret(secretId: backend.SecretId): Promise<backend.Secret> {
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async getSecret(secretId: backend.SecretId, title: string | null): Promise<backend.Secret> {
         const response = await this.get<backend.Secret>(getSecretPath(secretId))
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to get secret with ID '${secretId}'.`)
+            return this.throw(
+                `Unable to get secret ${title != null ? `'${title}'` : `with ID '${secretId}'`}.`
+            )
         } else {
             return await response.json()
         }
@@ -487,7 +571,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return the secret environment variables accessible by the user.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async listSecrets(): Promise<backend.SecretInfo[]> {
         const response = await this.get<ListSecretsResponseBody>(LIST_SECRETS_PATH)
         if (!responseIsSuccessful(response)) {
@@ -499,11 +583,13 @@ export class RemoteBackend implements backend.Backend {
 
     /** Delete a secret environment variable.
      *
-     * @throws An error if any status code other than 200 OK was received. */
-    async deleteSecret(secretId: backend.SecretId): Promise<void> {
+     * @throws An error if a non-successful status code (not 200-299) was received. */
+    async deleteSecret(secretId: backend.SecretId, title: string | null): Promise<void> {
         const response = await this.delete(deleteSecretPath(secretId))
         if (!responseIsSuccessful(response)) {
-            return this.throw(`Unable to delete secret with ID '${secretId}'.`)
+            return this.throw(
+                `Unable to delete secret ${title != null ? `'${title}'` : `with ID '${secretId}'`}.`
+            )
         } else {
             return
         }
@@ -511,7 +597,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Create a file tag or project tag.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async createTag(body: backend.CreateTagRequestBody): Promise<backend.TagInfo> {
         const response = await this.post<backend.TagInfo>(CREATE_TAG_PATH, {
             /* eslint-disable @typescript-eslint/naming-convention */
@@ -530,7 +616,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return file tags or project tags accessible by the user.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async listTags(params: backend.ListTagsRequestParams): Promise<backend.Tag[]> {
         const response = await this.get<ListTagsResponseBody>(
             LIST_TAGS_PATH +
@@ -549,7 +635,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Delete a secret environment variable.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async deleteTag(tagId: backend.TagId): Promise<void> {
         const response = await this.delete(deleteTagPath(tagId))
         if (!responseIsSuccessful(response)) {
@@ -561,7 +647,7 @@ export class RemoteBackend implements backend.Backend {
 
     /** Return list of backend or IDE versions.
      *
-     * @throws An error if any status code other than 200 OK was received. */
+     * @throws An error if a non-successful status code (not 200-299) was received. */
     async listVersions(
         params: backend.ListVersionsRequestParams
     ): Promise<[backend.Version, ...backend.Version[]]> {
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/shortcuts.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/shortcuts.ts
new file mode 100644
index 00000000000..fc852319e44
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/shortcuts.ts
@@ -0,0 +1,152 @@
+/** @file A registry for keyboard and mouse shortcuts. */
+import * as React from 'react'
+
+import * as detect from 'enso-common/src/detect'
+
+// =============
+// === Types ===
+// =============
+
+/** All possible mouse actions for which shortcuts can be registered. */
+export enum MouseAction {
+    editName = 'edit-name',
+    selectAdditional = 'select-additional',
+    selectRange = 'select-range',
+    selectAdditionalRange = 'select-additional-range',
+}
+
+/** All possible keyboard actions for which shortcuts can be registered. */
+export enum KeyboardAction {
+    closeModal = 'close-modal',
+    cancelEditName = 'cancel-edit-name',
+}
+
+/** Valid mouse buttons. The values of each enum member is its corresponding value of
+ * `MouseEvent.button`. */
+export enum MouseButton {
+    left = 0,
+    middle = 1,
+    right = 2,
+    back = 3,
+    forward = 4,
+}
+
+/** Restrictions on modifier keys that can trigger a shortcut.
+ *
+ * If a key is omitted, the shortcut will be triggered regardless of its value in the event. */
+interface Modifiers {
+    ctrl?: boolean
+    alt?: boolean
+    shift?: boolean
+    meta?: boolean
+}
+
+/** A keyboard shortcut. */
+export interface KeyboardShortcut extends Modifiers {
+    // Every printable character is a valid value for `key`, so unions and enums are both
+    // not an option here.
+    key: string
+}
+
+/** A mouse shortcut. If a key is omitted, that means its value does not matter. */
+export interface MouseShortcut extends Modifiers {
+    button: MouseButton
+}
+
+/** All possible modifier keys. */
+export type ModifierKey = 'Alt' | 'Ctrl' | 'Meta' | 'Shift'
+
+// ===========================
+// === modifiersMatchEvent ===
+// ===========================
+
+/** Return `true` if and only if the modifiers match the evenet's modifier key states. */
+function modifiersMatchEvent(
+    modifiers: Modifiers,
+    event: KeyboardEvent | MouseEvent | React.KeyboardEvent | React.MouseEvent
+) {
+    return (
+        ('ctrl' in modifiers ? event.ctrlKey === modifiers.ctrl : true) &&
+        ('alt' in modifiers ? event.altKey === modifiers.alt : true) &&
+        ('shift' in modifiers ? event.shiftKey === modifiers.shift : true) &&
+        ('meta' in modifiers ? event.metaKey === modifiers.meta : true)
+    )
+}
+
+// ========================
+// === ShortcutRegistry ===
+// ========================
+
+/** Holds all keyboard and mouse shortcuts, and provides functions to detect them. */
+export class ShortcutRegistry {
+    /** Create a {@link ShortcutRegistry}. */
+    constructor(
+        public keyboardShortcuts: Record<KeyboardAction, KeyboardShortcut[]>,
+        public mouseShortcuts: Record<MouseAction, MouseShortcut[]>
+    ) {}
+
+    /** Return `true` if the specified action is being triggered by the given event. */
+    matchesKeyboardAction(action: KeyboardAction, event: KeyboardEvent | React.KeyboardEvent) {
+        return this.keyboardShortcuts[action].some(
+            shortcut => shortcut.key === event.key && modifiersMatchEvent(shortcut, event)
+        )
+    }
+
+    /** Return `true` if the specified action is being triggered by the given event. */
+    matchesMouseAction(action: MouseAction, event: MouseEvent | React.MouseEvent) {
+        return this.mouseShortcuts[action].some(
+            shortcut => shortcut.button === event.button && modifiersMatchEvent(shortcut, event)
+        )
+    }
+}
+
+/** A shorthand for creating a {@link KeyboardShortcut}. Should only be used in
+ * {@link DEFAULT_KEYBOARD_SHORTCUTS}. */
+function keybind(modifiers: ModifierKey[], key: string): KeyboardShortcut {
+    return {
+        key: key,
+        ctrl: modifiers.includes('Ctrl'),
+        alt: modifiers.includes('Alt'),
+        shift: modifiers.includes('Shift'),
+        meta: modifiers.includes('Meta'),
+    }
+}
+
+/** A shorthand for creating a {@link MouseShortcut}. Should only be used in
+ * {@link DEFAULT_MOUSE_SHORTCUTS}. */
+function mousebind(modifiers: ModifierKey[], button: MouseButton): MouseShortcut {
+    return {
+        button: button,
+        ctrl: modifiers.includes('Ctrl'),
+        alt: modifiers.includes('Alt'),
+        shift: modifiers.includes('Shift'),
+        meta: modifiers.includes('Meta'),
+    }
+}
+
+// =================
+// === Constants ===
+// =================
+
+/** The equivalent of the `Control` key for the current platform. */
+const CTRL = detect.platform() === detect.Platform.macOS ? 'Meta' : 'Ctrl'
+
+/** The default keyboard shortcuts. */
+const DEFAULT_KEYBOARD_SHORTCUTS: Record<KeyboardAction, KeyboardShortcut[]> = {
+    [KeyboardAction.closeModal]: [keybind([], 'Escape')],
+    [KeyboardAction.cancelEditName]: [keybind([], 'Escape')],
+}
+
+/** The default mouse shortcuts. */
+const DEFAULT_MOUSE_SHORTCUTS: Record<MouseAction, MouseShortcut[]> = {
+    [MouseAction.editName]: [mousebind([CTRL], MouseButton.left)],
+    [MouseAction.selectAdditional]: [mousebind([CTRL], MouseButton.left)],
+    [MouseAction.selectRange]: [mousebind(['Shift'], MouseButton.left)],
+    [MouseAction.selectAdditionalRange]: [mousebind([CTRL, 'Shift'], MouseButton.left)],
+}
+
+/** The global instance of the shortcut registry. */
+export const SHORTCUT_REGISTRY = new ShortcutRegistry(
+    DEFAULT_KEYBOARD_SHORTCUTS,
+    DEFAULT_MOUSE_SHORTCUTS
+)
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/tab.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/tab.ts
new file mode 100644
index 00000000000..886165233ae
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/tab.ts
@@ -0,0 +1,12 @@
+/** @file An enum specifying the main content of the screen. Only one should be visible
+ * at a time. */
+
+// ===========
+// === Tab ===
+// ===========
+
+/** Main content of the screen. Only one should be visible at a time. */
+export enum Tab {
+    dashboard = 'dashboard',
+    ide = 'ide',
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/validation.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/validation.ts
index 972154528c6..232f1236c96 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/validation.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/validation.ts
@@ -16,3 +16,12 @@ export const PREVIOUS_PASSWORD_PATTERN = '^[\\S]+.*[\\S]+$'
 export const PREVIOUS_PASSWORD_TITLE =
     'Your password must neither start nor end with whitespace, and must contain ' +
     'at least two characters.'
+
+// The Project Manager has restrictions on names of projects.
+/** Regex pattern for valid names for local projects.
+ * @see https://github.com/enso-org/enso/blob/72ec775d8cf46b1862884fe7905477354943f0a5/lib/scala/pkg/src/main/scala/org/enso/pkg/validation/NameValidation.scala#L37
+ */
+export const LOCAL_PROJECT_NAME_PATTERN = '[A-Z]+[a-z]*(?:_\\d+|_[A-Z]+[a-z]*)*'
+/** Human readable explanation of project name restrictions for local projects. */
+export const LOCAL_PROJECT_NAME_TITLE =
+    'Project names must be in Upper_Snake_Case. (Numbers (_0, _1) are also allowed.)'
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/error.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/error.ts
index 3269b44531d..1a820a05131 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/error.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/error.ts
@@ -29,24 +29,6 @@ export function tryGetMessage(error: unknown): string | null {
         : null
 }
 
-// ================================
-// === Type assertions (unsafe) ===
-// ================================
-
-/** Assumes an unknown value is an {@link Error}. */
-export function unsafeAsError<T>(error: MustBeAny<T>) {
-    // This is UNSAFE - errors can be any value.
-    // Usually they *do* extend `Error`,
-    // however great care must be taken when deciding to use this.
-    // eslint-disable-next-line no-restricted-syntax
-    return error as Error
-}
-
-/** Extracts the `message` property of a value, by first assuming it is an {@link Error}. */
-export function unsafeIntoErrorMessage<T>(error: MustBeAny<T>) {
-    return unsafeAsError(error).message
-}
-
 // ============================
 // === UnreachableCaseError ===
 // ============================
@@ -64,3 +46,10 @@ export class UnreachableCaseError extends Error {
         super(`Unreachable case: ${JSON.stringify(value)}`)
     }
 }
+
+/** A function that throws an {@link UnreachableCaseError} so that it can be used
+ * in an expresison.
+ * @throws {UnreachableCaseError} Always. */
+export function unreachable(value: never): never {
+    throw new UnreachableCaseError(value)
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/hooks.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/hooks.tsx
index bf958a64030..ef5fde036ac 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/hooks.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/hooks.tsx
@@ -1,5 +1,6 @@
 /** @file Module containing common custom React hooks used throughout out Dashboard. */
 import * as React from 'react'
+import * as reactDom from 'react-dom'
 import * as router from 'react-router'
 
 import * as app from './components/app'
@@ -100,21 +101,61 @@ export function useNavigate() {
     return navigate
 }
 
-// ================
-// === useEvent ===
-// ================
+// =======================
+// === Reactive Events ===
+// =======================
 
-/** A wrapper around `useState` that sets its value to `null` after the current render. */
-export function useEvent<T>(): [event: T | null, dispatchEvent: (value: T | null) => void] {
-    const [event, setEvent] = React.useState<T | null>(null)
+/** A map containing all known event types. Names MUST be chosen carefully to avoid conflicts.
+ * The simplest way to achieve this is by namespacing names using a prefix. */
+export interface KnownEventsMap {}
 
-    React.useEffect(() => {
+/** A union of all known events. */
+type KnownEvent = KnownEventsMap[keyof KnownEventsMap]
+
+/** A wrapper around `useState` that calls `flushSync` after every `setState`.
+ * This is required so that no events are dropped. */
+export function useEvent<T extends KnownEvent>(): [
+    event: T | null,
+    dispatchEvent: (event: T) => void
+] {
+    const [event, rawDispatchEvent] = React.useState<T | null>(null)
+    const dispatchEvent = React.useCallback(
+        (innerEvent: T) => {
+            setTimeout(() => {
+                reactDom.flushSync(() => {
+                    rawDispatchEvent(innerEvent)
+                })
+            }, 0)
+        },
+
+        [rawDispatchEvent]
+    )
+    return [event, dispatchEvent]
+}
+
+/** A wrapper around `useEffect` that has `event` as its sole dependency. */
+export function useEventHandler<T extends KnownEvent>(
+    event: T | null,
+    effect: (event: T) => Promise<void> | void
+) {
+    let hasEffectRun = false
+    React.useLayoutEffect(() => {
+        if (IS_DEV_MODE) {
+            if (hasEffectRun) {
+                // This is the second time this event is being run in React Strict Mode.
+                // Event handlers are not supposed to be idempotent, so it is a mistake to execute it
+                // a second time.
+                // eslint-disable-next-line no-restricted-syntax
+                return
+            } else {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                hasEffectRun = true
+            }
+        }
         if (event != null) {
-            setEvent(null)
+            void effect(event)
         }
     }, [event])
-
-    return [event, setEvent]
 }
 
 // =========================================
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx
index be5d1ec5935..426fd5ad477 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/index.tsx
@@ -45,9 +45,15 @@ function run(props: app.AppProps) {
         // `supportsDeepLinks` will be incorrect when accessing the installed Electron app's pages
         // via the browser.
         const actuallySupportsDeepLinks = supportsDeepLinks && detect.isRunningInElectron()
-        reactDOM
-            .createRoot(root)
-            .render(<App {...props} supportsDeepLinks={actuallySupportsDeepLinks} />)
+        reactDOM.createRoot(root).render(
+            IS_DEV_MODE ? (
+                <React.StrictMode>
+                    <App {...props} />
+                </React.StrictMode>
+            ) : (
+                <App {...props} supportsDeepLinks={actuallySupportsDeepLinks} />
+            )
+        )
     }
 }
 
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/newtype.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/newtype.ts
index c0cae68e9fe..4414be4194e 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/newtype.ts
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/newtype.ts
@@ -37,8 +37,10 @@ interface NotNewtype {
     _$type?: never
 }
 
-/** Converts a value that is not a newtype, to a value that is a newtype. */
-export function asNewtype<T extends Newtype<unknown, string>>(s: UnNewtype<T>): T {
+/** Converts a value that is not a newtype, to a value that is a newtype.
+ * This function intentionally returns another function, to ensure that each function instance
+ * is only used for one type, avoiding the de-optimization caused by polymorphic functions. */
+export function newtypeConstructor<T extends Newtype<unknown, string>>() {
     // This cast is unsafe.
     // `T` has an extra property `_$type` which is used purely for typechecking
     // and does not exist at runtime.
@@ -46,5 +48,5 @@ export function asNewtype<T extends Newtype<unknown, string>>(s: UnNewtype<T>):
     // The property name is specifically chosen to trigger eslint's `naming-convention` lint,
     // so it should not be possible to accidentally create a value with such a type.
     // eslint-disable-next-line no-restricted-syntax
-    return s as unknown as T
+    return (s: NotNewtype & UnNewtype<T>) => s as unknown as T
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/providers/backend.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/providers/backend.tsx
index 5cbc8b01871..4195b83eb67 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/providers/backend.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/providers/backend.tsx
@@ -1,4 +1,4 @@
-/** @file Defines the React provider for the project manager `Backend`, along with hooks to use the
+/** @file The React provider for the project manager `Backend`, along with hooks to use the
  * provider via the shared React context. */
 import * as React from 'react'
 
@@ -47,14 +47,10 @@ export interface BackendProviderProps extends React.PropsWithChildren<object> {
 
 /** A React Provider that lets components get and set the current backend. */
 export function BackendProvider(props: BackendProviderProps) {
-    const { children } = props
+    const { initialBackend, children } = props
     const [backend, setBackendWithoutSavingType] = React.useState<
         localBackend.LocalBackend | remoteBackend.RemoteBackend
-        // This default value is UNSAFE, but must neither be `LocalBackend`, which may not be
-        // available, not `RemoteBackend`, which does not work when not yet logged in.
-        // Care must be taken to initialize the backend before its first usage.
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    >(null!)
+    >(initialBackend)
     const setBackend = React.useCallback((newBackend: AnyBackendAPI) => {
         setBackendWithoutSavingType(newBackend)
         localStorage.setItem(BACKEND_TYPE_KEY, newBackend.type)
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/providers/logger.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/providers/logger.tsx
index e532415c2e6..b5f3986e321 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/providers/logger.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/providers/logger.tsx
@@ -1,4 +1,4 @@
-/** @file Defines the React provider for the {@link Logger} interface, along with a hook to use the
+/** @file The React provider for the {@link Logger} interface, along with a hook to use the
  * provider via the shared React context. */
 import * as React from 'react'
 
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/providers/modal.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/providers/modal.tsx
index e6339cdd28d..b59ad18c935 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/providers/modal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/providers/modal.tsx
@@ -1,4 +1,5 @@
-/** @file  */
+/** @file The React provider for modals, along with hooks to use the provider via
+ * the shared React context. */
 import * as React from 'react'
 
 // =============
@@ -6,16 +7,23 @@ import * as React from 'react'
 // =============
 
 /** The type of a modal. */
-export type Modal = () => JSX.Element
+export type Modal = JSX.Element
+
+/** State contained in a `SetModalContext`. */
+interface SetModalContextType {
+    setModal: (modal: React.SetStateAction<Modal | null>) => void
+}
 
 /** State contained in a `ModalContext`. */
 interface ModalContextType {
     modal: Modal | null
-    setModal: (modal: Modal | null) => void
 }
 
 const ModalContext = React.createContext<ModalContextType>({
     modal: null,
+})
+
+const SetModalContext = React.createContext<SetModalContextType>({
     setModal: () => {
         // Ignored. This default value will never be used
         // as `ModalProvider` always provides its own value.
@@ -23,13 +31,31 @@ const ModalContext = React.createContext<ModalContextType>({
 })
 
 /** Props for a {@link ModalProvider}. */
-export interface ModalProviderProps extends React.PropsWithChildren<object> {}
+export interface ModalProviderProps extends React.PropsWithChildren {}
 
 /** A React provider containing the currently active modal. */
 export function ModalProvider(props: ModalProviderProps) {
     const { children } = props
     const [modal, setModal] = React.useState<Modal | null>(null)
-    return <ModalContext.Provider value={{ modal, setModal }}>{children}</ModalContext.Provider>
+    // This is NOT for optimization purposes - this is for debugging purposes,
+    // so that a change of `modal` does not trigger VDOM changes everywhere in the page.
+    const setModalProvider = React.useMemo(
+        () => <SetModalProvider setModal={setModal}>{children}</SetModalProvider>,
+        [children]
+    )
+    return <ModalContext.Provider value={{ modal }}>{setModalProvider}</ModalContext.Provider>
+}
+
+/** Props for a {@link ModalProvider}. */
+interface InternalSetModalProviderProps extends React.PropsWithChildren {
+    setModal: (modal: React.SetStateAction<Modal | null>) => void
+}
+
+/** A React provider containing a function to set the currently active modal. */
+function SetModalProvider(props: InternalSetModalProviderProps) {
+    const { setModal, children } = props
+
+    return <SetModalContext.Provider value={{ setModal }}>{children}</SetModalContext.Provider>
 }
 
 /** A React context hook exposing the currently active modal, if one is currently visible. */
@@ -40,10 +66,11 @@ export function useModal() {
 
 /** A React context hook exposing functions to set and unset the currently active modal. */
 export function useSetModal() {
-    const { setModal: setModalRaw } = React.useContext(ModalContext)
+    const { setModal: setModalRaw } = React.useContext(SetModalContext)
     const setModal: (modal: Modal) => void = setModalRaw
+    const updateModal: (updater: (modal: Modal | null) => Modal | null) => void = setModalRaw
     const unsetModal = React.useCallback(() => {
         setModalRaw(null)
     }, [/* should never change */ setModalRaw])
-    return { setModal, unsetModal }
+    return { setModal, updateModal, unsetModal }
 }
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/string.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/string.ts
new file mode 100644
index 00000000000..300c5d6b3b2
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/string.ts
@@ -0,0 +1,12 @@
+/** @file Utilities for manipulating strings. */
+
+/** Return a function returning the singular or plural form of a word depending on the count of
+ * items. */
+export function makePluralize(singular: string, plural: string) {
+    return (count: number) => (count === 1 ? singular : plural)
+}
+
+/** Return the given string, but with the first letter uppercased. */
+export function capitalizeFirst(string: string) {
+    return string.replace(/^./, match => match.toUpperCase())
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/uniqueString.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/uniqueString.ts
new file mode 100644
index 00000000000..5beb459cc83
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/uniqueString.ts
@@ -0,0 +1,14 @@
+/** @file A function that generates a unique string. */
+
+// ====================
+// === uniqueString ===
+// ====================
+
+// This is initialized to an unusual number, to minimize the chances of collision.
+let counter = Number(new Date()) >> 2
+
+/** Returns a new, mostly unique string. */
+export function uniqueString(): string {
+    counter += 1
+    return counter.toString()
+}
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/uploadMultipleFiles.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/uploadMultipleFiles.ts
deleted file mode 100644
index 7a7b9483ce5..00000000000
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/uploadMultipleFiles.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/** @file Helper function to upload multiple files,
- * with progress being reported by a continually updating toast notification. */
-import toast from 'react-hot-toast'
-
-import * as backend from './dashboard/backend'
-import * as remoteBackend from './dashboard/remoteBackend'
-
-// ===========================
-// === uploadMultipleFiles ===
-// ===========================
-
-/** Uploads multiple files to the backend, showing a continuously updated toast notification. */
-export async function uploadMultipleFiles(
-    backendService: remoteBackend.RemoteBackend,
-    directoryId: backend.DirectoryId,
-    files: File[]
-) {
-    const fileCount = files.length
-    if (fileCount === 0) {
-        toast.error('No files were dropped.')
-        return []
-    } else {
-        let successfulUploadCount = 0
-        let completedUploads = 0
-        /** "file" or "files", whicheven is appropriate. */
-        const filesWord = fileCount === 1 ? 'file' : 'files'
-        const toastId = toast.loading(`Uploading ${fileCount} ${filesWord}.`)
-        return await Promise.allSettled(
-            files.map(file =>
-                backendService
-                    .uploadFile(
-                        {
-                            fileName: file.name,
-                            parentDirectoryId: directoryId,
-                        },
-                        file
-                    )
-                    .then(() => {
-                        successfulUploadCount += 1
-                    })
-                    .catch(() => {
-                        toast.error(`Could not upload file '${file.name}'.`)
-                    })
-                    .finally(() => {
-                        completedUploads += 1
-                        if (completedUploads === fileCount) {
-                            const progress =
-                                successfulUploadCount === fileCount
-                                    ? fileCount
-                                    : `${successfulUploadCount}/${fileCount}`
-                            toast.success(`${progress} ${filesWord} uploaded.`, { id: toastId })
-                        } else {
-                            toast.loading(
-                                `${successfulUploadCount}/${fileCount} ${filesWord} uploaded.`,
-                                { id: toastId }
-                            )
-                        }
-                    })
-            )
-        )
-    }
-}
diff --git a/app/ide-desktop/lib/dashboard/src/index.tsx b/app/ide-desktop/lib/dashboard/src/index.tsx
index d2370795bd3..d7629a30146 100644
--- a/app/ide-desktop/lib/dashboard/src/index.tsx
+++ b/app/ide-desktop/lib/dashboard/src/index.tsx
@@ -6,12 +6,12 @@ import * as authentication from 'enso-authentication'
 // =================
 
 /** Path to the SSE endpoint over which esbuild sends events. */
-const ESBUILD_PATH = '/esbuild'
+const ESBUILD_PATH = './esbuild'
 /** SSE event indicating a build has finished. */
 const ESBUILD_EVENT_NAME = 'change'
 /** Path to the service worker that resolves all extensionless paths to `/index.html`.
  * This service worker is required for client-side routing to work when doing local development. */
-const SERVICE_WORKER_PATH = '/serviceWorker.js'
+const SERVICE_WORKER_PATH = './serviceWorker.js'
 
 // ===================
 // === Live reload ===
diff --git a/app/ide-desktop/lib/dashboard/src/tailwind.css b/app/ide-desktop/lib/dashboard/src/tailwind.css
index 4663c93c7cd..42fce40ab0f 100644
--- a/app/ide-desktop/lib/dashboard/src/tailwind.css
+++ b/app/ide-desktop/lib/dashboard/src/tailwind.css
@@ -153,4 +153,9 @@ body {
       }
     }
   }
+
+  .pointer-events-none-recursive,
+  .pointer-events-none-recursive * {
+    pointer-events: none;
+  }
 }
diff --git a/app/ide-desktop/package-lock.json b/app/ide-desktop/package-lock.json
index 498d4465fff..51385102f7a 100644
--- a/app/ide-desktop/package-lock.json
+++ b/app/ide-desktop/package-lock.json
@@ -27,7 +27,9 @@
         "@typescript-eslint/parser": "^5.55.0",
         "cross-env": "^7.0.3",
         "eslint": "^8.36.0",
-        "eslint-plugin-jsdoc": "^40.0.2"
+        "eslint-plugin-jsdoc": "^40.0.2",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-react-hooks": "^4.6.0"
       }
     },
     "lib/assets": {
@@ -3946,6 +3948,7 @@
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.2.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.3.0"
@@ -3959,6 +3962,7 @@
     },
     "node_modules/@eslint-community/regexpp": {
       "version": "4.4.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -3966,6 +3970,7 @@
     },
     "node_modules/@eslint/eslintrc": {
       "version": "2.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
@@ -3987,6 +3992,7 @@
     },
     "node_modules/@eslint/eslintrc/node_modules/debug": {
       "version": "4.3.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.1.2"
@@ -4002,10 +4008,12 @@
     },
     "node_modules/@eslint/eslintrc/node_modules/ms": {
       "version": "2.1.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@eslint/eslintrc/node_modules/strip-json-comments": {
       "version": "3.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4016,6 +4024,7 @@
     },
     "node_modules/@eslint/js": {
       "version": "8.36.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4085,6 +4094,7 @@
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -4097,6 +4107,7 @@
     },
     "node_modules/@humanwhocodes/config-array/node_modules/debug": {
       "version": "4.3.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.1.2"
@@ -4112,10 +4123,12 @@
     },
     "node_modules/@humanwhocodes/config-array/node_modules/ms": {
       "version": "2.1.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
+      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=12.22"
@@ -4127,6 +4140,7 @@
     },
     "node_modules/@humanwhocodes/object-schema": {
       "version": "1.2.1",
+      "dev": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/@jest/create-cache-key-function": {
@@ -4307,6 +4321,7 @@
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -4318,6 +4333,7 @@
     },
     "node_modules/@nodelib/fs.stat": {
       "version": "2.0.5",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -4325,6 +4341,7 @@
     },
     "node_modules/@nodelib/fs.walk": {
       "version": "1.2.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -5537,6 +5554,7 @@
     },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -5615,6 +5633,7 @@
     },
     "node_modules/ajv": {
       "version": "6.12.6",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -5799,6 +5818,7 @@
     },
     "node_modules/argparse": {
       "version": "2.0.1",
+      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/arr-diff": {
@@ -5827,6 +5847,7 @@
     },
     "node_modules/array-includes": {
       "version": "3.1.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -5860,6 +5881,7 @@
     },
     "node_modules/array.prototype.flatmap": {
       "version": "1.3.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -5876,6 +5898,7 @@
     },
     "node_modules/array.prototype.tosorted": {
       "version": "1.1.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -6005,6 +6028,7 @@
     },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6455,6 +6479,7 @@
     },
     "node_modules/call-bind": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.1",
@@ -6496,6 +6521,7 @@
     },
     "node_modules/callsites": {
       "version": "3.1.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -7107,6 +7133,7 @@
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -7220,6 +7247,7 @@
     },
     "node_modules/deep-is": {
       "version": "0.1.4",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/deepmerge": {
@@ -7251,6 +7279,7 @@
     },
     "node_modules/define-properties": {
       "version": "1.1.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
@@ -7487,6 +7516,7 @@
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
@@ -7742,6 +7772,7 @@
     },
     "node_modules/es-abstract": {
       "version": "1.21.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
@@ -7787,6 +7818,7 @@
     },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "get-intrinsic": "^1.1.3",
@@ -7799,6 +7831,7 @@
     },
     "node_modules/es-shim-unscopables": {
       "version": "1.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has": "^1.0.3"
@@ -7806,6 +7839,7 @@
     },
     "node_modules/es-to-primitive": {
       "version": "1.2.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-callable": "^1.1.4",
@@ -7927,6 +7961,7 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -7937,6 +7972,7 @@
     },
     "node_modules/eslint": {
       "version": "8.36.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
@@ -8070,6 +8106,7 @@
       "version": "7.32.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
       "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
+      "dev": true,
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flatmap": "^1.3.1",
@@ -8098,6 +8135,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -8107,6 +8145,7 @@
     },
     "node_modules/eslint-plugin-react/node_modules/doctrine": {
       "version": "2.1.0",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
@@ -8117,6 +8156,7 @@
     },
     "node_modules/eslint-plugin-react/node_modules/estraverse": {
       "version": "5.3.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -8136,6 +8176,7 @@
     },
     "node_modules/eslint-visitor-keys": {
       "version": "3.3.0",
+      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -8143,6 +8184,7 @@
     },
     "node_modules/eslint/node_modules/debug": {
       "version": "4.3.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.1.2"
@@ -8158,6 +8200,7 @@
     },
     "node_modules/eslint/node_modules/eslint-scope": {
       "version": "7.1.1",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -8169,6 +8212,7 @@
     },
     "node_modules/eslint/node_modules/estraverse": {
       "version": "5.3.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -8176,6 +8220,7 @@
     },
     "node_modules/eslint/node_modules/glob-parent": {
       "version": "6.0.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -8186,10 +8231,12 @@
     },
     "node_modules/eslint/node_modules/ms": {
       "version": "2.1.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/eslint/node_modules/strip-json-comments": {
       "version": "3.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8200,6 +8247,7 @@
     },
     "node_modules/espree": {
       "version": "9.5.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.8.0",
@@ -8227,6 +8275,7 @@
     },
     "node_modules/esquery": {
       "version": "1.5.0",
+      "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
         "estraverse": "^5.1.0"
@@ -8237,6 +8286,7 @@
     },
     "node_modules/esquery/node_modules/estraverse": {
       "version": "5.3.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -8244,6 +8294,7 @@
     },
     "node_modules/esrecurse": {
       "version": "4.3.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -8254,6 +8305,7 @@
     },
     "node_modules/esrecurse/node_modules/estraverse": {
       "version": "5.3.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -8627,6 +8679,7 @@
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -8646,10 +8699,12 @@
     },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-xml-parser": {
@@ -8669,6 +8724,7 @@
     },
     "node_modules/fastq": {
       "version": "1.15.0",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -8692,6 +8748,7 @@
     },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "flat-cache": "^3.0.4"
@@ -8817,6 +8874,7 @@
     },
     "node_modules/flat-cache": {
       "version": "3.0.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "flatted": "^3.1.0",
@@ -8828,6 +8886,7 @@
     },
     "node_modules/flat-cache/node_modules/rimraf": {
       "version": "3.0.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
@@ -8841,6 +8900,7 @@
     },
     "node_modules/flatted": {
       "version": "3.2.7",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/flow-parser": {
@@ -8853,6 +8913,7 @@
     },
     "node_modules/for-each": {
       "version": "0.3.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-callable": "^1.1.3"
@@ -8955,6 +9016,7 @@
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -8971,6 +9033,7 @@
     },
     "node_modules/functions-have-names": {
       "version": "1.2.3",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8993,6 +9056,7 @@
     },
     "node_modules/get-intrinsic": {
       "version": "1.2.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.1",
@@ -9019,6 +9083,7 @@
     },
     "node_modules/get-symbol-description": {
       "version": "1.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -9154,6 +9219,7 @@
     },
     "node_modules/globals": {
       "version": "13.20.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -9167,6 +9233,7 @@
     },
     "node_modules/globals/node_modules/type-fest": {
       "version": "0.20.2",
+      "dev": true,
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
@@ -9177,6 +9244,7 @@
     },
     "node_modules/globalthis": {
       "version": "1.0.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-properties": "^1.1.3"
@@ -9224,6 +9292,7 @@
     },
     "node_modules/gopd": {
       "version": "1.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "get-intrinsic": "^1.1.3"
@@ -9267,6 +9336,7 @@
     },
     "node_modules/grapheme-splitter": {
       "version": "1.0.4",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/har-schema": {
@@ -9301,6 +9371,7 @@
     },
     "node_modules/has-bigints": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -9315,6 +9386,7 @@
     },
     "node_modules/has-property-descriptors": {
       "version": "1.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "get-intrinsic": "^1.1.1"
@@ -9325,6 +9397,7 @@
     },
     "node_modules/has-proto": {
       "version": "1.0.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9335,6 +9408,7 @@
     },
     "node_modules/has-symbols": {
       "version": "1.0.3",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9345,6 +9419,7 @@
     },
     "node_modules/has-tostringtag": {
       "version": "1.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.2"
@@ -9633,6 +9708,7 @@
     },
     "node_modules/ignore": {
       "version": "5.2.4",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 4"
@@ -9651,6 +9727,7 @@
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -9697,6 +9774,7 @@
     },
     "node_modules/internal-slot": {
       "version": "1.0.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "get-intrinsic": "^1.2.0",
@@ -9741,6 +9819,7 @@
     },
     "node_modules/is-array-buffer": {
       "version": "3.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -9758,6 +9837,7 @@
     },
     "node_modules/is-bigint": {
       "version": "1.0.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-bigints": "^1.0.1"
@@ -9779,6 +9859,7 @@
     },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -9798,6 +9879,7 @@
     },
     "node_modules/is-callable": {
       "version": "1.2.7",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9840,6 +9922,7 @@
     },
     "node_modules/is-date-object": {
       "version": "1.0.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -9885,6 +9968,7 @@
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9904,6 +9988,7 @@
     },
     "node_modules/is-glob": {
       "version": "4.0.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -9937,6 +10022,7 @@
     },
     "node_modules/is-negative-zero": {
       "version": "2.0.2",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9965,6 +10051,7 @@
     },
     "node_modules/is-number-object": {
       "version": "1.0.7",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -9986,6 +10073,7 @@
     },
     "node_modules/is-path-inside": {
       "version": "3.0.3",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -10004,6 +10092,7 @@
     },
     "node_modules/is-regex": {
       "version": "1.1.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -10018,6 +10107,7 @@
     },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2"
@@ -10036,6 +10126,7 @@
     },
     "node_modules/is-string": {
       "version": "1.0.7",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -10049,6 +10140,7 @@
     },
     "node_modules/is-symbol": {
       "version": "1.0.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.2"
@@ -10062,6 +10154,7 @@
     },
     "node_modules/is-typed-array": {
       "version": "1.1.10",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
@@ -10095,6 +10188,7 @@
     },
     "node_modules/is-weakref": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2"
@@ -10461,6 +10555,7 @@
     },
     "node_modules/js-sdsl": {
       "version": "4.3.0",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -10473,6 +10568,7 @@
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -10712,10 +10808,12 @@
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/json-stringify-safe": {
@@ -10773,6 +10871,7 @@
     },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.5",
@@ -10832,6 +10931,7 @@
     },
     "node_modules/levn": {
       "version": "0.4.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1",
@@ -10908,6 +11008,7 @@
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.snakecase": {
@@ -12026,6 +12127,7 @@
     },
     "node_modules/natural-compare": {
       "version": "1.4.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/natural-compare-lite": {
@@ -12291,6 +12393,7 @@
     },
     "node_modules/object-inspect": {
       "version": "1.12.3",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -12298,6 +12401,7 @@
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -12316,6 +12420,7 @@
     },
     "node_modules/object.assign": {
       "version": "4.1.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -12332,6 +12437,7 @@
     },
     "node_modules/object.entries": {
       "version": "1.1.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -12344,6 +12450,7 @@
     },
     "node_modules/object.fromentries": {
       "version": "2.0.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -12359,6 +12466,7 @@
     },
     "node_modules/object.hasown": {
       "version": "1.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-properties": "^1.1.4",
@@ -12381,6 +12489,7 @@
     },
     "node_modules/object.values": {
       "version": "1.1.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -12443,6 +12552,7 @@
     },
     "node_modules/optionator": {
       "version": "0.9.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "deep-is": "^0.1.3",
@@ -12689,6 +12799,7 @@
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -12776,6 +12887,7 @@
     },
     "node_modules/path-key": {
       "version": "3.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -13173,6 +13285,7 @@
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8.0"
@@ -13255,6 +13368,7 @@
     },
     "node_modules/punycode": {
       "version": "2.1.1",
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -13287,6 +13401,7 @@
     },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -13706,6 +13821,7 @@
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.4.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -13876,6 +13992,7 @@
     },
     "node_modules/resolve": {
       "version": "2.0.0-next.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.9.0",
@@ -13896,6 +14013,7 @@
     },
     "node_modules/resolve-from": {
       "version": "4.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -13939,6 +14057,7 @@
     },
     "node_modules/reusify": {
       "version": "1.0.4",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -13990,6 +14109,7 @@
     },
     "node_modules/run-parallel": {
       "version": "1.2.0",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -14023,6 +14143,7 @@
     },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -14266,6 +14387,7 @@
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -14276,6 +14398,7 @@
     },
     "node_modules/shebang-regex": {
       "version": "3.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -14291,6 +14414,7 @@
     },
     "node_modules/side-channel": {
       "version": "1.0.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.0",
@@ -14908,6 +15032,7 @@
     },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -14925,6 +15050,7 @@
     },
     "node_modules/string.prototype.trimend": {
       "version": "1.0.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -14937,6 +15063,7 @@
     },
     "node_modules/string.prototype.trimstart": {
       "version": "1.0.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -15248,6 +15375,7 @@
     },
     "node_modules/text-table": {
       "version": "0.2.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/throat": {
@@ -15572,6 +15700,7 @@
     },
     "node_modules/type-check": {
       "version": "0.4.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1"
@@ -15602,6 +15731,7 @@
     },
     "node_modules/typed-array-length": {
       "version": "1.0.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -15654,6 +15784,7 @@
     },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -15907,6 +16038,7 @@
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -16060,6 +16192,7 @@
     },
     "node_modules/which": {
       "version": "2.0.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -16073,6 +16206,7 @@
     },
     "node_modules/which-boxed-primitive": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-bigint": "^1.0.1",
@@ -16092,6 +16226,7 @@
     },
     "node_modules/which-typed-array": {
       "version": "1.1.9",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
@@ -16121,6 +16256,7 @@
     },
     "node_modules/word-wrap": {
       "version": "1.2.3",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -18571,15 +18707,18 @@
     },
     "@eslint-community/eslint-utils": {
       "version": "4.2.0",
+      "dev": true,
       "requires": {
         "eslint-visitor-keys": "^3.3.0"
       }
     },
     "@eslint-community/regexpp": {
-      "version": "4.4.0"
+      "version": "4.4.0",
+      "dev": true
     },
     "@eslint/eslintrc": {
       "version": "2.0.1",
+      "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -18594,20 +18733,24 @@
       "dependencies": {
         "debug": {
           "version": "4.3.4",
+          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
         },
         "ms": {
-          "version": "2.1.2"
+          "version": "2.1.2",
+          "dev": true
         },
         "strip-json-comments": {
-          "version": "3.1.1"
+          "version": "3.1.1",
+          "dev": true
         }
       }
     },
     "@eslint/js": {
-      "version": "8.36.0"
+      "version": "8.36.0",
+      "dev": true
     },
     "@fortawesome/fontawesome-common-types": {
       "version": "6.3.0"
@@ -18648,6 +18791,7 @@
     },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
+      "dev": true,
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
@@ -18656,20 +18800,24 @@
       "dependencies": {
         "debug": {
           "version": "4.3.4",
+          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
         },
         "ms": {
-          "version": "2.1.2"
+          "version": "2.1.2",
+          "dev": true
         }
       }
     },
     "@humanwhocodes/module-importer": {
-      "version": "1.0.1"
+      "version": "1.0.1",
+      "dev": true
     },
     "@humanwhocodes/object-schema": {
-      "version": "1.2.1"
+      "version": "1.2.1",
+      "dev": true
     },
     "@jest/create-cache-key-function": {
       "version": "29.4.3",
@@ -18788,16 +18936,19 @@
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
+      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
       }
     },
     "@nodelib/fs.stat": {
-      "version": "2.0.5"
+      "version": "2.0.5",
+      "dev": true
     },
     "@nodelib/fs.walk": {
       "version": "1.2.8",
+      "dev": true,
       "requires": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -19668,6 +19819,7 @@
     },
     "acorn-jsx": {
       "version": "5.3.2",
+      "dev": true,
       "requires": {}
     },
     "acorn-node": {
@@ -19717,6 +19869,7 @@
     },
     "ajv": {
       "version": "6.12.6",
+      "devOptional": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -19847,7 +20000,8 @@
       "peer": true
     },
     "argparse": {
-      "version": "2.0.1"
+      "version": "2.0.1",
+      "dev": true
     },
     "arr-diff": {
       "version": "4.0.0",
@@ -19863,6 +20017,7 @@
     },
     "array-includes": {
       "version": "3.1.6",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -19881,6 +20036,7 @@
     },
     "array.prototype.flatmap": {
       "version": "1.3.1",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -19890,6 +20046,7 @@
     },
     "array.prototype.tosorted": {
       "version": "1.1.1",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -19969,7 +20126,8 @@
       "peer": true
     },
     "available-typed-arrays": {
-      "version": "1.0.5"
+      "version": "1.0.5",
+      "dev": true
     },
     "aws-sign2": {
       "version": "0.7.0",
@@ -20269,6 +20427,7 @@
     },
     "call-bind": {
       "version": "1.0.2",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -20295,7 +20454,8 @@
       }
     },
     "callsites": {
-      "version": "3.1.0"
+      "version": "3.1.0",
+      "dev": true
     },
     "camelcase": {
       "version": "6.3.0"
@@ -20680,6 +20840,7 @@
     },
     "cross-spawn": {
       "version": "7.0.3",
+      "dev": true,
       "requires": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -20745,7 +20906,8 @@
       "dev": true
     },
     "deep-is": {
-      "version": "0.1.4"
+      "version": "0.1.4",
+      "dev": true
     },
     "deepmerge": {
       "version": "3.3.0",
@@ -20764,6 +20926,7 @@
     },
     "define-properties": {
       "version": "1.1.4",
+      "dev": true,
       "requires": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -20925,6 +21088,7 @@
     },
     "doctrine": {
       "version": "3.0.0",
+      "dev": true,
       "requires": {
         "esutils": "^2.0.2"
       }
@@ -21457,6 +21621,7 @@
     },
     "es-abstract": {
       "version": "1.21.1",
+      "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -21495,6 +21660,7 @@
     },
     "es-set-tostringtag": {
       "version": "2.0.1",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.3",
         "has": "^1.0.3",
@@ -21503,12 +21669,14 @@
     },
     "es-shim-unscopables": {
       "version": "1.0.0",
+      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
     },
     "es-to-primitive": {
       "version": "1.2.1",
+      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -21595,10 +21763,12 @@
       "peer": true
     },
     "escape-string-regexp": {
-      "version": "4.0.0"
+      "version": "4.0.0",
+      "dev": true
     },
     "eslint": {
       "version": "8.36.0",
+      "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -21644,31 +21814,37 @@
       "dependencies": {
         "debug": {
           "version": "4.3.4",
+          "dev": true,
           "requires": {
             "ms": "2.1.2"
           }
         },
         "eslint-scope": {
           "version": "7.1.1",
+          "dev": true,
           "requires": {
             "esrecurse": "^4.3.0",
             "estraverse": "^5.2.0"
           }
         },
         "estraverse": {
-          "version": "5.3.0"
+          "version": "5.3.0",
+          "dev": true
         },
         "glob-parent": {
           "version": "6.0.2",
+          "dev": true,
           "requires": {
             "is-glob": "^4.0.3"
           }
         },
         "ms": {
-          "version": "2.1.2"
+          "version": "2.1.2",
+          "dev": true
         },
         "strip-json-comments": {
-          "version": "3.1.1"
+          "version": "3.1.1",
+          "dev": true
         }
       }
     },
@@ -21722,6 +21898,7 @@
       "version": "7.32.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
       "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
+      "dev": true,
       "requires": {
         "array-includes": "^3.1.6",
         "array.prototype.flatmap": "^1.3.1",
@@ -21742,12 +21919,14 @@
       "dependencies": {
         "doctrine": {
           "version": "2.1.0",
+          "dev": true,
           "requires": {
             "esutils": "^2.0.2"
           }
         },
         "estraverse": {
-          "version": "5.3.0"
+          "version": "5.3.0",
+          "dev": true
         }
       }
     },
@@ -21755,6 +21934,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "dev": true,
       "requires": {}
     },
     "eslint-scope": {
@@ -21766,10 +21946,12 @@
       }
     },
     "eslint-visitor-keys": {
-      "version": "3.3.0"
+      "version": "3.3.0",
+      "dev": true
     },
     "espree": {
       "version": "9.5.0",
+      "dev": true,
       "requires": {
         "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
@@ -21782,23 +21964,27 @@
     },
     "esquery": {
       "version": "1.5.0",
+      "dev": true,
       "requires": {
         "estraverse": "^5.1.0"
       },
       "dependencies": {
         "estraverse": {
-          "version": "5.3.0"
+          "version": "5.3.0",
+          "dev": true
         }
       }
     },
     "esrecurse": {
       "version": "4.3.0",
+      "dev": true,
       "requires": {
         "estraverse": "^5.2.0"
       },
       "dependencies": {
         "estraverse": {
-          "version": "5.3.0"
+          "version": "5.3.0",
+          "dev": true
         }
       }
     },
@@ -22043,7 +22229,8 @@
       "version": "1.0.0"
     },
     "fast-deep-equal": {
-      "version": "3.1.3"
+      "version": "3.1.3",
+      "devOptional": true
     },
     "fast-glob": {
       "version": "3.2.12",
@@ -22057,10 +22244,12 @@
       }
     },
     "fast-json-stable-stringify": {
-      "version": "2.1.0"
+      "version": "2.1.0",
+      "devOptional": true
     },
     "fast-levenshtein": {
-      "version": "2.0.6"
+      "version": "2.0.6",
+      "dev": true
     },
     "fast-xml-parser": {
       "version": "4.1.3",
@@ -22071,6 +22260,7 @@
     },
     "fastq": {
       "version": "1.15.0",
+      "dev": true,
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -22091,6 +22281,7 @@
     },
     "file-entry-cache": {
       "version": "6.0.1",
+      "dev": true,
       "requires": {
         "flat-cache": "^3.0.4"
       }
@@ -22176,6 +22367,7 @@
     },
     "flat-cache": {
       "version": "3.0.4",
+      "dev": true,
       "requires": {
         "flatted": "^3.1.0",
         "rimraf": "^3.0.2"
@@ -22183,6 +22375,7 @@
       "dependencies": {
         "rimraf": {
           "version": "3.0.2",
+          "dev": true,
           "requires": {
             "glob": "^7.1.3"
           }
@@ -22190,7 +22383,8 @@
       }
     },
     "flatted": {
-      "version": "3.2.7"
+      "version": "3.2.7",
+      "dev": true
     },
     "flow-parser": {
       "version": "0.185.2",
@@ -22198,6 +22392,7 @@
     },
     "for-each": {
       "version": "0.3.3",
+      "dev": true,
       "requires": {
         "is-callable": "^1.1.3"
       }
@@ -22266,6 +22461,7 @@
     },
     "function.prototype.name": {
       "version": "1.1.5",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -22274,7 +22470,8 @@
       }
     },
     "functions-have-names": {
-      "version": "1.2.3"
+      "version": "1.2.3",
+      "dev": true
     },
     "gensync": {
       "version": "1.0.0-beta.2",
@@ -22285,6 +22482,7 @@
     },
     "get-intrinsic": {
       "version": "1.2.0",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -22300,6 +22498,7 @@
     },
     "get-symbol-description": {
       "version": "1.0.0",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -22388,17 +22587,20 @@
     },
     "globals": {
       "version": "13.20.0",
+      "dev": true,
       "requires": {
         "type-fest": "^0.20.2"
       },
       "dependencies": {
         "type-fest": {
-          "version": "0.20.2"
+          "version": "0.20.2",
+          "dev": true
         }
       }
     },
     "globalthis": {
       "version": "1.0.3",
+      "dev": true,
       "requires": {
         "define-properties": "^1.1.3"
       }
@@ -22427,6 +22629,7 @@
     },
     "gopd": {
       "version": "1.0.1",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.3"
       }
@@ -22456,7 +22659,8 @@
       "dev": true
     },
     "grapheme-splitter": {
-      "version": "1.0.4"
+      "version": "1.0.4",
+      "dev": true
     },
     "har-schema": {
       "version": "2.0.0",
@@ -22477,25 +22681,30 @@
       }
     },
     "has-bigints": {
-      "version": "1.0.2"
+      "version": "1.0.2",
+      "dev": true
     },
     "has-flag": {
       "version": "4.0.0"
     },
     "has-property-descriptors": {
       "version": "1.0.0",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.1"
       }
     },
     "has-proto": {
-      "version": "1.0.1"
+      "version": "1.0.1",
+      "dev": true
     },
     "has-symbols": {
-      "version": "1.0.3"
+      "version": "1.0.3",
+      "dev": true
     },
     "has-tostringtag": {
       "version": "1.0.0",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -22679,7 +22888,8 @@
       "version": "1.2.1"
     },
     "ignore": {
-      "version": "5.2.4"
+      "version": "5.2.4",
+      "dev": true
     },
     "image-size": {
       "version": "0.5.5",
@@ -22687,6 +22897,7 @@
     },
     "import-fresh": {
       "version": "3.3.0",
+      "dev": true,
       "requires": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -22715,6 +22926,7 @@
     },
     "internal-slot": {
       "version": "1.0.5",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
@@ -22745,6 +22957,7 @@
     },
     "is-array-buffer": {
       "version": "3.0.2",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.2.0",
@@ -22757,6 +22970,7 @@
     },
     "is-bigint": {
       "version": "1.0.4",
+      "dev": true,
       "requires": {
         "has-bigints": "^1.0.1"
       }
@@ -22770,6 +22984,7 @@
     },
     "is-boolean-object": {
       "version": "1.1.2",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -22780,7 +22995,8 @@
       "peer": true
     },
     "is-callable": {
-      "version": "1.2.7"
+      "version": "1.2.7",
+      "dev": true
     },
     "is-ci": {
       "version": "3.0.1",
@@ -22804,6 +23020,7 @@
     },
     "is-date-object": {
       "version": "1.0.5",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -22829,7 +23046,8 @@
       }
     },
     "is-extglob": {
-      "version": "2.1.1"
+      "version": "2.1.1",
+      "dev": true
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0"
@@ -22840,6 +23058,7 @@
     },
     "is-glob": {
       "version": "4.0.3",
+      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -22857,7 +23076,8 @@
       "peer": true
     },
     "is-negative-zero": {
-      "version": "2.0.2"
+      "version": "2.0.2",
+      "dev": true
     },
     "is-npm": {
       "version": "5.0.0",
@@ -22868,6 +23088,7 @@
     },
     "is-number-object": {
       "version": "1.0.7",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -22877,7 +23098,8 @@
       "dev": true
     },
     "is-path-inside": {
-      "version": "3.0.3"
+      "version": "3.0.3",
+      "dev": true
     },
     "is-plain-object": {
       "version": "2.0.4",
@@ -22888,6 +23110,7 @@
     },
     "is-regex": {
       "version": "1.1.4",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -22895,6 +23118,7 @@
     },
     "is-shared-array-buffer": {
       "version": "1.0.2",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2"
       }
@@ -22905,18 +23129,21 @@
     },
     "is-string": {
       "version": "1.0.7",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
     },
     "is-symbol": {
       "version": "1.0.4",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
     },
     "is-typed-array": {
       "version": "1.1.10",
+      "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -22935,6 +23162,7 @@
     },
     "is-weakref": {
       "version": "1.0.2",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2"
       }
@@ -23192,13 +23420,15 @@
       "version": "2.2.1"
     },
     "js-sdsl": {
-      "version": "4.3.0"
+      "version": "4.3.0",
+      "dev": true
     },
     "js-tokens": {
       "version": "4.0.0"
     },
     "js-yaml": {
       "version": "4.1.0",
+      "dev": true,
       "requires": {
         "argparse": "^2.0.1"
       }
@@ -23373,10 +23603,12 @@
       "dev": true
     },
     "json-schema-traverse": {
-      "version": "0.4.1"
+      "version": "0.4.1",
+      "devOptional": true
     },
     "json-stable-stringify-without-jsonify": {
-      "version": "1.0.1"
+      "version": "1.0.1",
+      "dev": true
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -23416,6 +23648,7 @@
     },
     "jsx-ast-utils": {
       "version": "3.3.3",
+      "dev": true,
       "requires": {
         "array-includes": "^3.1.5",
         "object.assign": "^4.1.3"
@@ -23453,6 +23686,7 @@
     },
     "levn": {
       "version": "0.4.1",
+      "dev": true,
       "requires": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -23501,7 +23735,8 @@
       "peer": true
     },
     "lodash.merge": {
-      "version": "4.6.2"
+      "version": "4.6.2",
+      "dev": true
     },
     "lodash.snakecase": {
       "version": "4.1.1",
@@ -24339,7 +24574,8 @@
       "dev": true
     },
     "natural-compare": {
-      "version": "1.4.0"
+      "version": "1.4.0",
+      "dev": true
     },
     "natural-compare-lite": {
       "version": "1.4.0",
@@ -24502,10 +24738,12 @@
       "dev": true
     },
     "object-inspect": {
-      "version": "1.12.3"
+      "version": "1.12.3",
+      "dev": true
     },
     "object-keys": {
-      "version": "1.1.1"
+      "version": "1.1.1",
+      "dev": true
     },
     "object-visit": {
       "version": "1.0.1",
@@ -24516,6 +24754,7 @@
     },
     "object.assign": {
       "version": "4.1.4",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -24525,6 +24764,7 @@
     },
     "object.entries": {
       "version": "1.1.6",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -24533,6 +24773,7 @@
     },
     "object.fromentries": {
       "version": "2.0.6",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -24541,6 +24782,7 @@
     },
     "object.hasown": {
       "version": "1.1.2",
+      "dev": true,
       "requires": {
         "define-properties": "^1.1.4",
         "es-abstract": "^1.20.4"
@@ -24555,6 +24797,7 @@
     },
     "object.values": {
       "version": "1.1.6",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -24590,6 +24833,7 @@
     },
     "optionator": {
       "version": "0.9.1",
+      "dev": true,
       "requires": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -24753,6 +24997,7 @@
     },
     "parent-module": {
       "version": "1.0.1",
+      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       }
@@ -24807,7 +25052,8 @@
       "version": "1.0.1"
     },
     "path-key": {
-      "version": "3.1.1"
+      "version": "3.1.1",
+      "dev": true
     },
     "path-parse": {
       "version": "1.0.7"
@@ -25035,7 +25281,8 @@
       }
     },
     "prelude-ls": {
-      "version": "1.2.1"
+      "version": "1.2.1",
+      "dev": true
     },
     "prepend-http": {
       "version": "2.0.0",
@@ -25093,7 +25340,8 @@
       }
     },
     "punycode": {
-      "version": "2.1.1"
+      "version": "2.1.1",
+      "devOptional": true
     },
     "pupa": {
       "version": "2.1.1",
@@ -25110,7 +25358,8 @@
       "version": "0.2.0"
     },
     "queue-microtask": {
-      "version": "1.2.3"
+      "version": "1.2.3",
+      "dev": true
     },
     "quick-lru": {
       "version": "5.1.1",
@@ -25382,6 +25631,7 @@
     },
     "regexp.prototype.flags": {
       "version": "1.4.3",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -25503,6 +25753,7 @@
     },
     "resolve": {
       "version": "2.0.0-next.4",
+      "dev": true,
       "requires": {
         "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
@@ -25514,7 +25765,8 @@
       "dev": true
     },
     "resolve-from": {
-      "version": "4.0.0"
+      "version": "4.0.0",
+      "dev": true
     },
     "resolve-url": {
       "version": "0.2.1",
@@ -25540,7 +25792,8 @@
       "peer": true
     },
     "reusify": {
-      "version": "1.0.4"
+      "version": "1.0.4",
+      "dev": true
     },
     "roarr": {
       "version": "2.15.4",
@@ -25580,6 +25833,7 @@
     },
     "run-parallel": {
       "version": "1.2.0",
+      "dev": true,
       "requires": {
         "queue-microtask": "^1.2.2"
       }
@@ -25596,6 +25850,7 @@
     },
     "safe-regex-test": {
       "version": "1.0.0",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.3",
@@ -25763,12 +26018,14 @@
     },
     "shebang-command": {
       "version": "2.0.0",
+      "dev": true,
       "requires": {
         "shebang-regex": "^3.0.0"
       }
     },
     "shebang-regex": {
-      "version": "3.0.0"
+      "version": "3.0.0",
+      "dev": true
     },
     "shell-quote": {
       "version": "1.8.0",
@@ -25776,6 +26033,7 @@
     },
     "side-channel": {
       "version": "1.0.4",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -26175,6 +26433,7 @@
     },
     "string.prototype.matchall": {
       "version": "4.0.8",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -26188,6 +26447,7 @@
     },
     "string.prototype.trimend": {
       "version": "1.0.6",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -26196,6 +26456,7 @@
     },
     "string.prototype.trimstart": {
       "version": "1.0.6",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -26404,7 +26665,8 @@
       }
     },
     "text-table": {
-      "version": "0.2.0"
+      "version": "0.2.0",
+      "dev": true
     },
     "throat": {
       "version": "5.0.0",
@@ -26629,6 +26891,7 @@
     },
     "type-check": {
       "version": "0.4.0",
+      "dev": true,
       "requires": {
         "prelude-ls": "^1.2.1"
       }
@@ -26644,6 +26907,7 @@
     },
     "typed-array-length": {
       "version": "1.0.4",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "for-each": "^0.3.3",
@@ -26677,6 +26941,7 @@
     },
     "unbox-primitive": {
       "version": "1.0.2",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -26840,6 +27105,7 @@
     },
     "uri-js": {
       "version": "4.4.1",
+      "devOptional": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -26954,12 +27220,14 @@
     },
     "which": {
       "version": "2.0.2",
+      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
     },
     "which-boxed-primitive": {
       "version": "1.0.2",
+      "dev": true,
       "requires": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -26974,6 +27242,7 @@
     },
     "which-typed-array": {
       "version": "1.1.9",
+      "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -26991,7 +27260,8 @@
       }
     },
     "word-wrap": {
-      "version": "1.2.3"
+      "version": "1.2.3",
+      "dev": true
     },
     "wrap-ansi": {
       "version": "7.0.0",
diff --git a/app/ide-desktop/package.json b/app/ide-desktop/package.json
index 4f1fbe3af3d..6bf37434b64 100644
--- a/app/ide-desktop/package.json
+++ b/app/ide-desktop/package.json
@@ -31,7 +31,9 @@
     "@typescript-eslint/parser": "^5.55.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.36.0",
-    "eslint-plugin-jsdoc": "^40.0.2"
+    "eslint-plugin-jsdoc": "^40.0.2",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0"
   },
   "scripts": {
     "watch": "npm run watch --workspace enso-content",