From 0b5f0777fb85daa52a04189d5a3cf9dd622274cc Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Wed, 1 May 2024 21:06:33 +1000
Subject: [PATCH 01/25] WIP: Version page

---
 .../dashboard/src/components/MenuEntry.tsx    |  1 +
 .../src/configurations/inputBindings.ts       |  7 +++
 .../lib/dashboard/src/layouts/UserMenu.tsx    | 15 ++++++-
 .../lib/dashboard/src/modals/AboutModal.tsx   | 43 +++++++++++++++++++
 .../lib/dashboard/src/text/english.json       |  6 ++-
 5 files changed, 70 insertions(+), 2 deletions(-)
 create mode 100644 app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx

diff --git a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
index 4fccdc77c609..837b9297dfe3 100644
--- a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
@@ -59,6 +59,7 @@ const ACTION_TO_TEXT_ID: Readonly<Record<inputBindings.DashboardBindingKey, text
   selectAdditionalRange: 'selectAdditionalRangeShortcut',
   goBack: 'goBackShortcut',
   goForward: 'goForwardShortcut',
+  aboutThisApp: 'aboutThisAppShortcut',
 } satisfies { [Key in inputBindings.DashboardBindingKey]: `${Key}Shortcut` }
 
 // =================
diff --git a/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts b/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
index 1351f9459727..160b21107f5c 100644
--- a/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
+++ b/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
@@ -14,6 +14,7 @@ import CopyIcon from 'enso-assets/copy.svg'
 import DataDownloadIcon from 'enso-assets/data_download.svg'
 import DataUploadIcon from 'enso-assets/data_upload.svg'
 import DuplicateIcon from 'enso-assets/duplicate.svg'
+import EnsoLogoIcon from 'enso-assets/enso_logo.svg'
 import OpenIcon from 'enso-assets/open.svg'
 import PasteIcon from 'enso-assets/paste.svg'
 import PenIcon from 'enso-assets/pen.svg'
@@ -121,4 +122,10 @@ export const BINDINGS = inputBindings.defineBindings({
     rebindable: true,
     icon: ArrowRightIcon,
   },
+  aboutThisApp: {
+    name: 'About Enso',
+    bindings: ['Mod+Shift+?'],
+    rebindable: true,
+    icon: EnsoLogoIcon,
+  },
 })
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
index bc3434aa75a5..d0f816271695 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
@@ -19,6 +19,8 @@ import MenuEntry from '#/components/MenuEntry'
 import Modal from '#/components/Modal'
 import FocusArea from '#/components/styled/FocusArea'
 
+import AboutModal from '#/modals/AboutModal'
+
 import * as download from '#/utilities/download'
 import * as github from '#/utilities/github'
 
@@ -42,7 +44,7 @@ export default function UserMenu(props: UserMenuProps) {
   const navigate = navigateHooks.useNavigate()
   const { signOut } = authProvider.useAuth()
   const { user } = authProvider.useNonPartialUserSession()
-  const { unsetModal } = modalProvider.useSetModal()
+  const { setModal, unsetModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
 
@@ -50,6 +52,15 @@ export default function UserMenu(props: UserMenuProps) {
     requestAnimationFrame(setInitialized.bind(null, true))
   }, [])
 
+  const aboutThisAppMenuEntry = (
+    <MenuEntry
+      action="aboutThisApp"
+      doAction={() => {
+        setModal(<AboutModal supportsLocalBackend={supportsLocalBackend} />)
+      }}
+    />
+  )
+
   return (
     <Modal hidden={hidden} className="absolute size-full overflow-hidden bg-dim">
       <div
@@ -105,6 +116,7 @@ export default function UserMenu(props: UserMenuProps) {
                         setPage(pageSwitcher.Page.settings)
                       }}
                     />
+                    {aboutThisAppMenuEntry}
                     <MenuEntry
                       action="signOut"
                       doAction={() => {
@@ -126,6 +138,7 @@ export default function UserMenu(props: UserMenuProps) {
               <aria.Text className="text">{getText('youAreNotLoggedIn')}</aria.Text>
             </div>
             <div className="flex flex-col">
+              {aboutThisAppMenuEntry}
               <MenuEntry
                 action="signIn"
                 doAction={() => {
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
new file mode 100644
index 000000000000..407a3f08b084
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -0,0 +1,43 @@
+/** @file Modal for confirming delete of any type of asset. */
+import * as React from 'react'
+
+import EnsoLogoIcon from 'enso-assets/enso_logo.svg'
+
+import * as textProvider from '#/providers/TextProvider'
+
+import Modal from '#/components/Modal'
+import SvgMask from '#/components/SvgMask'
+
+// ==================
+// === AboutModal ===
+// ==================
+
+/** Props for a {@link AboutModal}. */
+export interface AboutModalProps {
+  readonly supportsLocalBackend: boolean
+}
+
+/** A modal for confirming the deletion of an asset. */
+export default function AboutModal(props: AboutModalProps) {
+  const { supportsLocalBackend } = props
+  const { getText } = textProvider.useText()
+
+  return (
+    <Modal centered className="bg-dim">
+      <div
+        data-testid="about-modal"
+        className="pointer-events-auto relative flex w-96 flex-col gap-modal rounded-default p-modal-wide before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
+      >
+        <div className="relative flex gap-4">
+          <SvgMask src={EnsoLogoIcon} className="size-16" />
+          <div className="text-base font-semibold">
+            {supportsLocalBackend
+              ? getText('appNameDesktopEdition')
+              : getText('appNameCloudEdition')}
+            {/* TODO: version injected at build time as environment variable */}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index 5d9c70aa39e4..119ca28d4fa1 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -450,6 +450,7 @@
   "selectAdditionalRangeShortcut": "Select Additional Range",
   "goBackShortcut": "Go Back",
   "goForwardShortcut": "Go Forward",
+  "aboutThisAppShortcut": "About Enso",
 
   "moveToTrashShortcut": "Move To Trash",
   "moveAllToTrashShortcut": "Move All To Trash",
@@ -513,5 +514,8 @@
   "assetsTableContextMenuLabel": "Drive context menu",
   "assetContextMenuLabel": "Asset context menu",
   "labelContextMenuLabel": "Label context menu",
-  "settingsSidebarLabel": "Settings sidebar"
+  "settingsSidebarLabel": "Settings sidebar",
+
+  "appNameDesktopEdition": "Enso Desktop Edition",
+  "appNameCloudEdition": "Enso Cloud Edition"
 }

From e5d374bfcdf3ad2d01727d890a8a542102478c50 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Wed, 1 May 2024 22:23:04 +1000
Subject: [PATCH 02/25] Auto-generate version in development mode

---
 app/ide-desktop/lib/common/src/appConfig.js   | 17 ++++++++++++
 .../lib/dashboard/src/modals/AboutModal.tsx   | 26 ++++++++++++++-----
 .../lib/dashboard/src/text/english.json       |  1 +
 .../lib/dashboard/src/text/index.ts           |  3 ++-
 app/ide-desktop/lib/types/globals.d.ts        |  4 +++
 5 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/app/ide-desktop/lib/common/src/appConfig.js b/app/ide-desktop/lib/common/src/appConfig.js
index a9513167afa8..8fd7207bcdbe 100644
--- a/app/ide-desktop/lib/common/src/appConfig.js
+++ b/app/ide-desktop/lib/common/src/appConfig.js
@@ -2,6 +2,8 @@
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import * as url from 'node:url'
+import * as childProcess from 'node:child_process'
+import * as streamConsumers from 'node:stream/consumers'
 
 // ===============================
 // === readEnvironmentFromFile ===
@@ -45,6 +47,14 @@ export async function readEnvironmentFromFile() {
         if (!isProduction || entries.length > 0) {
             Object.assign(process.env, variables)
         }
+        if (process.env.ENSO_CLOUD_DASHBOARD_VERSION == null) {
+            const branchNameProcess = childProcess.exec('git rev-parse --abbrev-ref HEAD')
+            const branchName = await streamConsumers.text(branchNameProcess.stdout)
+            process.env.ENSO_CLOUD_DASHBOARD_VERSION = `dev-${branchName.trim()}`
+            const commitHashProcess = childProcess.exec('git log -1 --pretty=format:%H')
+            const commitHash = await streamConsumers.text(commitHashProcess.stdout)
+            process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH = commitHash.trim()
+        }
     } catch (error) {
         if (missingKeys.length !== 0) {
             console.warn('Could not load `.env` file; disabling cloud backend.')
@@ -97,6 +107,12 @@ export function getDefines(serverPort = 8080) {
         ),
         'process.env.ENSO_CLOUD_COGNITO_DOMAIN': stringify(process.env.ENSO_CLOUD_COGNITO_DOMAIN),
         'process.env.ENSO_CLOUD_COGNITO_REGION': stringify(process.env.ENSO_CLOUD_COGNITO_REGION),
+        'process.env.ENSO_CLOUD_DASHBOARD_VERSION': stringify(
+            process.env.ENSO_CLOUD_DASHBOARD_VERSION
+        ),
+        'process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH': stringify(
+            process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH
+        ),
         /* eslint-enable @typescript-eslint/naming-convention */
     }
 }
@@ -116,6 +132,7 @@ const DUMMY_DEFINES = {
     'process.env.ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID': '',
     'process.env.ENSO_CLOUD_COGNITO_DOMAIN': '',
     'process.env.ENSO_CLOUD_COGNITO_REGION': '',
+    'process.env.ENSO_CLOUD_DASHBOARD_VERSION': '0.0.1-testing',
     /* eslint-enable @typescript-eslint/naming-convention */
 }
 
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index 407a3f08b084..f5d83934ae94 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -26,15 +26,29 @@ export default function AboutModal(props: AboutModalProps) {
     <Modal centered className="bg-dim">
       <div
         data-testid="about-modal"
-        className="pointer-events-auto relative flex w-96 flex-col gap-modal rounded-default p-modal-wide before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
+        className="pointer-events-auto relative flex w-[28rem] flex-col gap-modal rounded-default p-modal-wide before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
+        onClick={event => {
+          event.stopPropagation()
+        }}
       >
         <div className="relative flex gap-4">
           <SvgMask src={EnsoLogoIcon} className="size-16" />
-          <div className="text-base font-semibold">
-            {supportsLocalBackend
-              ? getText('appNameDesktopEdition')
-              : getText('appNameCloudEdition')}
-            {/* TODO: version injected at build time as environment variable */}
+          <div className="flex flex-col gap-1">
+            <div className="text-base font-semibold">
+              {supportsLocalBackend
+                ? getText('appNameDesktopEdition')
+                : getText('appNameCloudEdition')}
+            </div>
+            <div>
+              {getText('versionX', process.env.ENSO_CLOUD_DASHBOARD_VERSION)}
+              {/* TODO: version injected at build time as environment variable */}
+            </div>
+            {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH && (
+              <div>
+                {getText('commitX', process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH)}
+                {/* TODO: version injected at build time as environment variable */}
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index 119ca28d4fa1..1ef623c35675 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -276,6 +276,7 @@
   "replyExclamation": "Reply!",
   "lastModifiedOn": "last modified on $0",
   "versionX": "Version $0",
+  "commitX": "Commit $0",
   "compareWithLatest": "Compare with latest",
   "compareVersionXWithLatest": "Compare version $0 with latest",
   "onDateX": "on $0",
diff --git a/app/ide-desktop/lib/dashboard/src/text/index.ts b/app/ide-desktop/lib/dashboard/src/text/index.ts
index cb1aae674e93..417812d5f6a2 100644
--- a/app/ide-desktop/lib/dashboard/src/text/index.ts
+++ b/app/ide-desktop/lib/dashboard/src/text/index.ts
@@ -45,7 +45,8 @@ interface PlaceholderOverrides {
   readonly userIsAlreadyInTheOrganization: [string]
   readonly youAreAlreadyAddingUser: [string]
   readonly lastModifiedOn: [string]
-  readonly versionX: [number]
+  readonly versionX: [string]
+  readonly commitX: [string]
   readonly compareVersionXWithLatest: [number]
   readonly onDateX: [string]
   readonly xUsersSelected: [number]
diff --git a/app/ide-desktop/lib/types/globals.d.ts b/app/ide-desktop/lib/types/globals.d.ts
index f8d9174a128e..4d8f77ef9ace 100644
--- a/app/ide-desktop/lib/types/globals.d.ts
+++ b/app/ide-desktop/lib/types/globals.d.ts
@@ -142,6 +142,10 @@ declare global {
             // @ts-expect-error The index signature is intentional to disallow unknown env vars.
             readonly ENSO_CLOUD_GOOGLE_ANALYTICS_TAG?: string
             // @ts-expect-error The index signature is intentional to disallow unknown env vars.
+            readonly ENSO_CLOUD_DASHBOARD_VERSION: string
+            // @ts-expect-error The index signature is intentional to disallow unknown env vars.
+            readonly ENSO_CLOUD_DASHBOARD_COMMIT_HASH?: string
+            // @ts-expect-error The index signature is intentional to disallow unknown env vars.
             readonly ENSO_SUPPORTS_VIBRANCY?: string
 
             // === Electron watch script variables ===

From 20c1507a400ca883158f060c7684a3e1fbdd12e0 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Wed, 1 May 2024 22:33:47 +1000
Subject: [PATCH 03/25] Also show Electron version

---
 app/ide-desktop/lib/client/src/preload.ts              |  7 +++++++
 .../lib/dashboard/src/modals/AboutModal.tsx            |  5 ++++-
 app/ide-desktop/lib/dashboard/src/text/english.json    |  1 +
 app/ide-desktop/lib/dashboard/src/text/index.ts        |  3 ++-
 app/ide-desktop/lib/types/globals.d.ts                 | 10 ++++++++++
 5 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/ide-desktop/lib/client/src/preload.ts b/app/ide-desktop/lib/client/src/preload.ts
index 7b4f01b2fe51..8b9a01693d12 100644
--- a/app/ide-desktop/lib/client/src/preload.ts
+++ b/app/ide-desktop/lib/client/src/preload.ts
@@ -23,6 +23,8 @@ const FILE_BROWSER_API_KEY = 'fileBrowserApi'
 
 const NAVIGATION_API_KEY = 'navigationApi'
 
+const ELECTRON_VERSIONS_KEY = 'electronVersions'
+
 // =============================
 // === importProjectFromPath ===
 // =============================
@@ -172,3 +174,8 @@ const FILE_BROWSER_API = {
         electron.ipcRenderer.invoke(ipc.Channel.openFileBrowser, kind),
 }
 electron.contextBridge.exposeInMainWorld(FILE_BROWSER_API_KEY, FILE_BROWSER_API)
+
+const ELECTRON_VERSIONS = {
+    electron: process.versions.electron,
+}
+electron.contextBridge.exposeInMainWorld(ELECTRON_VERSIONS_KEY, ELECTRON_VERSIONS)
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index f5d83934ae94..c924c2d36b83 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -26,7 +26,7 @@ export default function AboutModal(props: AboutModalProps) {
     <Modal centered className="bg-dim">
       <div
         data-testid="about-modal"
-        className="pointer-events-auto relative flex w-[28rem] flex-col gap-modal rounded-default p-modal-wide before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
+        className="pointer-events-auto relative flex w-[28rem] select-text flex-col gap-modal rounded-default p-modal-wide before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
         onClick={event => {
           event.stopPropagation()
         }}
@@ -49,6 +49,9 @@ export default function AboutModal(props: AboutModalProps) {
                 {/* TODO: version injected at build time as environment variable */}
               </div>
             )}
+            {window.electronVersions != null && (
+              <div>{getText('electronVersionX', window.electronVersions.electron)}</div>
+            )}
           </div>
         </div>
       </div>
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index 1ef623c35675..32a0d885f599 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -277,6 +277,7 @@
   "lastModifiedOn": "last modified on $0",
   "versionX": "Version $0",
   "commitX": "Commit $0",
+  "electronVersionX": "Electron $0",
   "compareWithLatest": "Compare with latest",
   "compareVersionXWithLatest": "Compare version $0 with latest",
   "onDateX": "on $0",
diff --git a/app/ide-desktop/lib/dashboard/src/text/index.ts b/app/ide-desktop/lib/dashboard/src/text/index.ts
index 417812d5f6a2..a83a74186d51 100644
--- a/app/ide-desktop/lib/dashboard/src/text/index.ts
+++ b/app/ide-desktop/lib/dashboard/src/text/index.ts
@@ -46,7 +46,8 @@ interface PlaceholderOverrides {
   readonly youAreAlreadyAddingUser: [string]
   readonly lastModifiedOn: [string]
   readonly versionX: [string]
-  readonly commitX: [string]
+  readonly commitX: [commit: string]
+  readonly electronVersionX: [electronVersion: string]
   readonly compareVersionXWithLatest: [number]
   readonly onDateX: [string]
   readonly xUsersSelected: [number]
diff --git a/app/ide-desktop/lib/types/globals.d.ts b/app/ide-desktop/lib/types/globals.d.ts
index 4d8f77ef9ace..24442c29f88a 100644
--- a/app/ide-desktop/lib/types/globals.d.ts
+++ b/app/ide-desktop/lib/types/globals.d.ts
@@ -73,6 +73,15 @@ interface NavigationApi {
     readonly goForward: () => void
 }
 
+// =========================
+// === Electron Versions ===
+// =========================
+
+/** Versions of selected software bundled with Electron. */
+interface ElectronVersions {
+    readonly electron: string
+}
+
 // =====================================
 // === Global namespace augmentation ===
 // =====================================
@@ -86,6 +95,7 @@ declare global {
         readonly backendApi?: BackendApi
         readonly authenticationApi: AuthenticationApi
         readonly navigationApi: NavigationApi
+        readonly electronVersions?: ElectronVersions
     }
 
     namespace NodeJS {

From 747c9b775f49b4b587f6e627e1e08f39b8f76e7a Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 15:36:53 +1000
Subject: [PATCH 04/25] Switch to use actual versions

---
 app/ide-desktop/lib/client/src/preload.ts     |  8 ++---
 app/ide-desktop/lib/common/src/appConfig.js   | 15 +++-----
 .../src/configurations/inputBindings.ts       |  4 +--
 .../lib/dashboard/src/modals/AboutModal.tsx   | 34 +++++++++++--------
 .../lib/dashboard/src/text/english.json       |  3 +-
 .../lib/dashboard/src/text/index.ts           |  3 +-
 app/ide-desktop/lib/types/globals.d.ts        | 19 ++++++-----
 7 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/app/ide-desktop/lib/client/src/preload.ts b/app/ide-desktop/lib/client/src/preload.ts
index 8b9a01693d12..2eb82aaf4204 100644
--- a/app/ide-desktop/lib/client/src/preload.ts
+++ b/app/ide-desktop/lib/client/src/preload.ts
@@ -5,6 +5,7 @@
 
 import * as electron from 'electron'
 
+import * as debug from 'debug'
 import * as ipc from 'ipc'
 
 // =================
@@ -23,7 +24,7 @@ const FILE_BROWSER_API_KEY = 'fileBrowserApi'
 
 const NAVIGATION_API_KEY = 'navigationApi'
 
-const ELECTRON_VERSIONS_KEY = 'electronVersions'
+const VERSION_INFO_KEY = 'versionInfo'
 
 // =============================
 // === importProjectFromPath ===
@@ -175,7 +176,4 @@ const FILE_BROWSER_API = {
 }
 electron.contextBridge.exposeInMainWorld(FILE_BROWSER_API_KEY, FILE_BROWSER_API)
 
-const ELECTRON_VERSIONS = {
-    electron: process.versions.electron,
-}
-electron.contextBridge.exposeInMainWorld(ELECTRON_VERSIONS_KEY, ELECTRON_VERSIONS)
+electron.contextBridge.exposeInMainWorld(VERSION_INFO_KEY, debug.VERSION_INFO)
diff --git a/app/ide-desktop/lib/common/src/appConfig.js b/app/ide-desktop/lib/common/src/appConfig.js
index 8fd7207bcdbe..496f9421043c 100644
--- a/app/ide-desktop/lib/common/src/appConfig.js
+++ b/app/ide-desktop/lib/common/src/appConfig.js
@@ -2,8 +2,8 @@
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import * as url from 'node:url'
-import * as childProcess from 'node:child_process'
-import * as streamConsumers from 'node:stream/consumers'
+
+import BUILD_INFO from '../../../../../build.json' assert { type: 'json' }
 
 // ===============================
 // === readEnvironmentFromFile ===
@@ -47,14 +47,8 @@ export async function readEnvironmentFromFile() {
         if (!isProduction || entries.length > 0) {
             Object.assign(process.env, variables)
         }
-        if (process.env.ENSO_CLOUD_DASHBOARD_VERSION == null) {
-            const branchNameProcess = childProcess.exec('git rev-parse --abbrev-ref HEAD')
-            const branchName = await streamConsumers.text(branchNameProcess.stdout)
-            process.env.ENSO_CLOUD_DASHBOARD_VERSION = `dev-${branchName.trim()}`
-            const commitHashProcess = childProcess.exec('git log -1 --pretty=format:%H')
-            const commitHash = await streamConsumers.text(commitHashProcess.stdout)
-            process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH = commitHash.trim()
-        }
+        process.env.ENSO_CLOUD_DASHBOARD_VERSION ??= BUILD_INFO.version
+        process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH ??= BUILD_INFO.commit
     } catch (error) {
         if (missingKeys.length !== 0) {
             console.warn('Could not load `.env` file; disabling cloud backend.')
@@ -133,6 +127,7 @@ const DUMMY_DEFINES = {
     'process.env.ENSO_CLOUD_COGNITO_DOMAIN': '',
     'process.env.ENSO_CLOUD_COGNITO_REGION': '',
     'process.env.ENSO_CLOUD_DASHBOARD_VERSION': '0.0.1-testing',
+    'process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH': 'abcdef0',
     /* eslint-enable @typescript-eslint/naming-convention */
 }
 
diff --git a/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts b/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
index 160b21107f5c..b4970244b3c8 100644
--- a/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
+++ b/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
@@ -14,7 +14,7 @@ import CopyIcon from 'enso-assets/copy.svg'
 import DataDownloadIcon from 'enso-assets/data_download.svg'
 import DataUploadIcon from 'enso-assets/data_upload.svg'
 import DuplicateIcon from 'enso-assets/duplicate.svg'
-import EnsoLogoIcon from 'enso-assets/enso_logo.svg'
+import LogoIcon from 'enso-assets/enso_logo.svg'
 import OpenIcon from 'enso-assets/open.svg'
 import PasteIcon from 'enso-assets/paste.svg'
 import PenIcon from 'enso-assets/pen.svg'
@@ -126,6 +126,6 @@ export const BINDINGS = inputBindings.defineBindings({
     name: 'About Enso',
     bindings: ['Mod+Shift+?'],
     rebindable: true,
-    icon: EnsoLogoIcon,
+    icon: LogoIcon,
   },
 })
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index c924c2d36b83..ba722cb177e4 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -1,7 +1,7 @@
 /** @file Modal for confirming delete of any type of asset. */
 import * as React from 'react'
 
-import EnsoLogoIcon from 'enso-assets/enso_logo.svg'
+import LogoIcon from 'enso-assets/enso_logo.svg'
 
 import * as textProvider from '#/providers/TextProvider'
 
@@ -31,26 +31,30 @@ export default function AboutModal(props: AboutModalProps) {
           event.stopPropagation()
         }}
       >
-        <div className="relative flex gap-4">
-          <SvgMask src={EnsoLogoIcon} className="size-16" />
+        <div className="relative flex gap-4 items-center">
+          <SvgMask src={LogoIcon} className="size-16" />
           <div className="flex flex-col gap-1">
             <div className="text-base font-semibold">
               {supportsLocalBackend
                 ? getText('appNameDesktopEdition')
                 : getText('appNameCloudEdition')}
             </div>
-            <div>
-              {getText('versionX', process.env.ENSO_CLOUD_DASHBOARD_VERSION)}
-              {/* TODO: version injected at build time as environment variable */}
-            </div>
-            {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH && (
-              <div>
-                {getText('commitX', process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH)}
-                {/* TODO: version injected at build time as environment variable */}
-              </div>
-            )}
-            {window.electronVersions != null && (
-              <div>{getText('electronVersionX', window.electronVersions.electron)}</div>
+            {window.versionInfo != null ? (
+              <>
+                <div>{getText('versionX', window.versionInfo.version)}</div>
+                <div>{getText('buildX', window.versionInfo.build)}</div>
+                <div>{getText('electronVersionX', window.versionInfo.electron)}</div>
+                <div>{getText('chromeVersionX', window.versionInfo.chrome)}</div>
+              </>
+            ) : (
+              <>
+                {process.env.ENSO_CLOUD_DASHBOARD_VERSION != null && (
+                  <div>{getText('versionX', process.env.ENSO_CLOUD_DASHBOARD_VERSION)}</div>
+                )}
+                {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH != null && (
+                  <div>{getText('buildX', process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH)}</div>
+                )}
+              </>
             )}
           </div>
         </div>
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index 32a0d885f599..67e9274e1836 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -276,8 +276,9 @@
   "replyExclamation": "Reply!",
   "lastModifiedOn": "last modified on $0",
   "versionX": "Version $0",
-  "commitX": "Commit $0",
+  "buildX": "Build $0",
   "electronVersionX": "Electron $0",
+  "chromeVersionX": "Chrome $0",
   "compareWithLatest": "Compare with latest",
   "compareVersionXWithLatest": "Compare version $0 with latest",
   "onDateX": "on $0",
diff --git a/app/ide-desktop/lib/dashboard/src/text/index.ts b/app/ide-desktop/lib/dashboard/src/text/index.ts
index a83a74186d51..a70cf4e9e4d4 100644
--- a/app/ide-desktop/lib/dashboard/src/text/index.ts
+++ b/app/ide-desktop/lib/dashboard/src/text/index.ts
@@ -46,8 +46,9 @@ interface PlaceholderOverrides {
   readonly youAreAlreadyAddingUser: [string]
   readonly lastModifiedOn: [string]
   readonly versionX: [string]
-  readonly commitX: [commit: string]
+  readonly buildX: [build: string]
   readonly electronVersionX: [electronVersion: string]
+  readonly chromeVersionX: [chromeVersion: string]
   readonly compareVersionXWithLatest: [number]
   readonly onDateX: [string]
   readonly xUsersSelected: [number]
diff --git a/app/ide-desktop/lib/types/globals.d.ts b/app/ide-desktop/lib/types/globals.d.ts
index 24442c29f88a..06bd96be3a8e 100644
--- a/app/ide-desktop/lib/types/globals.d.ts
+++ b/app/ide-desktop/lib/types/globals.d.ts
@@ -73,13 +73,16 @@ interface NavigationApi {
     readonly goForward: () => void
 }
 
-// =========================
-// === Electron Versions ===
-// =========================
-
-/** Versions of selected software bundled with Electron. */
-interface ElectronVersions {
+// ====================
+// === Version Info ===
+// ====================
+
+/** Versions of the app, and selected software bundled with Electron. */
+interface VersionInfo {
+    readonly version: string
+    readonly build: string
     readonly electron: string
+    readonly chrome: string
 }
 
 // =====================================
@@ -95,7 +98,7 @@ declare global {
         readonly backendApi?: BackendApi
         readonly authenticationApi: AuthenticationApi
         readonly navigationApi: NavigationApi
-        readonly electronVersions?: ElectronVersions
+        readonly versionInfo?: VersionInfo
     }
 
     namespace NodeJS {
@@ -152,7 +155,7 @@ declare global {
             // @ts-expect-error The index signature is intentional to disallow unknown env vars.
             readonly ENSO_CLOUD_GOOGLE_ANALYTICS_TAG?: string
             // @ts-expect-error The index signature is intentional to disallow unknown env vars.
-            readonly ENSO_CLOUD_DASHBOARD_VERSION: string
+            readonly ENSO_CLOUD_DASHBOARD_VERSION?: string
             // @ts-expect-error The index signature is intentional to disallow unknown env vars.
             readonly ENSO_CLOUD_DASHBOARD_COMMIT_HASH?: string
             // @ts-expect-error The index signature is intentional to disallow unknown env vars.

From f60a2ccf8d39fefcb47d0d33d5d6a2f9a28dcfbe Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 16:10:55 +1000
Subject: [PATCH 05/25] Also show user agent

---
 .../lib/dashboard/src/configurations/inputBindings.ts          | 2 +-
 app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx        | 3 ++-
 app/ide-desktop/lib/dashboard/src/text/english.json            | 1 +
 app/ide-desktop/lib/dashboard/src/text/index.ts                | 1 +
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts b/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
index b4970244b3c8..c5c8c1e10270 100644
--- a/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
+++ b/app/ide-desktop/lib/dashboard/src/configurations/inputBindings.ts
@@ -124,7 +124,7 @@ export const BINDINGS = inputBindings.defineBindings({
   },
   aboutThisApp: {
     name: 'About Enso',
-    bindings: ['Mod+Shift+?'],
+    bindings: ['Mod+/'],
     rebindable: true,
     icon: LogoIcon,
   },
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index ba722cb177e4..303e6075eafc 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -31,7 +31,7 @@ export default function AboutModal(props: AboutModalProps) {
           event.stopPropagation()
         }}
       >
-        <div className="relative flex gap-4 items-center">
+        <div className="relative flex items-center gap-4">
           <SvgMask src={LogoIcon} className="size-16" />
           <div className="flex flex-col gap-1">
             <div className="text-base font-semibold">
@@ -56,6 +56,7 @@ export default function AboutModal(props: AboutModalProps) {
                 )}
               </>
             )}
+            <div>{getText('userAgentX', navigator.userAgent)}</div>
           </div>
         </div>
       </div>
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index 67e9274e1836..ee4ac929f82b 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -279,6 +279,7 @@
   "buildX": "Build $0",
   "electronVersionX": "Electron $0",
   "chromeVersionX": "Chrome $0",
+  "userAgentX": "User Agent $0",
   "compareWithLatest": "Compare with latest",
   "compareVersionXWithLatest": "Compare version $0 with latest",
   "onDateX": "on $0",
diff --git a/app/ide-desktop/lib/dashboard/src/text/index.ts b/app/ide-desktop/lib/dashboard/src/text/index.ts
index a70cf4e9e4d4..3ad5aca1aa69 100644
--- a/app/ide-desktop/lib/dashboard/src/text/index.ts
+++ b/app/ide-desktop/lib/dashboard/src/text/index.ts
@@ -49,6 +49,7 @@ interface PlaceholderOverrides {
   readonly buildX: [build: string]
   readonly electronVersionX: [electronVersion: string]
   readonly chromeVersionX: [chromeVersion: string]
+  readonly userAgentX: [userAgent: string]
   readonly compareVersionXWithLatest: [number]
   readonly onDateX: [string]
   readonly xUsersSelected: [number]

From 9c6e95ba56c895b02b1fe362446681506b05347e Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 16:47:04 +1000
Subject: [PATCH 06/25] Add copy-paste support

---
 .../lib/dashboard/src/modals/AboutModal.tsx   | 108 +++++++++++++++---
 .../lib/dashboard/src/text/english.json       |  11 +-
 .../lib/dashboard/src/text/index.ts           |   2 +-
 3 files changed, 98 insertions(+), 23 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index 303e6075eafc..9725e15e47bc 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -5,8 +5,19 @@ import LogoIcon from 'enso-assets/enso_logo.svg'
 
 import * as textProvider from '#/providers/TextProvider'
 
+import * as aria from '#/components/aria'
 import Modal from '#/components/Modal'
+import ButtonRow from '#/components/styled/ButtonRow'
 import SvgMask from '#/components/SvgMask'
+import UnstyledButton from '#/components/UnstyledButton'
+
+// =================
+// === Constants ===
+// =================
+
+/** The duration of time for which the "copy" button indicates that the text has
+ * successfully been copied. */
+const CLEAR_COPIED_STATE_TIMEOUT_MS = 2_500
 
 // ==================
 // === AboutModal ===
@@ -21,6 +32,32 @@ export interface AboutModalProps {
 export default function AboutModal(props: AboutModalProps) {
   const { supportsLocalBackend } = props
   const { getText } = textProvider.useText()
+  const [isCopied, setIsCopied] = React.useState(false)
+  const textContainerRef = React.useRef<HTMLTableSectionElement | null>(null)
+
+  const doCopy = () => {
+    const textContainer = textContainerRef.current
+    if (textContainer == null) {
+      return
+    } else {
+      const firstChild = textContainer.children[0]
+      const lastChild = textContainer.children[textContainer.children.length - 1]
+      if (firstChild != null && lastChild != null) {
+        getSelection()?.setBaseAndExtent(firstChild, 0, lastChild, 2)
+      }
+      const texts = Array.from(
+        textContainer.children,
+        element => `${element.children[0]?.textContent} ${element.children[1]?.textContent}`
+      )
+      navigator.clipboard.writeText(texts.join('\n'))
+      if (!isCopied) {
+        setIsCopied(true)
+        setTimeout(() => {
+          setIsCopied(false)
+        }, CLEAR_COPIED_STATE_TIMEOUT_MS)
+      }
+    }
+  }
 
   return (
     <Modal centered className="bg-dim">
@@ -33,30 +70,65 @@ export default function AboutModal(props: AboutModalProps) {
       >
         <div className="relative flex items-center gap-4">
           <SvgMask src={LogoIcon} className="size-16" />
-          <div className="flex flex-col gap-1">
+          <div className="flex flex-col gap-3">
             <div className="text-base font-semibold">
               {supportsLocalBackend
                 ? getText('appNameDesktopEdition')
                 : getText('appNameCloudEdition')}
             </div>
-            {window.versionInfo != null ? (
-              <>
-                <div>{getText('versionX', window.versionInfo.version)}</div>
-                <div>{getText('buildX', window.versionInfo.build)}</div>
-                <div>{getText('electronVersionX', window.versionInfo.electron)}</div>
-                <div>{getText('chromeVersionX', window.versionInfo.chrome)}</div>
-              </>
-            ) : (
-              <>
-                {process.env.ENSO_CLOUD_DASHBOARD_VERSION != null && (
-                  <div>{getText('versionX', process.env.ENSO_CLOUD_DASHBOARD_VERSION)}</div>
-                )}
-                {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH != null && (
-                  <div>{getText('buildX', process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH)}</div>
+            <table>
+              <tbody ref={textContainerRef}>
+                {window.versionInfo != null ? (
+                  <>
+                    <tr>
+                      <td className="whitespace-nowrap px-cell-x">{getText('version')}</td>
+                      <td>{window.versionInfo.version}</td>
+                    </tr>
+                    <tr>
+                      <td className="whitespace-nowrap px-cell-x">{getText('build')}</td>
+                      <td>{window.versionInfo.build}</td>
+                    </tr>
+                    <tr>
+                      <td className="whitespace-nowrap px-cell-x">{getText('electronVersion')}</td>
+                      <td>{window.versionInfo.electron}</td>
+                    </tr>
+                    <tr>
+                      <td className="whitespace-nowrap px-cell-x">{getText('chromeVersion')}</td>
+                      <td>{window.versionInfo.chrome}</td>
+                    </tr>
+                  </>
+                ) : (
+                  <>
+                    {process.env.ENSO_CLOUD_DASHBOARD_VERSION != null && (
+                      <tr>
+                        <td className="whitespace-nowrap px-cell-x">{getText('version')}</td>
+                        <td>{process.env.ENSO_CLOUD_DASHBOARD_VERSION}</td>
+                      </tr>
+                    )}
+                    {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH != null && (
+                      <tr>
+                        <td className="whitespace-nowrap px-cell-x">{getText('build')}</td>
+                        <td>{process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH}</td>
+                      </tr>
+                    )}
+                  </>
                 )}
-              </>
-            )}
-            <div>{getText('userAgentX', navigator.userAgent)}</div>
+                <tr>
+                  <td className="whitespace-nowrap px-cell-x">{getText('userAgent')}</td>
+                  <td>{navigator.userAgent}</td>
+                </tr>
+              </tbody>
+            </table>
+            <ButtonRow>
+              <UnstyledButton
+                className="button relative bg-invite text-inversed active"
+                onPress={doCopy}
+              >
+                <aria.Text className="text">
+                  {isCopied ? getText('copied') : getText('copy')}
+                </aria.Text>
+              </UnstyledButton>
+            </ButtonRow>
           </div>
         </div>
       </div>
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index ee4ac929f82b..1a254c07ba05 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -151,6 +151,8 @@
   "uploaded": "Uploaded",
   "delete": "Delete",
   "invite": "Invite",
+  "copy": "Copy",
+  "copied": "Copied",
   "color": "Color",
   "labels": "Labels",
   "views": "Views",
@@ -276,10 +278,11 @@
   "replyExclamation": "Reply!",
   "lastModifiedOn": "last modified on $0",
   "versionX": "Version $0",
-  "buildX": "Build $0",
-  "electronVersionX": "Electron $0",
-  "chromeVersionX": "Chrome $0",
-  "userAgentX": "User Agent $0",
+  "version": "Version",
+  "build": "Build",
+  "electronVersion": "Electron",
+  "chromeVersion": "Chrome",
+  "userAgent": "User Agent",
   "compareWithLatest": "Compare with latest",
   "compareVersionXWithLatest": "Compare version $0 with latest",
   "onDateX": "on $0",
diff --git a/app/ide-desktop/lib/dashboard/src/text/index.ts b/app/ide-desktop/lib/dashboard/src/text/index.ts
index 3ad5aca1aa69..81a509ca5baa 100644
--- a/app/ide-desktop/lib/dashboard/src/text/index.ts
+++ b/app/ide-desktop/lib/dashboard/src/text/index.ts
@@ -45,7 +45,7 @@ interface PlaceholderOverrides {
   readonly userIsAlreadyInTheOrganization: [string]
   readonly youAreAlreadyAddingUser: [string]
   readonly lastModifiedOn: [string]
-  readonly versionX: [string]
+  readonly versionX: [version: number | string]
   readonly buildX: [build: string]
   readonly electronVersionX: [electronVersion: string]
   readonly chromeVersionX: [chromeVersion: string]

From 0118cd367407a0e04232bde7fb0094d688c5775f Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 16:52:01 +1000
Subject: [PATCH 07/25] Adjust styles

---
 .../lib/dashboard/src/modals/AboutModal.tsx    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index 9725e15e47bc..a0fb6fb86153 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -63,13 +63,13 @@ export default function AboutModal(props: AboutModalProps) {
     <Modal centered className="bg-dim">
       <div
         data-testid="about-modal"
-        className="pointer-events-auto relative flex w-[28rem] select-text flex-col gap-modal rounded-default p-modal-wide before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
+        className="pointer-events-auto relative flex w-[30rem] select-text flex-col gap-modal rounded-default p-modal-wide before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
         onClick={event => {
           event.stopPropagation()
         }}
       >
         <div className="relative flex items-center gap-4">
-          <SvgMask src={LogoIcon} className="size-16" />
+          <SvgMask src={LogoIcon} className="size-16 shrink-0" />
           <div className="flex flex-col gap-3">
             <div className="text-base font-semibold">
               {supportsLocalBackend
@@ -81,19 +81,19 @@ export default function AboutModal(props: AboutModalProps) {
                 {window.versionInfo != null ? (
                   <>
                     <tr>
-                      <td className="whitespace-nowrap px-cell-x">{getText('version')}</td>
+                      <td className="whitespace-nowrap pr-cell-x">{getText('version')}</td>
                       <td>{window.versionInfo.version}</td>
                     </tr>
                     <tr>
-                      <td className="whitespace-nowrap px-cell-x">{getText('build')}</td>
+                      <td className="whitespace-nowrap pr-cell-x">{getText('build')}</td>
                       <td>{window.versionInfo.build}</td>
                     </tr>
                     <tr>
-                      <td className="whitespace-nowrap px-cell-x">{getText('electronVersion')}</td>
+                      <td className="whitespace-nowrap pr-cell-x">{getText('electronVersion')}</td>
                       <td>{window.versionInfo.electron}</td>
                     </tr>
                     <tr>
-                      <td className="whitespace-nowrap px-cell-x">{getText('chromeVersion')}</td>
+                      <td className="whitespace-nowrap pr-cell-x">{getText('chromeVersion')}</td>
                       <td>{window.versionInfo.chrome}</td>
                     </tr>
                   </>
@@ -101,20 +101,20 @@ export default function AboutModal(props: AboutModalProps) {
                   <>
                     {process.env.ENSO_CLOUD_DASHBOARD_VERSION != null && (
                       <tr>
-                        <td className="whitespace-nowrap px-cell-x">{getText('version')}</td>
+                        <td className="whitespace-nowrap pr-cell-x">{getText('version')}</td>
                         <td>{process.env.ENSO_CLOUD_DASHBOARD_VERSION}</td>
                       </tr>
                     )}
                     {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH != null && (
                       <tr>
-                        <td className="whitespace-nowrap px-cell-x">{getText('build')}</td>
+                        <td className="whitespace-nowrap pr-cell-x">{getText('build')}</td>
                         <td>{process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH}</td>
                       </tr>
                     )}
                   </>
                 )}
                 <tr>
-                  <td className="whitespace-nowrap px-cell-x">{getText('userAgent')}</td>
+                  <td className="whitespace-nowrap pr-cell-x">{getText('userAgent')}</td>
                   <td>{navigator.userAgent}</td>
                 </tr>
               </tbody>

From 5a4d65500b9e1a340cfab24dd5e3329afcfdc403 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 16:58:28 +1000
Subject: [PATCH 08/25] Fix lint errors

---
 app/ide-desktop/lib/common/tsconfig.json                | 2 +-
 app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/ide-desktop/lib/common/tsconfig.json b/app/ide-desktop/lib/common/tsconfig.json
index 0a921bf939ad..3a319d3b29f6 100644
--- a/app/ide-desktop/lib/common/tsconfig.json
+++ b/app/ide-desktop/lib/common/tsconfig.json
@@ -5,5 +5,5 @@
     "checkJs": false,
     "skipLibCheck": false
   },
-  "include": ["./src/"]
+  "include": ["./src/", "../types/"]
 }
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index a0fb6fb86153..cc39f7d6fbe0 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -49,13 +49,14 @@ export default function AboutModal(props: AboutModalProps) {
         textContainer.children,
         element => `${element.children[0]?.textContent} ${element.children[1]?.textContent}`
       )
-      navigator.clipboard.writeText(texts.join('\n'))
+      void navigator.clipboard.writeText(texts.join('\n'))
       if (!isCopied) {
         setIsCopied(true)
         setTimeout(() => {
           setIsCopied(false)
         }, CLEAR_COPIED_STATE_TIMEOUT_MS)
       }
+      return
     }
   }
 

From 9401e6b3a5c5236938774b00b8d0bdbd3319633e Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 19:33:31 +1000
Subject: [PATCH 09/25] Switch to dialog components

---
 .../AriaComponents/Dialog/Dialog.tsx          |  42 +++---
 .../dashboard/src/components/MenuEntry.tsx    |  17 ++-
 .../lib/dashboard/src/layouts/UserMenu.tsx    |   7 +-
 .../lib/dashboard/src/modals/AboutModal.tsx   | 124 ++++++++----------
 4 files changed, 98 insertions(+), 92 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
index 982f74f7e2f2..3742cf5735c6 100644
--- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
@@ -1,8 +1,5 @@
-/**
- * @file
- * A dialog is an overlay shown above other content in an application.
- * Can be used to display alerts, confirmations, or other content.
- */
+/** @file A dialog is an overlay shown above other content in an application.
+ * Can be used to display alerts, confirmations, or other content. */
 import * as React from 'react'
 
 import * as tailwindMerge from 'tailwind-merge'
@@ -15,27 +12,32 @@ import * as portal from '#/components/Portal'
 
 import type * as types from './types'
 
-const MODAL_CLASSES =
-  'fixed z-1 top-0 left-0 right-0 bottom-0 bg-black/[15%] flex items-center justify-center text-center'
+// =================
+// === Constants ===
+// =================
+
+const MODAL_CLASSES = 'fixed z-1 inset bg-dim flex items-center justify-center text-center'
 const DIALOG_CLASSES =
-  'relative flex flex-col overflow-hidden rounded-xl text-left align-middle text-slate-700 shadow-2xl bg-clip-padding border border-black/10 before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default'
+  'relative flex flex-col overflow-hidden text-xs rounded-default text-left align-middle text-primary before:absolute before:inset before:rounded-default before:bg-selected-frame before:backdrop-blur-default'
 
-const MODAL_CLASSES_BY_TYPE = {
-  modal: 'p-4',
+const MODAL_CLASSES_BY_TYPE: Readonly<Record<types.DialogType, string>> = {
+  modal: '',
   popover: '',
   fullscreen: 'p-4',
-} satisfies Record<types.DialogType, string>
+}
 
-const DIALOG_CLASSES_BY_TYPE = {
-  modal: 'w-full max-w-md min-h-[200px] h-[90vh] max-h-[90vh]',
+const DIALOG_CLASSES_BY_TYPE: Readonly<Record<types.DialogType, string>> = {
+  modal: 'p-modal-wide',
   popover: 'rounded-lg',
   fullscreen: 'w-full h-full max-w-full max-h-full bg-clip-border',
-} satisfies Record<types.DialogType, string>
+}
+
+// ==============
+// === Dialog ===
+// ==============
 
-/**
- * A dialog is an overlay shown above other content in an application.
- * Can be used to display alerts, confirmations, or other content.
- */
+/** A dialog is an overlay shown above other content in an application.
+ * Can be used to display alerts, confirmations, or other content. */
 export function Dialog(props: types.DialogProps) {
   const {
     children,
@@ -51,13 +53,13 @@ export function Dialog(props: types.DialogProps) {
 
   return (
     <aria.Modal
-      className={tailwindMerge.twMerge(MODAL_CLASSES, [MODAL_CLASSES_BY_TYPE[type]])}
+      className={tailwindMerge.twMerge(MODAL_CLASSES, MODAL_CLASSES_BY_TYPE[type])}
       isDismissable={isDismissible}
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
       UNSTABLE_portalContainer={root.current}
     >
       <aria.Dialog
-        className={tailwindMerge.twMerge(DIALOG_CLASSES, [DIALOG_CLASSES_BY_TYPE[type]], className)}
+        className={tailwindMerge.twMerge(DIALOG_CLASSES, DIALOG_CLASSES_BY_TYPE[type], className)}
         {...ariaDialogProps}
       >
         {opts => (
diff --git a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
index 837b9297dfe3..e1da4a49b33c 100644
--- a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
@@ -76,12 +76,13 @@ export interface MenuEntryProps {
   readonly isDisabled?: boolean
   readonly title?: string
   readonly isContextMenuEntry?: boolean
+  readonly dialog?: JSX.Element
   readonly doAction: () => void
 }
 
 /** An item in a menu. */
 export default function MenuEntry(props: MenuEntryProps) {
-  const { hidden = false, action, label, isDisabled = false, title } = props
+  const { hidden = false, action, label, isDisabled = false, dialog, title } = props
   const { isContextMenuEntry = false, doAction } = props
   const { getText } = textProvider.useText()
   const inputBindings = inputBindingsProvider.useInputBindings()
@@ -98,7 +99,7 @@ export default function MenuEntry(props: MenuEntryProps) {
     }
   }, [isDisabled, inputBindings, action, doAction])
 
-  return hidden ? null : (
+  const button = (
     <UnstyledButton
       isDisabled={isDisabled}
       className="group flex w-full rounded-menu-entry"
@@ -117,4 +118,16 @@ export default function MenuEntry(props: MenuEntryProps) {
       </div>
     </UnstyledButton>
   )
+
+  const wrappedButton =
+    dialog == null ? (
+      button
+    ) : (
+      <aria.DialogTrigger>
+        {button}
+        {dialog}
+      </aria.DialogTrigger>
+    )
+
+  return hidden ? null : wrappedButton
 }
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
index d0f816271695..aa92b3e6c8d8 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
@@ -44,7 +44,7 @@ export default function UserMenu(props: UserMenuProps) {
   const navigate = navigateHooks.useNavigate()
   const { signOut } = authProvider.useAuth()
   const { user } = authProvider.useNonPartialUserSession()
-  const { setModal, unsetModal } = modalProvider.useSetModal()
+  const { unsetModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
 
@@ -55,9 +55,8 @@ export default function UserMenu(props: UserMenuProps) {
   const aboutThisAppMenuEntry = (
     <MenuEntry
       action="aboutThisApp"
-      doAction={() => {
-        setModal(<AboutModal supportsLocalBackend={supportsLocalBackend} />)
-      }}
+      dialog={<AboutModal supportsLocalBackend={supportsLocalBackend} />}
+      doAction={() => {}}
     />
   )
 
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index cc39f7d6fbe0..8b4a70d79f43 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -6,7 +6,7 @@ import LogoIcon from 'enso-assets/enso_logo.svg'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as aria from '#/components/aria'
-import Modal from '#/components/Modal'
+import * as ariaComponents from '#/components/AriaComponents'
 import ButtonRow from '#/components/styled/ButtonRow'
 import SvgMask from '#/components/SvgMask'
 import UnstyledButton from '#/components/UnstyledButton'
@@ -61,78 +61,70 @@ export default function AboutModal(props: AboutModalProps) {
   }
 
   return (
-    <Modal centered className="bg-dim">
-      <div
-        data-testid="about-modal"
-        className="pointer-events-auto relative flex w-[30rem] select-text flex-col gap-modal rounded-default p-modal-wide before:absolute before:inset before:h-full before:w-full before:rounded-default before:bg-selected-frame before:backdrop-blur-default"
-        onClick={event => {
-          event.stopPropagation()
-        }}
-      >
-        <div className="relative flex items-center gap-4">
-          <SvgMask src={LogoIcon} className="size-16 shrink-0" />
-          <div className="flex flex-col gap-3">
-            <div className="text-base font-semibold">
-              {supportsLocalBackend
-                ? getText('appNameDesktopEdition')
-                : getText('appNameCloudEdition')}
-            </div>
-            <table>
-              <tbody ref={textContainerRef}>
-                {window.versionInfo != null ? (
-                  <>
+    <ariaComponents.Dialog className="w-[30rem]">
+      <div className="relative flex items-center gap-4">
+        <SvgMask src={LogoIcon} className="size-16 shrink-0" />
+        <div className="flex flex-col gap-3">
+          <div className="text-base font-semibold">
+            {supportsLocalBackend
+              ? getText('appNameDesktopEdition')
+              : getText('appNameCloudEdition')}
+          </div>
+          <table>
+            <tbody ref={textContainerRef}>
+              {window.versionInfo != null ? (
+                <>
+                  <tr>
+                    <td className="whitespace-nowrap pr-cell-x">{getText('version')}</td>
+                    <td>{window.versionInfo.version}</td>
+                  </tr>
+                  <tr>
+                    <td className="whitespace-nowrap pr-cell-x">{getText('build')}</td>
+                    <td>{window.versionInfo.build}</td>
+                  </tr>
+                  <tr>
+                    <td className="whitespace-nowrap pr-cell-x">{getText('electronVersion')}</td>
+                    <td>{window.versionInfo.electron}</td>
+                  </tr>
+                  <tr>
+                    <td className="whitespace-nowrap pr-cell-x">{getText('chromeVersion')}</td>
+                    <td>{window.versionInfo.chrome}</td>
+                  </tr>
+                </>
+              ) : (
+                <>
+                  {process.env.ENSO_CLOUD_DASHBOARD_VERSION != null && (
                     <tr>
                       <td className="whitespace-nowrap pr-cell-x">{getText('version')}</td>
-                      <td>{window.versionInfo.version}</td>
+                      <td>{process.env.ENSO_CLOUD_DASHBOARD_VERSION}</td>
                     </tr>
+                  )}
+                  {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH != null && (
                     <tr>
                       <td className="whitespace-nowrap pr-cell-x">{getText('build')}</td>
-                      <td>{window.versionInfo.build}</td>
-                    </tr>
-                    <tr>
-                      <td className="whitespace-nowrap pr-cell-x">{getText('electronVersion')}</td>
-                      <td>{window.versionInfo.electron}</td>
+                      <td>{process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH}</td>
                     </tr>
-                    <tr>
-                      <td className="whitespace-nowrap pr-cell-x">{getText('chromeVersion')}</td>
-                      <td>{window.versionInfo.chrome}</td>
-                    </tr>
-                  </>
-                ) : (
-                  <>
-                    {process.env.ENSO_CLOUD_DASHBOARD_VERSION != null && (
-                      <tr>
-                        <td className="whitespace-nowrap pr-cell-x">{getText('version')}</td>
-                        <td>{process.env.ENSO_CLOUD_DASHBOARD_VERSION}</td>
-                      </tr>
-                    )}
-                    {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH != null && (
-                      <tr>
-                        <td className="whitespace-nowrap pr-cell-x">{getText('build')}</td>
-                        <td>{process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH}</td>
-                      </tr>
-                    )}
-                  </>
-                )}
-                <tr>
-                  <td className="whitespace-nowrap pr-cell-x">{getText('userAgent')}</td>
-                  <td>{navigator.userAgent}</td>
-                </tr>
-              </tbody>
-            </table>
-            <ButtonRow>
-              <UnstyledButton
-                className="button relative bg-invite text-inversed active"
-                onPress={doCopy}
-              >
-                <aria.Text className="text">
-                  {isCopied ? getText('copied') : getText('copy')}
-                </aria.Text>
-              </UnstyledButton>
-            </ButtonRow>
-          </div>
+                  )}
+                </>
+              )}
+              <tr>
+                <td className="whitespace-nowrap pr-cell-x">{getText('userAgent')}</td>
+                <td>{navigator.userAgent}</td>
+              </tr>
+            </tbody>
+          </table>
+          <ButtonRow>
+            <UnstyledButton
+              className="button relative bg-invite text-inversed active"
+              onPress={doCopy}
+            >
+              <aria.Text className="text">
+                {isCopied ? getText('copied') : getText('copy')}
+              </aria.Text>
+            </UnstyledButton>
+          </ButtonRow>
         </div>
       </div>
-    </Modal>
+    </ariaComponents.Dialog>
   )
 }

From 5cf728c59450d3b5ae34a18214fa2c93e559f852 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 19:44:41 +1000
Subject: [PATCH 10/25] Generate UI and string from array instead of generating
 string from UI

---
 .../lib/dashboard/src/modals/AboutModal.tsx   | 76 ++++++++-----------
 1 file changed, 33 insertions(+), 43 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index 8b4a70d79f43..b59b89e743d6 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -3,6 +3,8 @@ import * as React from 'react'
 
 import LogoIcon from 'enso-assets/enso_logo.svg'
 
+import * as text from '#/text'
+
 import * as textProvider from '#/providers/TextProvider'
 
 import * as aria from '#/components/aria'
@@ -35,6 +37,24 @@ export default function AboutModal(props: AboutModalProps) {
   const [isCopied, setIsCopied] = React.useState(false)
   const textContainerRef = React.useRef<HTMLTableSectionElement | null>(null)
 
+  const versionsEntries = (
+    window.versionInfo != null
+      ? ([
+          ['version', window.versionInfo.version],
+          ['build', window.versionInfo.build],
+          ['electronVersion', window.versionInfo.electron],
+          ['chromeVersion', window.versionInfo.chrome],
+        ] as const)
+      : [
+          ...(process.env.ENSO_CLOUD_DASHBOARD_VERSION == null
+            ? []
+            : ([['version', process.env.ENSO_CLOUD_DASHBOARD_VERSION]] as const)),
+          ...(process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH == null
+            ? []
+            : ([['build', process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH]] as const)),
+        ]
+  ) satisfies readonly (readonly [text.TextId, string])[]
+
   const doCopy = () => {
     const textContainer = textContainerRef.current
     if (textContainer == null) {
@@ -45,11 +65,11 @@ export default function AboutModal(props: AboutModalProps) {
       if (firstChild != null && lastChild != null) {
         getSelection()?.setBaseAndExtent(firstChild, 0, lastChild, 2)
       }
-      const texts = Array.from(
-        textContainer.children,
-        element => `${element.children[0]?.textContent} ${element.children[1]?.textContent}`
-      )
-      void navigator.clipboard.writeText(texts.join('\n'))
+      const lines = versionsEntries.map(entry => {
+        const [textId, version] = entry
+        return `${getText(textId)} ${version}`
+      })
+      void navigator.clipboard.writeText(lines.join('\n'))
       if (!isCopied) {
         setIsCopied(true)
         setTimeout(() => {
@@ -72,45 +92,15 @@ export default function AboutModal(props: AboutModalProps) {
           </div>
           <table>
             <tbody ref={textContainerRef}>
-              {window.versionInfo != null ? (
-                <>
-                  <tr>
-                    <td className="whitespace-nowrap pr-cell-x">{getText('version')}</td>
-                    <td>{window.versionInfo.version}</td>
-                  </tr>
-                  <tr>
-                    <td className="whitespace-nowrap pr-cell-x">{getText('build')}</td>
-                    <td>{window.versionInfo.build}</td>
-                  </tr>
-                  <tr>
-                    <td className="whitespace-nowrap pr-cell-x">{getText('electronVersion')}</td>
-                    <td>{window.versionInfo.electron}</td>
-                  </tr>
-                  <tr>
-                    <td className="whitespace-nowrap pr-cell-x">{getText('chromeVersion')}</td>
-                    <td>{window.versionInfo.chrome}</td>
+              {versionsEntries.map(entry => {
+                const [textId, version] = entry
+                return (
+                  <tr key={textId}>
+                    <td className="whitespace-nowrap pr-cell-x">{getText(textId)}</td>
+                    <td>{version}</td>
                   </tr>
-                </>
-              ) : (
-                <>
-                  {process.env.ENSO_CLOUD_DASHBOARD_VERSION != null && (
-                    <tr>
-                      <td className="whitespace-nowrap pr-cell-x">{getText('version')}</td>
-                      <td>{process.env.ENSO_CLOUD_DASHBOARD_VERSION}</td>
-                    </tr>
-                  )}
-                  {process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH != null && (
-                    <tr>
-                      <td className="whitespace-nowrap pr-cell-x">{getText('build')}</td>
-                      <td>{process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH}</td>
-                    </tr>
-                  )}
-                </>
-              )}
-              <tr>
-                <td className="whitespace-nowrap pr-cell-x">{getText('userAgent')}</td>
-                <td>{navigator.userAgent}</td>
-              </tr>
+                )
+              })}
             </tbody>
           </table>
           <ButtonRow>

From 9eb4189eb46d0477de098ddbb96ce714c42171aa Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 20:11:24 +1000
Subject: [PATCH 11/25] WIP: Fix "about" modal interactions

---
 .../AriaComponents/Dialog/Dialog.tsx          |  4 ++--
 .../components/AriaComponents/Dialog/types.ts |  2 +-
 .../dashboard/src/components/MenuEntry.tsx    | 21 +++++++++++++++++--
 .../lib/dashboard/src/modals/AboutModal.tsx   |  2 +-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
index 3742cf5735c6..b8e250d0b040 100644
--- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
@@ -43,7 +43,7 @@ export function Dialog(props: types.DialogProps) {
     children,
     title,
     type = 'modal',
-    isDismissible = true,
+    isDismissable = true,
     isKeyboardDismissDisabled = false,
     className,
     ...ariaDialogProps
@@ -54,7 +54,7 @@ export function Dialog(props: types.DialogProps) {
   return (
     <aria.Modal
       className={tailwindMerge.twMerge(MODAL_CLASSES, MODAL_CLASSES_BY_TYPE[type])}
-      isDismissable={isDismissible}
+      isDismissable={isDismissable}
       isKeyboardDismissDisabled={isKeyboardDismissDisabled}
       UNSTABLE_portalContainer={root.current}
     >
diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
index 9d48357f9c9d..67250835ea15 100644
--- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/types.ts
@@ -10,7 +10,7 @@ export interface DialogProps extends aria.DialogProps {
    * @default 'modal' */
   readonly type?: DialogType
   readonly title?: string
-  readonly isDismissible?: boolean
+  readonly isDismissable?: boolean
   readonly onOpenChange?: (isOpen: boolean) => void
   readonly isKeyboardDismissDisabled?: boolean
 }
diff --git a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
index e1da4a49b33c..764a0edc3036 100644
--- a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
@@ -8,6 +8,7 @@ import type * as text from '#/text'
 import type * as inputBindings from '#/configurations/inputBindings'
 
 import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
+import * as modalProvider from '#/providers/ModalProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as aria from '#/components/aria'
@@ -84,8 +85,10 @@ export interface MenuEntryProps {
 export default function MenuEntry(props: MenuEntryProps) {
   const { hidden = false, action, label, isDisabled = false, dialog, title } = props
   const { isContextMenuEntry = false, doAction } = props
+  const { unsetModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
   const inputBindings = inputBindingsProvider.useInputBindings()
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false)
   const info = inputBindings.metadata[action]
   React.useEffect(() => {
     // This is slower (but more convenient) than registering every shortcut in the context menu
@@ -103,7 +106,13 @@ export default function MenuEntry(props: MenuEntryProps) {
     <UnstyledButton
       isDisabled={isDisabled}
       className="group flex w-full rounded-menu-entry"
-      onPress={doAction}
+      onPress={
+        dialog == null
+          ? doAction
+          : () => {
+              setIsDialogOpen(true)
+            }
+      }
     >
       <div
         className={`flex h-row grow place-content-between items-center rounded-inherit p-menu-entry text-left selectable group-enabled:active hover:bg-hover-bg disabled:bg-transparent ${
@@ -123,7 +132,15 @@ export default function MenuEntry(props: MenuEntryProps) {
     dialog == null ? (
       button
     ) : (
-      <aria.DialogTrigger>
+      <aria.DialogTrigger
+        isOpen={isDialogOpen}
+        onOpenChange={isOpen => {
+          setIsDialogOpen(isOpen)
+          if (!isOpen) {
+            unsetModal()
+          }
+        }}
+      >
         {button}
         {dialog}
       </aria.DialogTrigger>
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index b59b89e743d6..fdb5a04e7f88 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import LogoIcon from 'enso-assets/enso_logo.svg'
 
-import * as text from '#/text'
+import type * as text from '#/text'
 
 import * as textProvider from '#/providers/TextProvider'
 

From b3c61c4c9c67c8d989343e811b78728338109c1f Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 20:18:18 +1000
Subject: [PATCH 12/25] Fix closing "about" modal

---
 .../AriaComponents/Dialog/Dialog.tsx          | 15 ++++
 .../dashboard/src/components/MenuEntry.tsx    | 36 +---------
 .../lib/dashboard/src/layouts/UserMenu.tsx    |  7 +-
 .../lib/dashboard/src/modals/AboutModal.tsx   | 68 ++++++++++---------
 4 files changed, 57 insertions(+), 69 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
index b8e250d0b040..088d4853583d 100644
--- a/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx
@@ -48,6 +48,7 @@ export function Dialog(props: types.DialogProps) {
     className,
     ...ariaDialogProps
   } = props
+  const cleanupRef = React.useRef(() => {})
 
   const root = portal.useStrictPortalContext()
 
@@ -61,6 +62,20 @@ export function Dialog(props: types.DialogProps) {
       <aria.Dialog
         className={tailwindMerge.twMerge(DIALOG_CLASSES, DIALOG_CLASSES_BY_TYPE[type], className)}
         {...ariaDialogProps}
+        ref={element => {
+          cleanupRef.current()
+          if (element == null) {
+            cleanupRef.current = () => {}
+          } else {
+            const onClick = (event: Event) => {
+              event.stopPropagation()
+            }
+            element.addEventListener('click', onClick)
+            cleanupRef.current = () => {
+              element.removeEventListener('click', onClick)
+            }
+          }
+        }}
       >
         {opts => (
           <>
diff --git a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
index 764a0edc3036..837b9297dfe3 100644
--- a/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/MenuEntry.tsx
@@ -8,7 +8,6 @@ import type * as text from '#/text'
 import type * as inputBindings from '#/configurations/inputBindings'
 
 import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
-import * as modalProvider from '#/providers/ModalProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as aria from '#/components/aria'
@@ -77,18 +76,15 @@ export interface MenuEntryProps {
   readonly isDisabled?: boolean
   readonly title?: string
   readonly isContextMenuEntry?: boolean
-  readonly dialog?: JSX.Element
   readonly doAction: () => void
 }
 
 /** An item in a menu. */
 export default function MenuEntry(props: MenuEntryProps) {
-  const { hidden = false, action, label, isDisabled = false, dialog, title } = props
+  const { hidden = false, action, label, isDisabled = false, title } = props
   const { isContextMenuEntry = false, doAction } = props
-  const { unsetModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
   const inputBindings = inputBindingsProvider.useInputBindings()
-  const [isDialogOpen, setIsDialogOpen] = React.useState(false)
   const info = inputBindings.metadata[action]
   React.useEffect(() => {
     // This is slower (but more convenient) than registering every shortcut in the context menu
@@ -102,17 +98,11 @@ export default function MenuEntry(props: MenuEntryProps) {
     }
   }, [isDisabled, inputBindings, action, doAction])
 
-  const button = (
+  return hidden ? null : (
     <UnstyledButton
       isDisabled={isDisabled}
       className="group flex w-full rounded-menu-entry"
-      onPress={
-        dialog == null
-          ? doAction
-          : () => {
-              setIsDialogOpen(true)
-            }
-      }
+      onPress={doAction}
     >
       <div
         className={`flex h-row grow place-content-between items-center rounded-inherit p-menu-entry text-left selectable group-enabled:active hover:bg-hover-bg disabled:bg-transparent ${
@@ -127,24 +117,4 @@ export default function MenuEntry(props: MenuEntryProps) {
       </div>
     </UnstyledButton>
   )
-
-  const wrappedButton =
-    dialog == null ? (
-      button
-    ) : (
-      <aria.DialogTrigger
-        isOpen={isDialogOpen}
-        onOpenChange={isOpen => {
-          setIsDialogOpen(isOpen)
-          if (!isOpen) {
-            unsetModal()
-          }
-        }}
-      >
-        {button}
-        {dialog}
-      </aria.DialogTrigger>
-    )
-
-  return hidden ? null : wrappedButton
 }
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
index aa92b3e6c8d8..d0f816271695 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
@@ -44,7 +44,7 @@ export default function UserMenu(props: UserMenuProps) {
   const navigate = navigateHooks.useNavigate()
   const { signOut } = authProvider.useAuth()
   const { user } = authProvider.useNonPartialUserSession()
-  const { unsetModal } = modalProvider.useSetModal()
+  const { setModal, unsetModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
 
@@ -55,8 +55,9 @@ export default function UserMenu(props: UserMenuProps) {
   const aboutThisAppMenuEntry = (
     <MenuEntry
       action="aboutThisApp"
-      dialog={<AboutModal supportsLocalBackend={supportsLocalBackend} />}
-      doAction={() => {}}
+      doAction={() => {
+        setModal(<AboutModal supportsLocalBackend={supportsLocalBackend} />)
+      }}
     />
   )
 
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index fdb5a04e7f88..31f0a773c409 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -81,40 +81,42 @@ export default function AboutModal(props: AboutModalProps) {
   }
 
   return (
-    <ariaComponents.Dialog className="w-[30rem]">
-      <div className="relative flex items-center gap-4">
-        <SvgMask src={LogoIcon} className="size-16 shrink-0" />
-        <div className="flex flex-col gap-3">
-          <div className="text-base font-semibold">
-            {supportsLocalBackend
-              ? getText('appNameDesktopEdition')
-              : getText('appNameCloudEdition')}
+    <aria.DialogTrigger defaultOpen>
+      <ariaComponents.Dialog className="w-[30rem]">
+        <div className="relative flex items-center gap-4">
+          <SvgMask src={LogoIcon} className="size-16 shrink-0" />
+          <div className="flex flex-col gap-3">
+            <div className="text-base font-semibold">
+              {supportsLocalBackend
+                ? getText('appNameDesktopEdition')
+                : getText('appNameCloudEdition')}
+            </div>
+            <table>
+              <tbody ref={textContainerRef}>
+                {versionsEntries.map(entry => {
+                  const [textId, version] = entry
+                  return (
+                    <tr key={textId}>
+                      <td className="whitespace-nowrap pr-cell-x">{getText(textId)}</td>
+                      <td>{version}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+            <ButtonRow>
+              <UnstyledButton
+                className="button relative bg-invite text-inversed active"
+                onPress={doCopy}
+              >
+                <aria.Text className="text">
+                  {isCopied ? getText('copied') : getText('copy')}
+                </aria.Text>
+              </UnstyledButton>
+            </ButtonRow>
           </div>
-          <table>
-            <tbody ref={textContainerRef}>
-              {versionsEntries.map(entry => {
-                const [textId, version] = entry
-                return (
-                  <tr key={textId}>
-                    <td className="whitespace-nowrap pr-cell-x">{getText(textId)}</td>
-                    <td>{version}</td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
-          <ButtonRow>
-            <UnstyledButton
-              className="button relative bg-invite text-inversed active"
-              onPress={doCopy}
-            >
-              <aria.Text className="text">
-                {isCopied ? getText('copied') : getText('copy')}
-              </aria.Text>
-            </UnstyledButton>
-          </ButtonRow>
         </div>
-      </div>
-    </ariaComponents.Dialog>
+      </ariaComponents.Dialog>
+    </aria.DialogTrigger>
   )
 }

From aa173e01f16a7d1a292cafc7e2877ddb368b1865 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 20:51:06 +1000
Subject: [PATCH 13/25] WIP: Menu entry for opening "about" modal

---
 app/ide-desktop/lib/client/src/index.ts       | 27 ++++++++++++++++++-
 app/ide-desktop/lib/client/src/ipc.ts         |  1 +
 app/ide-desktop/lib/client/src/preload.ts     | 24 +++++++++++++++++
 app/ide-desktop/lib/dashboard/src/App.tsx     | 25 ++++++++++++++---
 .../lib/dashboard/src/modals/AboutModal.tsx   |  9 ++++---
 .../src/pages/dashboard/Dashboard.tsx         |  7 -----
 app/ide-desktop/lib/types/globals.d.ts        | 11 ++++++++
 7 files changed, 89 insertions(+), 15 deletions(-)

diff --git a/app/ide-desktop/lib/client/src/index.ts b/app/ide-desktop/lib/client/src/index.ts
index d55146c4b99b..ce296a34c501 100644
--- a/app/ide-desktop/lib/client/src/index.ts
+++ b/app/ide-desktop/lib/client/src/index.ts
@@ -312,7 +312,32 @@ class App {
                         : {}),
                 }
                 const window = new electron.BrowserWindow(windowPreferences)
-                window.setMenuBarVisibility(false)
+                // FIXME: set back to false
+                window.setMenuBarVisibility(true)
+                const oldMenu = electron.Menu.getApplicationMenu()
+                if (oldMenu != null) {
+                    const items = oldMenu.items.map(item => {
+                        if (item.role !== 'help') {
+                            return item
+                        } else {
+                            const { click, ...passthrough } = item
+                            return new electron.MenuItem({
+                                ...passthrough,
+                                submenu: electron.Menu.buildFromTemplate([
+                                    new electron.MenuItem({
+                                        label: `About ${common.PRODUCT_NAME}`,
+                                        click: () => {
+                                            // FIXME:
+                                            electron.ipcMain.emit(ipc.Channel.showAboutModal)
+                                        },
+                                    }),
+                                ]),
+                            })
+                        }
+                    })
+                    const newMenu = electron.Menu.buildFromTemplate(items)
+                    electron.Menu.setApplicationMenu(newMenu)
+                }
 
                 if (this.args.groups.debug.options.devTools.value) {
                     window.webContents.openDevTools()
diff --git a/app/ide-desktop/lib/client/src/ipc.ts b/app/ide-desktop/lib/client/src/ipc.ts
index 1fcd1584434a..d799783a9b69 100644
--- a/app/ide-desktop/lib/client/src/ipc.ts
+++ b/app/ide-desktop/lib/client/src/ipc.ts
@@ -27,4 +27,5 @@ export enum Channel {
     goForward = 'go-forward',
     /** Channel for selecting files and directories using the system file browser. */
     openFileBrowser = 'open-file-browser',
+    showAboutModal = 'show-about-modal',
 }
diff --git a/app/ide-desktop/lib/client/src/preload.ts b/app/ide-desktop/lib/client/src/preload.ts
index 2eb82aaf4204..675a4af965fa 100644
--- a/app/ide-desktop/lib/client/src/preload.ts
+++ b/app/ide-desktop/lib/client/src/preload.ts
@@ -24,6 +24,8 @@ const FILE_BROWSER_API_KEY = 'fileBrowserApi'
 
 const NAVIGATION_API_KEY = 'navigationApi'
 
+const MENU_API_KEY = 'menuApi'
+
 const VERSION_INFO_KEY = 'versionInfo'
 
 // =============================
@@ -176,4 +178,26 @@ const FILE_BROWSER_API = {
 }
 electron.contextBridge.exposeInMainWorld(FILE_BROWSER_API_KEY, FILE_BROWSER_API)
 
+// ====================
+// === Version info ===
+// ====================
+
 electron.contextBridge.exposeInMainWorld(VERSION_INFO_KEY, debug.VERSION_INFO)
+
+// ================
+// === Menu API ===
+// ================
+
+let showAboutModalHandler: (() => void) | null = null
+
+electron.ipcRenderer.on(ipc.Channel.showAboutModal, () => {
+    showAboutModalHandler?.()
+})
+
+const MENU_API = {
+    setShowAboutModalHandler: (callback: () => void) => {
+        showAboutModalHandler = callback
+    },
+}
+
+electron.contextBridge.exposeInMainWorld(MENU_API_KEY, MENU_API)
diff --git a/app/ide-desktop/lib/dashboard/src/App.tsx b/app/ide-desktop/lib/dashboard/src/App.tsx
index 6b89650cab6f..03670d3bb207 100644
--- a/app/ide-desktop/lib/dashboard/src/App.tsx
+++ b/app/ide-desktop/lib/dashboard/src/App.tsx
@@ -52,7 +52,7 @@ import InputBindingsProvider from '#/providers/InputBindingsProvider'
 import LocalStorageProvider, * as localStorageProvider from '#/providers/LocalStorageProvider'
 import LoggerProvider from '#/providers/LoggerProvider'
 import type * as loggerProvider from '#/providers/LoggerProvider'
-import ModalProvider from '#/providers/ModalProvider'
+import ModalProvider, * as modalProvider from '#/providers/ModalProvider'
 import * as navigator2DProvider from '#/providers/Navigator2DProvider'
 import SessionProvider from '#/providers/SessionProvider'
 
@@ -69,8 +69,12 @@ import SetUsername from '#/pages/authentication/SetUsername'
 import Dashboard from '#/pages/dashboard/Dashboard'
 import Subscribe from '#/pages/subscribe/Subscribe'
 
+import TheModal from '#/components/dashboard/TheModal'
+import Portal from '#/components/Portal'
 import * as rootComponent from '#/components/Root'
 
+import AboutModal from '#/modals/AboutModal'
+
 import type Backend from '#/services/Backend'
 import LocalBackend from '#/services/LocalBackend'
 import * as projectManager from '#/services/ProjectManager'
@@ -191,7 +195,9 @@ export default function App(props: AppProps) {
       />
       <Router basename={getMainPageUrl().pathname}>
         <LocalStorageProvider>
-          <AppRouter {...props} projectManagerRootDirectory={rootDirectoryPath} />
+          <ModalProvider>
+            <AppRouter {...props} projectManagerRootDirectory={rootDirectoryPath} />
+          </ModalProvider>
         </LocalStorageProvider>
       </Router>
     </reactQuery.QueryClientProvider>
@@ -220,6 +226,7 @@ function AppRouter(props: AppRouterProps) {
   // eslint-disable-next-line no-restricted-properties
   const navigate = router.useNavigate()
   const { localStorage } = localStorageProvider.useLocalStorage()
+  const { setModal } = modalProvider.useSetModal()
   const navigator2D = navigator2DProvider.useNavigator2D()
   if (detect.IS_DEV_MODE) {
     // @ts-expect-error This is used exclusively for debugging.
@@ -314,6 +321,14 @@ function AppRouter(props: AppRouterProps) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         null!
 
+  React.useEffect(() => {
+    if ('menuApi' in window) {
+      window.menuApi.setShowAboutModalHandler(() => {
+        setModal(<AboutModal supportsLocalBackend={supportsLocalBackend} />)
+      })
+    }
+  }, [])
+
   React.useEffect(() => {
     const onKeyDown = navigator2D.onKeyDown.bind(navigator2D)
     document.addEventListener('keydown', onKeyDown)
@@ -408,7 +423,6 @@ function AppRouter(props: AppRouterProps) {
   )
   let result = routes
   result = <InputBindingsProvider inputBindings={inputBindings}>{result}</InputBindingsProvider>
-  result = <ModalProvider>{result}</ModalProvider>
   result = (
     <AuthProvider
       shouldStartInOfflineMode={isAuthenticationDisabled}
@@ -442,6 +456,11 @@ function AppRouter(props: AppRouterProps) {
   result = (
     <rootComponent.Root rootRef={root} navigate={navigate}>
       {result}
+      <Portal>
+        <div className="select-none text-xs text-primary">
+          <TheModal />
+        </div>
+      </Portal>
     </rootComponent.Root>
   )
   return result
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index 31f0a773c409..497b050fc43b 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -37,8 +37,8 @@ export default function AboutModal(props: AboutModalProps) {
   const [isCopied, setIsCopied] = React.useState(false)
   const textContainerRef = React.useRef<HTMLTableSectionElement | null>(null)
 
-  const versionsEntries = (
-    window.versionInfo != null
+  const versionsEntries = [
+    ...(window.versionInfo != null
       ? ([
           ['version', window.versionInfo.version],
           ['build', window.versionInfo.build],
@@ -52,8 +52,9 @@ export default function AboutModal(props: AboutModalProps) {
           ...(process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH == null
             ? []
             : ([['build', process.env.ENSO_CLOUD_DASHBOARD_COMMIT_HASH]] as const)),
-        ]
-  ) satisfies readonly (readonly [text.TextId, string])[]
+        ]),
+    ['userAgent', navigator.userAgent],
+  ] satisfies readonly (readonly [text.TextId, string])[]
 
   const doCopy = () => {
     const textContainer = textContainerRef.current
diff --git a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
index 33487ded1204..d905782d186f 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
@@ -33,8 +33,6 @@ import * as pageSwitcher from '#/layouts/PageSwitcher'
 import Settings from '#/layouts/Settings'
 import TopBar from '#/layouts/TopBar'
 
-import TheModal from '#/components/dashboard/TheModal'
-import Portal from '#/components/Portal'
 import type * as spinner from '#/components/Spinner'
 
 import * as backendModule from '#/services/Backend'
@@ -587,11 +585,6 @@ export default function Dashboard(props: DashboardProps) {
           )}
         </div>
       </div>
-      <Portal>
-        <div className="select-none text-xs text-primary">
-          <TheModal />
-        </div>
-      </Portal>
     </>
   )
 }
diff --git a/app/ide-desktop/lib/types/globals.d.ts b/app/ide-desktop/lib/types/globals.d.ts
index 06bd96be3a8e..81e2bc2101fa 100644
--- a/app/ide-desktop/lib/types/globals.d.ts
+++ b/app/ide-desktop/lib/types/globals.d.ts
@@ -73,6 +73,16 @@ interface NavigationApi {
     readonly goForward: () => void
 }
 
+// ================
+// === Menu API ===
+// ================
+
+/** `window.menuApi` exposes functionality related to the system menu. */
+interface MenuApi {
+    /** Set the callback to be called when the "about" entry is clicked in the "help" menu. */
+    readonly setShowAboutModalHandler: (callback: () => void) => void
+}
+
 // ====================
 // === Version Info ===
 // ====================
@@ -98,6 +108,7 @@ declare global {
         readonly backendApi?: BackendApi
         readonly authenticationApi: AuthenticationApi
         readonly navigationApi: NavigationApi
+        readonly menuApi: MenuApi
         readonly versionInfo?: VersionInfo
     }
 

From 31c38dbef5569495f825bd990b419ef28b4d7d76 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 21:29:43 +1000
Subject: [PATCH 14/25] Fix "about" button in system menu

---
 app/ide-desktop/lib/client/src/index.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/ide-desktop/lib/client/src/index.ts b/app/ide-desktop/lib/client/src/index.ts
index ce296a34c501..2c7398820010 100644
--- a/app/ide-desktop/lib/client/src/index.ts
+++ b/app/ide-desktop/lib/client/src/index.ts
@@ -312,8 +312,7 @@ class App {
                         : {}),
                 }
                 const window = new electron.BrowserWindow(windowPreferences)
-                // FIXME: set back to false
-                window.setMenuBarVisibility(true)
+                window.setMenuBarVisibility(false)
                 const oldMenu = electron.Menu.getApplicationMenu()
                 if (oldMenu != null) {
                     const items = oldMenu.items.map(item => {
@@ -327,8 +326,7 @@ class App {
                                     new electron.MenuItem({
                                         label: `About ${common.PRODUCT_NAME}`,
                                         click: () => {
-                                            // FIXME:
-                                            electron.ipcMain.emit(ipc.Channel.showAboutModal)
+                                            window.webContents.send(ipc.Channel.showAboutModal)
                                         },
                                     }),
                                 ]),

From c017e164a6af15b19cf386ffb8ec409d777e9e7c Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 22:38:14 +1000
Subject: [PATCH 15/25] WIP: Refactor `TheModal` out of dashboard

---
 app/ide-desktop/lib/dashboard/src/App.tsx     | 17 ++--
 .../lib/dashboard/src/components/Page.tsx     | 55 +++++++++++++
 .../lib/dashboard/src/layouts/InfoBar.tsx     | 70 ++++++++++++++++
 .../lib/dashboard/src/layouts/InfoMenu.tsx    | 81 +++++++++++++++++++
 .../lib/dashboard/src/layouts/UserBar.tsx     | 16 +---
 .../lib/dashboard/src/layouts/UserMenu.tsx    | 11 ++-
 .../lib/dashboard/src/modals/AboutModal.tsx   | 10 +--
 .../src/pages/dashboard/Dashboard.tsx         |  5 +-
 .../SupportsLocalBackendProvider.tsx          | 33 ++++++++
 .../lib/dashboard/src/text/english.json       |  1 +
 10 files changed, 264 insertions(+), 35 deletions(-)
 create mode 100644 app/ide-desktop/lib/dashboard/src/components/Page.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
 create mode 100644 app/ide-desktop/lib/dashboard/src/providers/SupportsLocalBackendProvider.tsx

diff --git a/app/ide-desktop/lib/dashboard/src/App.tsx b/app/ide-desktop/lib/dashboard/src/App.tsx
index 03670d3bb207..d5bd33c572eb 100644
--- a/app/ide-desktop/lib/dashboard/src/App.tsx
+++ b/app/ide-desktop/lib/dashboard/src/App.tsx
@@ -55,6 +55,7 @@ import type * as loggerProvider from '#/providers/LoggerProvider'
 import ModalProvider, * as modalProvider from '#/providers/ModalProvider'
 import * as navigator2DProvider from '#/providers/Navigator2DProvider'
 import SessionProvider from '#/providers/SessionProvider'
+import SupportsLocalBackendProvider from '#/providers/SupportsLocalBackendProvider'
 
 import ConfirmRegistration from '#/pages/authentication/ConfirmRegistration'
 import EnterOfflineMode from '#/pages/authentication/EnterOfflineMode'
@@ -69,8 +70,6 @@ import SetUsername from '#/pages/authentication/SetUsername'
 import Dashboard from '#/pages/dashboard/Dashboard'
 import Subscribe from '#/pages/subscribe/Subscribe'
 
-import TheModal from '#/components/dashboard/TheModal'
-import Portal from '#/components/Portal'
 import * as rootComponent from '#/components/Root'
 
 import AboutModal from '#/modals/AboutModal'
@@ -324,10 +323,10 @@ function AppRouter(props: AppRouterProps) {
   React.useEffect(() => {
     if ('menuApi' in window) {
       window.menuApi.setShowAboutModalHandler(() => {
-        setModal(<AboutModal supportsLocalBackend={supportsLocalBackend} />)
+        setModal(<AboutModal />)
       })
     }
-  }, [])
+  }, [/* should never change */ setModal])
 
   React.useEffect(() => {
     const onKeyDown = navigator2D.onKeyDown.bind(navigator2D)
@@ -422,6 +421,11 @@ function AppRouter(props: AppRouterProps) {
     </router.Routes>
   )
   let result = routes
+  result = (
+    <SupportsLocalBackendProvider supportsLocalBackend={supportsLocalBackend}>
+      {result}
+    </SupportsLocalBackendProvider>
+  )
   result = <InputBindingsProvider inputBindings={inputBindings}>{result}</InputBindingsProvider>
   result = (
     <AuthProvider
@@ -456,11 +460,6 @@ function AppRouter(props: AppRouterProps) {
   result = (
     <rootComponent.Root rootRef={root} navigate={navigate}>
       {result}
-      <Portal>
-        <div className="select-none text-xs text-primary">
-          <TheModal />
-        </div>
-      </Portal>
     </rootComponent.Root>
   )
   return result
diff --git a/app/ide-desktop/lib/dashboard/src/components/Page.tsx b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
new file mode 100644
index 000000000000..c62b3d9036da
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
@@ -0,0 +1,55 @@
+/** @file A page. */
+import * as React from 'react'
+
+import * as authProvider from '#/providers/AuthProvider'
+
+import Chat from '#/layouts/Chat'
+import ChatPlaceholder from '#/layouts/ChatPlaceholder'
+import InfoBar from '#/layouts/InfoBar'
+
+import TheModal from '#/components/dashboard/TheModal'
+import Portal from '#/components/Portal'
+
+// ============
+// === Page ===
+// ============
+
+/** Props for a {@link Page}. */
+export interface PageProps extends Readonly<React.PropsWithChildren> {
+  readonly hideInfoBar?: true
+}
+
+/** A page. */
+export default function Page(props: PageProps) {
+  const { hideInfoBar = false, children } = props
+  const [isHelpChatOpen, setIsHelpChatOpen] = React.useState(false)
+  const session = authProvider.useNonPartialUserSession()
+
+  const doCloseChat = () => {
+    setIsHelpChatOpen(false)
+  }
+
+  return (
+    <>
+      {children}
+      {!hideInfoBar && (
+        <InfoBar isHelpChatOpen={isHelpChatOpen} setIsHelpChatOpen={setIsHelpChatOpen} />
+      )}
+      {/* `session.accessToken` MUST be present in order for the `Chat` component to work. */}
+      {!hideInfoBar && session.accessToken != null && process.env.ENSO_CLOUD_CHAT_URL != null ? (
+        <Chat
+          isOpen={isHelpChatOpen}
+          doClose={doCloseChat}
+          endpoint={process.env.ENSO_CLOUD_CHAT_URL}
+        />
+      ) : (
+        <ChatPlaceholder isOpen={isHelpChatOpen} doClose={doCloseChat} />
+      )}
+      <Portal>
+        <div className="select-none text-xs text-primary">
+          <TheModal />
+        </div>
+      </Portal>
+    </>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
new file mode 100644
index 000000000000..a4d2a672fb78
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
@@ -0,0 +1,70 @@
+/** @file A toolbar containing chat and the user menu. */
+import * as React from 'react'
+
+import ChatIcon from 'enso-assets/chat.svg'
+import DefaultUserIcon from 'enso-assets/default_user.svg'
+
+import * as authProvider from '#/providers/AuthProvider'
+import * as modalProvider from '#/providers/ModalProvider'
+import * as textProvider from '#/providers/TextProvider'
+
+import InfoMenu from '#/layouts/InfoMenu'
+
+import Button from '#/components/styled/Button'
+import FocusArea from '#/components/styled/FocusArea'
+import UnstyledButton from '#/components/UnstyledButton'
+
+// ===============
+// === InfoBar ===
+// ===============
+
+/** Props for a {@link InfoBar}. */
+export interface InfoBarProps {
+  readonly isHelpChatOpen: boolean
+  readonly setIsHelpChatOpen: (isHelpChatOpen: boolean) => void
+}
+
+/** A toolbar containing chat and the user menu. */
+export default function InfoBar(props: InfoBarProps) {
+  const { isHelpChatOpen, setIsHelpChatOpen } = props
+  const { user } = authProvider.useNonPartialUserSession()
+  const { updateModal } = modalProvider.useSetModal()
+  const { getText } = textProvider.useText()
+
+  return (
+    <FocusArea direction="horizontal">
+      {innerProps => (
+        <div
+          className="pointer-events-auto flex h-row shrink-0 cursor-default items-center gap-user-bar rounded-full bg-frame px-icons-x pr-profile-picture backdrop-blur-default"
+          {...innerProps}
+        >
+          <Button
+            active={isHelpChatOpen}
+            image={ChatIcon}
+            onPress={() => {
+              setIsHelpChatOpen(!isHelpChatOpen)
+            }}
+          />
+          <UnstyledButton
+            className="flex size-profile-picture select-none items-center overflow-clip rounded-full"
+            onPress={() => {
+              updateModal(oldModal => (oldModal?.type === InfoMenu ? null : <InfoMenu />))
+            }}
+          >
+            <img
+              src={user?.profilePicture ?? DefaultUserIcon}
+              alt={getText('openUserMenu')}
+              className="pointer-events-none"
+              height={28}
+              width={28}
+            />
+          </UnstyledButton>
+          {/* Required for shortcuts to work. */}
+          <div className="hidden">
+            <InfoMenu hidden />
+          </div>
+        </div>
+      )}
+    </FocusArea>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
new file mode 100644
index 000000000000..200eaa6b15a3
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
@@ -0,0 +1,81 @@
+/** @file A menu containing info about the app. */
+import * as React from 'react'
+
+import LogoIcon from 'enso-assets/enso_logo.svg'
+import * as common from 'enso-common'
+
+import * as modalProvider from '#/providers/ModalProvider'
+import * as textProvider from '#/providers/TextProvider'
+
+import * as aria from '#/components/aria'
+import MenuEntry from '#/components/MenuEntry'
+import Modal from '#/components/Modal'
+import FocusArea from '#/components/styled/FocusArea'
+
+import AboutModal from '#/modals/AboutModal'
+
+// ================
+// === InfoMenu ===
+// ================
+
+/** Props for an {@link InfoMenu}. */
+export interface InfoMenuProps {
+  readonly hidden?: boolean
+}
+
+/** A menu containing info about the app. */
+export default function InfoMenu(props: InfoMenuProps) {
+  const { hidden = false } = props
+  const { setModal } = modalProvider.useSetModal()
+  const { getText } = textProvider.useText()
+  const [initialized, setInitialized] = React.useState(false)
+
+  React.useEffect(() => {
+    requestAnimationFrame(() => {
+      setInitialized(true)
+    })
+  }, [])
+
+  return (
+    <Modal hidden={hidden} className="absolute size-full overflow-hidden bg-dim">
+      <div
+        // The name comes from a third-party API and cannot be changed.
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        {...(!hidden ? { 'data-testid': 'info-menu' } : {})}
+        className={`absolute right-top-bar-margin top-top-bar-margin flex flex-col gap-user-menu rounded-default bg-selected-frame backdrop-blur-default transition-all duration-user-menu ${initialized ? 'w-user-menu p-user-menu' : 'size-row-h p-profile-picture'}`}
+        onClick={event => {
+          event.stopPropagation()
+        }}
+      >
+        <div
+          className={`flex items-center gap-icons overflow-hidden transition-all duration-user-menu ${initialized ? 'px-menu-entry' : ''}`}
+        >
+          <div className="flex size-profile-picture shrink-0 items-center overflow-clip rounded-full">
+            <img src={LogoIcon} className="pointer-events-none size-profile-picture" />
+          </div>
+          <aria.Text className="text">{common.PRODUCT_NAME}</aria.Text>
+        </div>
+        <div
+          className={`grid transition-all duration-user-menu ${initialized ? 'grid-rows-1fr' : 'grid-rows-0fr'}`}
+        >
+          <FocusArea direction="vertical">
+            {innerProps => (
+              <div
+                aria-label={getText('infoMenuLabel')}
+                className="flex flex-col overflow-hidden"
+                {...innerProps}
+              >
+                <MenuEntry
+                  action="aboutThisApp"
+                  doAction={() => {
+                    setModal(<AboutModal />)
+                  }}
+                />
+              </div>
+            )}
+          </FocusArea>
+        </div>
+      </div>
+    </Modal>
+  )
+}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx
index ba6f71c4a92a..7408a8c6d865 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserBar.tsx
@@ -31,7 +31,6 @@ export interface UserBarProps {
   /** When `true`, the element occupies space in the layout but is not visible.
    * Defaults to `false`. */
   readonly invisible?: boolean
-  readonly supportsLocalBackend: boolean
   readonly page: pageSwitcher.Page
   readonly setPage: (page: pageSwitcher.Page) => void
   readonly isHelpChatOpen: boolean
@@ -45,7 +44,7 @@ export interface UserBarProps {
 /** A toolbar containing chat and the user menu. */
 export default function UserBar(props: UserBarProps) {
   const { invisible = false, page, setPage, isHelpChatOpen, setIsHelpChatOpen } = props
-  const { supportsLocalBackend, projectAsset, setProjectAsset, doRemoveSelf, onSignOut } = props
+  const { projectAsset, setProjectAsset, doRemoveSelf, onSignOut } = props
   const { type: sessionType, user } = authProvider.useNonPartialUserSession()
   const { setModal, updateModal } = modalProvider.useSetModal()
   const { backend } = backendProvider.useBackend()
@@ -111,11 +110,7 @@ export default function UserBar(props: UserBarProps) {
             onPress={() => {
               updateModal(oldModal =>
                 oldModal?.type === UserMenu ? null : (
-                  <UserMenu
-                    setPage={setPage}
-                    supportsLocalBackend={supportsLocalBackend}
-                    onSignOut={onSignOut}
-                  />
+                  <UserMenu setPage={setPage} onSignOut={onSignOut} />
                 )
               )
             }}
@@ -130,12 +125,7 @@ export default function UserBar(props: UserBarProps) {
           </UnstyledButton>
           {/* Required for shortcuts to work. */}
           <div className="hidden">
-            <UserMenu
-              hidden
-              setPage={setPage}
-              supportsLocalBackend={supportsLocalBackend}
-              onSignOut={onSignOut}
-            />
+            <UserMenu hidden setPage={setPage} onSignOut={onSignOut} />
           </div>
         </div>
       )}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
index d0f816271695..ca9cdde92902 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
@@ -10,6 +10,7 @@ import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 
 import * as authProvider from '#/providers/AuthProvider'
 import * as modalProvider from '#/providers/ModalProvider'
+import * as supportsLocalBackendProvider from '#/providers/SupportsLocalBackendProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as pageSwitcher from '#/layouts/PageSwitcher'
@@ -33,14 +34,14 @@ export interface UserMenuProps {
   /** If `true`, disables `data-testid` because it will not be visible. */
   readonly hidden?: boolean
   readonly setPage: (page: pageSwitcher.Page) => void
-  readonly supportsLocalBackend: boolean
   readonly onSignOut: () => void
 }
 
 /** Handling the UserMenuItem click event logic and displaying its content. */
 export default function UserMenu(props: UserMenuProps) {
-  const { hidden = false, setPage, supportsLocalBackend, onSignOut } = props
+  const { hidden = false, setPage, onSignOut } = props
   const [initialized, setInitialized] = React.useState(false)
+  const supportsLocalBackend = supportsLocalBackendProvider.useSupportsLocalBackend()
   const navigate = navigateHooks.useNavigate()
   const { signOut } = authProvider.useAuth()
   const { user } = authProvider.useNonPartialUserSession()
@@ -49,14 +50,16 @@ export default function UserMenu(props: UserMenuProps) {
   const toastAndLog = toastAndLogHooks.useToastAndLog()
 
   React.useEffect(() => {
-    requestAnimationFrame(setInitialized.bind(null, true))
+    requestAnimationFrame(() => {
+      setInitialized(true)
+    })
   }, [])
 
   const aboutThisAppMenuEntry = (
     <MenuEntry
       action="aboutThisApp"
       doAction={() => {
-        setModal(<AboutModal supportsLocalBackend={supportsLocalBackend} />)
+        setModal(<AboutModal />)
       }}
     />
   )
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index 497b050fc43b..0376666a4b7b 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -5,6 +5,7 @@ import LogoIcon from 'enso-assets/enso_logo.svg'
 
 import type * as text from '#/text'
 
+import * as supportsLocalBackendProvider from '#/providers/SupportsLocalBackendProvider'
 import * as textProvider from '#/providers/TextProvider'
 
 import * as aria from '#/components/aria'
@@ -25,14 +26,9 @@ const CLEAR_COPIED_STATE_TIMEOUT_MS = 2_500
 // === AboutModal ===
 // ==================
 
-/** Props for a {@link AboutModal}. */
-export interface AboutModalProps {
-  readonly supportsLocalBackend: boolean
-}
-
 /** A modal for confirming the deletion of an asset. */
-export default function AboutModal(props: AboutModalProps) {
-  const { supportsLocalBackend } = props
+export default function AboutModal() {
+  const supportsLocalBackend = supportsLocalBackendProvider.useSupportsLocalBackend()
   const { getText } = textProvider.useText()
   const [isCopied, setIsCopied] = React.useState(false)
   const textContainerRef = React.useRef<HTMLTableSectionElement | null>(null)
diff --git a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
index d905782d186f..e45cd996252d 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
@@ -33,6 +33,7 @@ import * as pageSwitcher from '#/layouts/PageSwitcher'
 import Settings from '#/layouts/Settings'
 import TopBar from '#/layouts/TopBar'
 
+import Page from '#/components/Page'
 import type * as spinner from '#/components/Spinner'
 
 import * as backendModule from '#/services/Backend'
@@ -480,7 +481,7 @@ export default function Dashboard(props: DashboardProps) {
   }, [page, setPage])
 
   return (
-    <>
+    <Page hideInfoBar>
       <div
         className={`flex text-xs text-primary ${
           page === pageSwitcher.Page.editor ? 'pointer-events-none cursor-none' : ''
@@ -585,6 +586,6 @@ export default function Dashboard(props: DashboardProps) {
           )}
         </div>
       </div>
-    </>
+    </Page>
   )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/providers/SupportsLocalBackendProvider.tsx b/app/ide-desktop/lib/dashboard/src/providers/SupportsLocalBackendProvider.tsx
new file mode 100644
index 000000000000..4e31e90d23cf
--- /dev/null
+++ b/app/ide-desktop/lib/dashboard/src/providers/SupportsLocalBackendProvider.tsx
@@ -0,0 +1,33 @@
+/** @file The React provider (and associated hooks) storing whether the local backend is supported. */
+import * as React from 'react'
+
+// ===================================
+// === SupportsLocalBackendContext ===
+// ===================================
+
+const SupportsLocalBackendContext = React.createContext(false)
+
+/** Props for a {@link SupportsLocalBackendProvider}. */
+export interface SupportsLocalBackendProviderProps extends Readonly<React.PropsWithChildren> {
+  readonly supportsLocalBackend: boolean
+}
+
+// ====================================
+// === SupportsLocalBackendProvider ===
+// ====================================
+
+/** A React provider (and associated hooks) for determining whether the current focus contex
+ * is vertical or horizontal. */
+export default function SupportsLocalBackendProvider(props: SupportsLocalBackendProviderProps) {
+  const { supportsLocalBackend, children } = props
+  return (
+    <SupportsLocalBackendContext.Provider value={supportsLocalBackend}>
+      {children}
+    </SupportsLocalBackendContext.Provider>
+  )
+}
+
+/** Whether the Local Backend is supported. */
+export function useSupportsLocalBackend() {
+  return React.useContext(SupportsLocalBackendContext)
+}
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index 1a254c07ba05..34cfbbd2c62f 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -515,6 +515,7 @@
 
   "assetSearchFieldLabel": "Search through items",
   "userMenuLabel": "User menu",
+  "infoMenuLabel": "Info menu",
   "categorySwitcherMenuLabel": "Category switcher",
   "labelsListLabel": "Labels",
   "globalContextMenuLabel": "Global context menu",

From 7edd21755c4e44874f252c9f695c9f4a49d458bd Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 22:45:00 +1000
Subject: [PATCH 16/25] Add top right menu to authentication pages

---
 .../lib/dashboard/src/components/Page.tsx     |  8 ++--
 .../lib/dashboard/src/layouts/InfoBar.tsx     | 13 ++---
 .../lib/dashboard/src/layouts/TopBar.tsx      |  2 -
 .../authentication/AuthenticationPage.tsx     | 47 ++++++++++---------
 .../dashboard/src/providers/AuthProvider.tsx  | 10 ++++
 5 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/components/Page.tsx b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
index c62b3d9036da..d4fb4768d951 100644
--- a/app/ide-desktop/lib/dashboard/src/components/Page.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
@@ -23,7 +23,7 @@ export interface PageProps extends Readonly<React.PropsWithChildren> {
 export default function Page(props: PageProps) {
   const { hideInfoBar = false, children } = props
   const [isHelpChatOpen, setIsHelpChatOpen] = React.useState(false)
-  const session = authProvider.useNonPartialUserSession()
+  const session = authProvider.useUserSession()
 
   const doCloseChat = () => {
     setIsHelpChatOpen(false)
@@ -33,10 +33,12 @@ export default function Page(props: PageProps) {
     <>
       {children}
       {!hideInfoBar && (
-        <InfoBar isHelpChatOpen={isHelpChatOpen} setIsHelpChatOpen={setIsHelpChatOpen} />
+        <div className="fixed right top z-1 m-top-bar text-xs text-primary transition-all duration-side-panel">
+          <InfoBar isHelpChatOpen={isHelpChatOpen} setIsHelpChatOpen={setIsHelpChatOpen} />
+        </div>
       )}
       {/* `session.accessToken` MUST be present in order for the `Chat` component to work. */}
-      {!hideInfoBar && session.accessToken != null && process.env.ENSO_CLOUD_CHAT_URL != null ? (
+      {!hideInfoBar && session?.accessToken != null && process.env.ENSO_CLOUD_CHAT_URL != null ? (
         <Chat
           isOpen={isHelpChatOpen}
           doClose={doCloseChat}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
index a4d2a672fb78..a15114f44999 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
@@ -2,9 +2,8 @@
 import * as React from 'react'
 
 import ChatIcon from 'enso-assets/chat.svg'
-import DefaultUserIcon from 'enso-assets/default_user.svg'
+import LogoIcon from 'enso-assets/enso_logo.svg'
 
-import * as authProvider from '#/providers/AuthProvider'
 import * as modalProvider from '#/providers/ModalProvider'
 import * as textProvider from '#/providers/TextProvider'
 
@@ -12,6 +11,7 @@ import InfoMenu from '#/layouts/InfoMenu'
 
 import Button from '#/components/styled/Button'
 import FocusArea from '#/components/styled/FocusArea'
+import SvgMask from '#/components/SvgMask'
 import UnstyledButton from '#/components/UnstyledButton'
 
 // ===============
@@ -27,7 +27,6 @@ export interface InfoBarProps {
 /** A toolbar containing chat and the user menu. */
 export default function InfoBar(props: InfoBarProps) {
   const { isHelpChatOpen, setIsHelpChatOpen } = props
-  const { user } = authProvider.useNonPartialUserSession()
   const { updateModal } = modalProvider.useSetModal()
   const { getText } = textProvider.useText()
 
@@ -51,12 +50,10 @@ export default function InfoBar(props: InfoBarProps) {
               updateModal(oldModal => (oldModal?.type === InfoMenu ? null : <InfoMenu />))
             }}
           >
-            <img
-              src={user?.profilePicture ?? DefaultUserIcon}
+            <SvgMask
+              src={LogoIcon}
               alt={getText('openUserMenu')}
-              className="pointer-events-none"
-              height={28}
-              width={28}
+              className="pointer-events-none size-7"
             />
           </UnstyledButton>
           {/* Required for shortcuts to work. */}
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
index 3d545ff1c552..0b9412c4dc63 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/TopBar.tsx
@@ -86,7 +86,6 @@ export default function TopBar(props: TopBarProps) {
           {supportsCloudBackend && (
             <UserBar
               invisible
-              supportsLocalBackend={supportsLocalBackend}
               page={page}
               setPage={setPage}
               isHelpChatOpen={isHelpChatOpen}
@@ -110,7 +109,6 @@ export default function TopBar(props: TopBarProps) {
             />
           )}
           <UserBar
-            supportsLocalBackend={supportsLocalBackend}
             page={page}
             setPage={setPage}
             isHelpChatOpen={isHelpChatOpen}
diff --git a/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx b/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
index d345cee6d6cf..5cb8badf416b 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
@@ -4,6 +4,7 @@
 import * as React from 'react'
 
 import * as aria from '#/components/aria'
+import Page from '#/components/Page'
 import FocusArea from '#/components/styled/FocusArea'
 
 // ==========================
@@ -33,27 +34,29 @@ export default function AuthenticationPage(props: AuthenticationPageProps) {
     'flex w-full max-w-md flex-col gap-auth rounded-auth bg-selected-frame p-auth shadow-md'
 
   return (
-    <FocusArea direction="vertical">
-      {innerProps => (
-        <div
-          data-testid={props['data-testid']}
-          className="flex min-h-screen flex-col items-center justify-center gap-auth text-sm text-primary"
-          {...innerProps}
-        >
-          {isNotForm ? (
-            <div className={containerClasses}>
-              {heading}
-              {children}
-            </div>
-          ) : (
-            <form className={containerClasses} onSubmit={onSubmit}>
-              {heading}
-              {children}
-            </form>
-          )}
-          {footer}
-        </div>
-      )}
-    </FocusArea>
+    <Page>
+      <FocusArea direction="vertical">
+        {innerProps => (
+          <div
+            data-testid={props['data-testid']}
+            className="flex min-h-screen flex-col items-center justify-center gap-auth text-sm text-primary"
+            {...innerProps}
+          >
+            {isNotForm ? (
+              <div className={containerClasses}>
+                {heading}
+                {children}
+              </div>
+            ) : (
+              <form className={containerClasses} onSubmit={onSubmit}>
+                {heading}
+                {children}
+              </form>
+            )}
+            {footer}
+          </div>
+        )}
+      </FocusArea>
+    </Page>
   )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx b/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
index 52da3a129d4b..213a12c353f4 100644
--- a/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
+++ b/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
@@ -869,3 +869,13 @@ export function usePartialUserSession() {
 export function useNonPartialUserSession() {
   return router.useOutletContext<Exclude<UserSession, PartialUserSession>>()
 }
+
+// ======================
+// === useUserSession ===
+// ======================
+
+/** A React context hook returning the user session for a user that may or may not be logged in. */
+export function useUserSession() {
+  // eslint-disable-next-line no-restricted-syntax
+  return router.useOutletContext<UserSession | undefined>()
+}

From 960cf560b8e19378cd9a76610ae594c59960d950 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 23:37:20 +1000
Subject: [PATCH 17/25] Fix modal not being closeable on auth pages

---
 app/ide-desktop/lib/client/src/index.ts            |  5 ++++-
 .../lib/dashboard/src/components/Page.tsx          | 14 ++++++++++++++
 .../lib/dashboard/src/components/Root.tsx          |  4 ++++
 .../lib/dashboard/src/modals/AboutModal.tsx        |  1 +
 .../dashboard/src/pages/dashboard/Dashboard.tsx    | 12 ------------
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/app/ide-desktop/lib/client/src/index.ts b/app/ide-desktop/lib/client/src/index.ts
index 2c7398820010..43f450c21b65 100644
--- a/app/ide-desktop/lib/client/src/index.ts
+++ b/app/ide-desktop/lib/client/src/index.ts
@@ -312,13 +312,16 @@ class App {
                         : {}),
                 }
                 const window = new electron.BrowserWindow(windowPreferences)
-                window.setMenuBarVisibility(false)
+                window.setMenuBarVisibility(true)
                 const oldMenu = electron.Menu.getApplicationMenu()
                 if (oldMenu != null) {
                     const items = oldMenu.items.map(item => {
                         if (item.role !== 'help') {
                             return item
                         } else {
+                            // `click` is a property that is intentionally removed from this
+                            // destructured object, in order to satisfy TypeScript.
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
                             const { click, ...passthrough } = item
                             return new electron.MenuItem({
                                 ...passthrough,
diff --git a/app/ide-desktop/lib/dashboard/src/components/Page.tsx b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
index d4fb4768d951..77a333ba60c4 100644
--- a/app/ide-desktop/lib/dashboard/src/components/Page.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
@@ -2,6 +2,7 @@
 import * as React from 'react'
 
 import * as authProvider from '#/providers/AuthProvider'
+import * as modalProvider from '#/providers/ModalProvider'
 
 import Chat from '#/layouts/Chat'
 import ChatPlaceholder from '#/layouts/ChatPlaceholder'
@@ -23,12 +24,25 @@ export interface PageProps extends Readonly<React.PropsWithChildren> {
 export default function Page(props: PageProps) {
   const { hideInfoBar = false, children } = props
   const [isHelpChatOpen, setIsHelpChatOpen] = React.useState(false)
+  const { unsetModal } = modalProvider.useSetModal()
   const session = authProvider.useUserSession()
 
   const doCloseChat = () => {
     setIsHelpChatOpen(false)
   }
 
+  React.useEffect(() => {
+    const onClick = () => {
+      if (getSelection()?.type !== 'Range') {
+        unsetModal()
+      }
+    }
+    document.addEventListener('click', onClick)
+    return () => {
+      document.removeEventListener('click', onClick)
+    }
+  }, [/* should never change */ unsetModal])
+
   return (
     <>
       {children}
diff --git a/app/ide-desktop/lib/dashboard/src/components/Root.tsx b/app/ide-desktop/lib/dashboard/src/components/Root.tsx
index 528eb0ad2627..c1991921fc37 100644
--- a/app/ide-desktop/lib/dashboard/src/components/Root.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/Root.tsx
@@ -4,6 +4,10 @@ import * as React from 'react'
 import * as aria from '#/components/aria'
 import * as portal from '#/components/Portal'
 
+// ============
+// === Root ===
+// ============
+
 /** Props for {@link Root}. */
 export interface RootProps extends React.PropsWithChildren {
   readonly rootRef: React.RefObject<HTMLElement>
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index 0376666a4b7b..c6fc0cedcd97 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -79,6 +79,7 @@ export default function AboutModal() {
 
   return (
     <aria.DialogTrigger defaultOpen>
+      <aria.Button className="h w" />
       <ariaComponents.Dialog className="w-[30rem]">
         <div className="relative flex items-center gap-4">
           <SvgMask src={LogoIcon} className="size-16 shrink-0" />
diff --git a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
index e45cd996252d..489d97c7c440 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/dashboard/Dashboard.tsx
@@ -318,18 +318,6 @@ export default function Dashboard(props: DashboardProps) {
     }
   }, [page, /* should never change */ localStorage])
 
-  React.useEffect(() => {
-    const onClick = () => {
-      if (getSelection()?.type !== 'Range') {
-        unsetModal()
-      }
-    }
-    document.addEventListener('click', onClick)
-    return () => {
-      document.removeEventListener('click', onClick)
-    }
-  }, [/* should never change */ unsetModal])
-
   React.useEffect(
     () =>
       inputBindings.attach(sanitizedEventTargets.document.body, 'keydown', {

From d3625e52b17360af358e34930fdfdf4adf309d31 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 2 May 2024 23:39:30 +1000
Subject: [PATCH 18/25] Fix lint errors

---
 app/ide-desktop/lib/common/src/appConfig.js  | 3 +++
 app/ide-desktop/lib/common/src/buildUtils.js | 1 +
 app/ide-desktop/lib/common/src/detect.ts     | 1 +
 3 files changed, 5 insertions(+)

diff --git a/app/ide-desktop/lib/common/src/appConfig.js b/app/ide-desktop/lib/common/src/appConfig.js
index 789ffba19936..0b194464470e 100644
--- a/app/ide-desktop/lib/common/src/appConfig.js
+++ b/app/ide-desktop/lib/common/src/appConfig.js
@@ -13,7 +13,9 @@ import BUILD_INFO from '../../../../../build.json' assert { type: 'json' }
  * environment variable. Reads from `.env` if the variable is `production`, blank or absent.
  * DOES NOT override existing environment variables if the variable is absent. */
 export async function readEnvironmentFromFile() {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const environment = process.env.ENSO_CLOUD_ENVIRONMENT ?? null
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const isProduction = environment == null || environment === '' || environment === 'production'
     const fileName = isProduction ? '.env' : `.${environment}.env`
     const filePath = path.join(url.fileURLToPath(new URL('../../..', import.meta.url)), fileName)
@@ -40,6 +42,7 @@ export async function readEnvironmentFromFile() {
         if (isProduction) {
             entries = entries.filter(kv => {
                 const [k] = kv
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                 return process.env[k] == null
             })
         }
diff --git a/app/ide-desktop/lib/common/src/buildUtils.js b/app/ide-desktop/lib/common/src/buildUtils.js
index 8f11a12e7e31..7657aabb1798 100644
--- a/app/ide-desktop/lib/common/src/buildUtils.js
+++ b/app/ide-desktop/lib/common/src/buildUtils.js
@@ -20,6 +20,7 @@ export const INDENT_SIZE = 4
  * @throws {Error} If the environment variable is not set. */
 export function requireEnv(name) {
     const value = process.env[name]
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (value == null) {
         throw new Error(`Could not find the environment variable '${name}'.`)
     } else {
diff --git a/app/ide-desktop/lib/common/src/detect.ts b/app/ide-desktop/lib/common/src/detect.ts
index a2f97df1459e..f626f0684ca7 100644
--- a/app/ide-desktop/lib/common/src/detect.ts
+++ b/app/ide-desktop/lib/common/src/detect.ts
@@ -5,6 +5,7 @@
 // ===================
 
 /** Return whether the current build is in development mode */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 export const IS_DEV_MODE = process.env.NODE_ENV === 'development'
 
 // ================

From aa49c7728185b68a1c577b66367e1f263efa2aac Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Fri, 3 May 2024 16:51:56 +1000
Subject: [PATCH 19/25] Fix E2E tests

---
 .../lib/dashboard/src/components/Page.tsx     |  2 +-
 .../dashboard/src/layouts/ChatPlaceholder.tsx | 42 +++++++++++--------
 .../lib/dashboard/src/layouts/InfoBar.tsx     |  2 +-
 .../lib/dashboard/src/text/english.json       |  1 +
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/components/Page.tsx b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
index 77a333ba60c4..e393475720a0 100644
--- a/app/ide-desktop/lib/dashboard/src/components/Page.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/Page.tsx
@@ -59,7 +59,7 @@ export default function Page(props: PageProps) {
           endpoint={process.env.ENSO_CLOUD_CHAT_URL}
         />
       ) : (
-        <ChatPlaceholder isOpen={isHelpChatOpen} doClose={doCloseChat} />
+        <ChatPlaceholder hideLoginButtons isOpen={isHelpChatOpen} doClose={doCloseChat} />
       )}
       <Portal>
         <div className="select-none text-xs text-primary">
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/ChatPlaceholder.tsx b/app/ide-desktop/lib/dashboard/src/layouts/ChatPlaceholder.tsx
index b9ef552ea7cf..d4598e192f97 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/ChatPlaceholder.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/ChatPlaceholder.tsx
@@ -18,14 +18,16 @@ import UnstyledButton from '#/components/UnstyledButton'
 
 /** Props for a {@link ChatPlaceholder}. */
 export interface ChatPlaceholderProps {
-  /** This should only be false when the panel is closing. */
+  /** This should only be `true` when in the auth flow. */
+  readonly hideLoginButtons?: true
+  /** This should only be `false` when the panel is closing. */
   readonly isOpen: boolean
   readonly doClose: () => void
 }
 
 /** A placeholder component replacing `Chat` when a user is not logged in. */
 export default function ChatPlaceholder(props: ChatPlaceholderProps) {
-  const { isOpen, doClose } = props
+  const { hideLoginButtons = false, isOpen, doClose } = props
   const { getText } = textProvider.useText()
   const logger = loggerProvider.useLogger()
   const navigate = navigateHooks.useNavigate()
@@ -51,22 +53,26 @@ export default function ChatPlaceholder(props: ChatPlaceholderProps) {
             <div className="px-missing-functionality-text-x">
               {getText('placeholderChatPrompt')}
             </div>
-            <UnstyledButton
-              className="button self-center bg-help text-white"
-              onPress={() => {
-                navigate(appUtils.LOGIN_PATH)
-              }}
-            >
-              {getText('login')}
-            </UnstyledButton>
-            <UnstyledButton
-              className="button self-center bg-help text-white"
-              onPress={() => {
-                navigate(appUtils.REGISTRATION_PATH)
-              }}
-            >
-              {getText('register')}
-            </UnstyledButton>
+            {!hideLoginButtons && (
+              <UnstyledButton
+                className="button self-center bg-help text-white"
+                onPress={() => {
+                  navigate(appUtils.LOGIN_PATH)
+                }}
+              >
+                {getText('login')}
+              </UnstyledButton>
+            )}
+            {!hideLoginButtons && (
+              <UnstyledButton
+                className="button self-center bg-help text-white"
+                onPress={() => {
+                  navigate(appUtils.REGISTRATION_PATH)
+                }}
+              >
+                {getText('register')}
+              </UnstyledButton>
+            )}
           </div>
         </div>
       </div>,
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
index a15114f44999..0d2365740bb0 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
@@ -52,7 +52,7 @@ export default function InfoBar(props: InfoBarProps) {
           >
             <SvgMask
               src={LogoIcon}
-              alt={getText('openUserMenu')}
+              alt={getText('openInfoMenu')}
               className="pointer-events-none size-7"
             />
           </UnstyledButton>
diff --git a/app/ide-desktop/lib/dashboard/src/text/english.json b/app/ide-desktop/lib/dashboard/src/text/english.json
index 34cfbbd2c62f..25111e0d5320 100644
--- a/app/ide-desktop/lib/dashboard/src/text/english.json
+++ b/app/ide-desktop/lib/dashboard/src/text/english.json
@@ -261,6 +261,7 @@
   "discoverWhatsNew": "Discover what’s new",
   "sampleAndCommunityProjects": "Sample and community projects",
   "openUserMenu": "Open user menu",
+  "openInfoMenu": "Open info menu",
   "newEmptyProject": "New empty project",
   "noProjectIsCurrentlyOpen": "No project is currently open.",
   "youAreNotLoggedIn": "You are not logged in.",

From 4dc92b4209b54c5849710f8a328d5282ac8ce88a Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Fri, 3 May 2024 17:52:05 +1000
Subject: [PATCH 20/25] Fix logging out

---
 app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx b/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
index 213a12c353f4..5c4a9cc0e50c 100644
--- a/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
+++ b/app/ide-desktop/lib/dashboard/src/providers/AuthProvider.tsx
@@ -20,6 +20,7 @@ import * as gtagHooks from '#/hooks/gtagHooks'
 import * as backendProvider from '#/providers/BackendProvider'
 import * as localStorageProvider from '#/providers/LocalStorageProvider'
 import * as loggerProvider from '#/providers/LoggerProvider'
+import * as modalProvider from '#/providers/ModalProvider'
 import * as sessionProvider from '#/providers/SessionProvider'
 import * as textProvider from '#/providers/TextProvider'
 
@@ -174,6 +175,7 @@ export default function AuthProvider(props: AuthProviderProps) {
   const { setBackendWithoutSavingType } = backendProvider.useSetBackend()
   const { localStorage } = localStorageProvider.useLocalStorage()
   const { getText } = textProvider.useText()
+  const { unsetModal } = modalProvider.useSetModal()
   // This must not be `hooks.useNavigate` as `goOffline` would be inaccessible,
   // and the function call would error.
   // eslint-disable-next-line no-restricted-properties
@@ -615,6 +617,8 @@ export default function AuthProvider(props: AuthProviderProps) {
       setInitialized(false)
       sentry.setUser(null)
       setUserSession(null)
+      // If the User Menu is still visible, it breaks when `userSession` is set to `null`.
+      unsetModal()
       // This should not omit success and error toasts as it is not possible
       // to render this optimistically.
       await toast.toast.promise(cognito.signOut(), {

From beecc9e5a51f5cea45bfbb2da622025162d13212 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Thu, 9 May 2024 23:39:25 +1000
Subject: [PATCH 21/25] Prettier

---
 .../lib/dashboard/src/layouts/Settings/UserGroupRow.tsx     | 6 +++---
 .../lib/dashboard/src/layouts/Settings/UserRow.tsx          | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupRow.tsx b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupRow.tsx
index 1d4cd11d7533..7d6857767519 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserGroupRow.tsx
@@ -59,21 +59,21 @@ export default function UserGroupRow(props: UserGroupRowProps) {
   return (
     <aria.Row
       id={userGroup.id}
-      className={`rounded-rows-child group h-row ${backend.isPlaceholderUserGroupId(userGroup.id) ? 'pointer-events-none placeholder' : ''}`}
+      className={`group h-row rounded-rows-child ${backend.isPlaceholderUserGroupId(userGroup.id) ? 'pointer-events-none placeholder' : ''}`}
       ref={contextMenuRef}
     >
       <aria.Cell className="text rounded-r-full border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:border-r-0">
         <ariaComponents.TooltipTrigger>
           <FocusableText
             ref={tooltipTargetRef}
-            className="cursor-unset block overflow-hidden text-ellipsis whitespace-nowrap"
+            className="block cursor-unset overflow-hidden text-ellipsis whitespace-nowrap"
           >
             {userGroup.groupName}
           </FocusableText>
           {needsTooltip && <ariaComponents.Tooltip>{userGroup.groupName}</ariaComponents.Tooltip>}
         </ariaComponents.TooltipTrigger>
       </aria.Cell>
-      <aria.Cell className="group-hover-2:opacity-100 relative bg-transparent p transparent">
+      <aria.Cell className="relative bg-transparent p transparent group-hover-2:opacity-100">
         <UnstyledButton
           onPress={() => {
             setModal(
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx
index 5b809a1aa9b5..d43b648ffb45 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/Settings/UserRow.tsx
@@ -67,7 +67,7 @@ export default function UserRow(props: UserRowProps) {
   return (
     <aria.Row
       id={user.userId}
-      className={`rounded-rows-child group h-row ${draggable ? 'cursor-grab' : ''}`}
+      className={`group h-row rounded-rows-child ${draggable ? 'cursor-grab' : ''}`}
       ref={contextMenuRef}
     >
       <aria.Cell className="text relative overflow-hidden whitespace-nowrap border-x-2 border-transparent bg-clip-padding px-cell-x first:rounded-l-full last:rounded-r-full last:border-r-0 group-selected:bg-selected-frame">
@@ -82,7 +82,7 @@ export default function UserRow(props: UserRowProps) {
         <ariaComponents.TooltipTrigger>
           <FocusableText
             ref={tooltipTargetRef}
-            className="cursor-unset block overflow-hidden text-ellipsis whitespace-nowrap"
+            className="block cursor-unset overflow-hidden text-ellipsis whitespace-nowrap"
           >
             {user.name}
           </FocusableText>
@@ -95,7 +95,7 @@ export default function UserRow(props: UserRowProps) {
       {doDeleteUserRaw == null ? null : doDeleteUser == null ? (
         <></>
       ) : (
-        <aria.Cell className="group-hover-2:opacity-100 relative bg-transparent p transparent">
+        <aria.Cell className="relative bg-transparent p transparent group-hover-2:opacity-100">
           <UnstyledButton
             onPress={event => {
               const rect = event.target.getBoundingClientRect()

From 1d0ae1096d15ea3cf1a3aa9e8c7621c30991f77f Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Sat, 11 May 2024 00:35:54 +1000
Subject: [PATCH 22/25] Prettier

---
 README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index de679d88670a..228d56f367fc 100644
--- a/README.md
+++ b/README.md
@@ -207,11 +207,11 @@ Enso consists of several sub projects:
   command line tools.
 
 - **Enso IDE:** The
-  [Enso IDE](https://github.com/enso-org/enso/tree/develop/app/gui2) is a desktop
-  application that allows working with the visual form of Enso. It consists of
-  an Electron application, a high performance WebGL UI framework, and the
-  searcher which provides contextual search, hints, and documentation for all of
-  Enso's functionality.
+  [Enso IDE](https://github.com/enso-org/enso/tree/develop/app/gui2) is a
+  desktop application that allows working with the visual form of Enso. It
+  consists of an Electron application, a high performance WebGL UI framework,
+  and the searcher which provides contextual search, hints, and documentation
+  for all of Enso's functionality.
 
 <br/>
 

From 0da91d4ca034b92cc17ab295f9bbf2368c6fdc77 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Tue, 14 May 2024 00:00:06 +1000
Subject: [PATCH 23/25] Hide menu bar (was enabled for debugging purposes)

---
 app/ide-desktop/lib/client/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ide-desktop/lib/client/src/index.ts b/app/ide-desktop/lib/client/src/index.ts
index c91f307de746..14c02dd19791 100644
--- a/app/ide-desktop/lib/client/src/index.ts
+++ b/app/ide-desktop/lib/client/src/index.ts
@@ -331,7 +331,7 @@ class App {
                         : {}),
                 }
                 const window = new electron.BrowserWindow(windowPreferences)
-                window.setMenuBarVisibility(true)
+                window.setMenuBarVisibility(false)
                 const oldMenu = electron.Menu.getApplicationMenu()
                 if (oldMenu != null) {
                     const items = oldMenu.items.map(item => {

From 1340cfdf3a30c5932e6f8226201c8c3138f19225 Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Tue, 14 May 2024 17:50:24 +1000
Subject: [PATCH 24/25] Address code review

---
 app/ide-desktop/eslint.config.js              | 14 +++++--
 .../dashboard/src/components/EditableSpan.tsx |  2 -
 .../lib/dashboard/src/components/Modal.tsx    |  2 -
 .../src/components/dashboard/Label.tsx        |  2 -
 .../lib/dashboard/src/layouts/InfoBar.tsx     | 22 ++++++----
 .../lib/dashboard/src/layouts/InfoMenu.tsx    |  8 ++--
 .../lib/dashboard/src/layouts/UserMenu.tsx    |  2 -
 .../lib/dashboard/src/modals/AboutModal.tsx   | 42 ++++++++-----------
 .../authentication/AuthenticationPage.tsx     |  2 -
 9 files changed, 45 insertions(+), 51 deletions(-)

diff --git a/app/ide-desktop/eslint.config.js b/app/ide-desktop/eslint.config.js
index de5deb2be37b..bb1b07453527 100644
--- a/app/ide-desktop/eslint.config.js
+++ b/app/ide-desktop/eslint.config.js
@@ -240,8 +240,8 @@ const RESTRICTED_SYNTAXES = [
 export default [
     eslintJs.configs.recommended,
     {
-        // Playwright build cache.
-        ignores: ['**/.cache/**', '**/playwright-report'],
+        // Playwright build cache and Vite build directory.
+        ignores: ['**/.cache/**', '**/playwright-report', '**/dist'],
     },
     {
         settings: {
@@ -334,7 +334,7 @@ export default [
                     format: ['camelCase', 'PascalCase'],
                 },
                 {
-                    selector: ['parameter', 'property', 'method'],
+                    selector: ['parameter', 'method'],
                     format: ['camelCase'],
                 },
                 {
@@ -343,6 +343,14 @@ export default [
                     format: ['camelCase'],
                     leadingUnderscore: 'require',
                 },
+                {
+                    selector: ['property'],
+                    format: ['camelCase'],
+                    filter: {
+                        regex: '^(?:data-testid)$',
+                        match: false,
+                    },
+                },
             ],
             '@typescript-eslint/no-confusing-void-expression': 'error',
             '@typescript-eslint/no-empty-interface': 'off',
diff --git a/app/ide-desktop/lib/dashboard/src/components/EditableSpan.tsx b/app/ide-desktop/lib/dashboard/src/components/EditableSpan.tsx
index 54dfd321dd14..c6a5019aaeb4 100644
--- a/app/ide-desktop/lib/dashboard/src/components/EditableSpan.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/EditableSpan.tsx
@@ -23,8 +23,6 @@ import * as sanitizedEventTargets from '#/utilities/sanitizedEventTargets'
 
 /** Props for an {@link EditableSpan}. */
 export interface EditableSpanProps {
-  // This matches the capitalization of `data-` attributes in React.
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   readonly 'data-testid'?: string
   readonly className?: string
   readonly editable?: boolean
diff --git a/app/ide-desktop/lib/dashboard/src/components/Modal.tsx b/app/ide-desktop/lib/dashboard/src/components/Modal.tsx
index 5306c9438ec8..f40dc02b183a 100644
--- a/app/ide-desktop/lib/dashboard/src/components/Modal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/Modal.tsx
@@ -34,8 +34,6 @@ export default function Modal(props: ModalProps) {
     <FocusRoot active={!hidden}>
       {innerProps => (
         <div
-          // The name comes from a third-party API and cannot be changed.
-          // eslint-disable-next-line @typescript-eslint/naming-convention
           {...(!hidden ? { 'data-testid': 'modal-background' } : {})}
           style={style}
           className={`inset z-1 ${centered ? 'size-screen fixed grid place-items-center' : ''} ${
diff --git a/app/ide-desktop/lib/dashboard/src/components/dashboard/Label.tsx b/app/ide-desktop/lib/dashboard/src/components/dashboard/Label.tsx
index 9ec6bdf53b57..bf4264e4f18f 100644
--- a/app/ide-desktop/lib/dashboard/src/components/dashboard/Label.tsx
+++ b/app/ide-desktop/lib/dashboard/src/components/dashboard/Label.tsx
@@ -16,8 +16,6 @@ import * as backend from '#/services/Backend'
 
 /** Props for a {@link Label}. */
 interface InternalLabelProps extends Readonly<React.PropsWithChildren> {
-  // This matches the capitalization of `data-` attributes in React.
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   readonly 'data-testid'?: string
   /** When true, the button is not faded out even when not hovered. */
   readonly active?: boolean
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
index 0d2365740bb0..d56175b81314 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoBar.tsx
@@ -34,16 +34,22 @@ export default function InfoBar(props: InfoBarProps) {
     <FocusArea direction="horizontal">
       {innerProps => (
         <div
-          className="pointer-events-auto flex h-row shrink-0 cursor-default items-center gap-user-bar rounded-full bg-frame px-icons-x pr-profile-picture backdrop-blur-default"
+          className="pointer-events-auto flex h-row shrink-0 cursor-default items-center gap-user-bar rounded-full bg-frame px-profile-picture backdrop-blur-default"
           {...innerProps}
         >
-          <Button
-            active={isHelpChatOpen}
-            image={ChatIcon}
-            onPress={() => {
-              setIsHelpChatOpen(!isHelpChatOpen)
-            }}
-          />
+          {/* FIXME [sb]: https://github.com/enso-org/cloud-v2/issues/1227
+           * Make help chat work even when signed out.
+           * Note that the original class for the `div` above is `pr-profile-picture px-icons-x`. */}
+          {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+          {false && (
+            <Button
+              active={isHelpChatOpen}
+              image={ChatIcon}
+              onPress={() => {
+                setIsHelpChatOpen(!isHelpChatOpen)
+              }}
+            />
+          )}
           <UnstyledButton
             className="flex size-profile-picture select-none items-center overflow-clip rounded-full"
             onPress={() => {
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
index 200eaa6b15a3..f1d63c529932 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
@@ -31,16 +31,14 @@ export default function InfoMenu(props: InfoMenuProps) {
   const [initialized, setInitialized] = React.useState(false)
 
   React.useEffect(() => {
-    requestAnimationFrame(() => {
-      setInitialized(true)
-    })
+    // Change the CSS from the initial state to the final state after the first render.
+    // This ensures that the CSS transition triggers.
+    setInitialized(true)
   }, [])
 
   return (
     <Modal hidden={hidden} className="absolute size-full overflow-hidden bg-dim">
       <div
-        // The name comes from a third-party API and cannot be changed.
-        // eslint-disable-next-line @typescript-eslint/naming-convention
         {...(!hidden ? { 'data-testid': 'info-menu' } : {})}
         className={`absolute right-top-bar-margin top-top-bar-margin flex flex-col gap-user-menu rounded-default bg-selected-frame backdrop-blur-default transition-all duration-user-menu ${initialized ? 'w-user-menu p-user-menu' : 'size-row-h p-profile-picture'}`}
         onClick={event => {
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
index ca9cdde92902..11539f7a3fa4 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
@@ -67,8 +67,6 @@ export default function UserMenu(props: UserMenuProps) {
   return (
     <Modal hidden={hidden} className="absolute size-full overflow-hidden bg-dim">
       <div
-        // The name comes from a third-party API and cannot be changed.
-        // eslint-disable-next-line @typescript-eslint/naming-convention
         {...(!hidden ? { 'data-testid': 'user-menu' } : {})}
         className={`absolute right-top-bar-margin top-top-bar-margin flex flex-col gap-user-menu rounded-default bg-selected-frame backdrop-blur-default transition-all duration-user-menu ${initialized ? 'w-user-menu p-user-menu' : 'size-row-h p-profile-picture'}`}
         onClick={event => {
diff --git a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
index c6fc0cedcd97..ca463d2f30ca 100644
--- a/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
+++ b/app/ide-desktop/lib/dashboard/src/modals/AboutModal.tsx
@@ -53,33 +53,23 @@ export default function AboutModal() {
   ] satisfies readonly (readonly [text.TextId, string])[]
 
   const doCopy = () => {
-    const textContainer = textContainerRef.current
-    if (textContainer == null) {
-      return
-    } else {
-      const firstChild = textContainer.children[0]
-      const lastChild = textContainer.children[textContainer.children.length - 1]
-      if (firstChild != null && lastChild != null) {
-        getSelection()?.setBaseAndExtent(firstChild, 0, lastChild, 2)
-      }
-      const lines = versionsEntries.map(entry => {
-        const [textId, version] = entry
-        return `${getText(textId)} ${version}`
-      })
-      void navigator.clipboard.writeText(lines.join('\n'))
-      if (!isCopied) {
-        setIsCopied(true)
-        setTimeout(() => {
-          setIsCopied(false)
-        }, CLEAR_COPIED_STATE_TIMEOUT_MS)
-      }
-      return
+    const lines = versionsEntries.map(entry => {
+      const [textId, version] = entry
+      return `${getText(textId)} ${version}`
+    })
+    void navigator.clipboard.writeText(lines.join('\n'))
+    if (!isCopied) {
+      setIsCopied(true)
+      setTimeout(() => {
+        setIsCopied(false)
+      }, CLEAR_COPIED_STATE_TIMEOUT_MS)
     }
   }
 
   return (
-    <aria.DialogTrigger defaultOpen>
-      <aria.Button className="h w" />
+    <ariaComponents.DialogTrigger defaultOpen>
+      {/* This button is not visible - it is only to provide the button for this `DialogTrigger`. */}
+      <aria.Button className="h-0 w-0" />
       <ariaComponents.Dialog className="w-[30rem]">
         <div className="relative flex items-center gap-4">
           <SvgMask src={LogoIcon} className="size-16 shrink-0" />
@@ -95,7 +85,9 @@ export default function AboutModal() {
                   const [textId, version] = entry
                   return (
                     <tr key={textId}>
-                      <td className="whitespace-nowrap pr-cell-x">{getText(textId)}</td>
+                      <td className="whitespace-nowrap pr-cell-x align-text-top">
+                        {getText(textId)}
+                      </td>
                       <td>{version}</td>
                     </tr>
                   )
@@ -115,6 +107,6 @@ export default function AboutModal() {
           </div>
         </div>
       </ariaComponents.Dialog>
-    </aria.DialogTrigger>
+    </ariaComponents.DialogTrigger>
   )
 }
diff --git a/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx b/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
index 5cb8badf416b..d334074e5764 100644
--- a/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
+++ b/app/ide-desktop/lib/dashboard/src/pages/authentication/AuthenticationPage.tsx
@@ -13,8 +13,6 @@ import FocusArea from '#/components/styled/FocusArea'
 
 /** Props for an {@link AuthenticationPage}. */
 export interface AuthenticationPageProps extends Readonly<React.PropsWithChildren> {
-  // This matches the capitalization of `data-` attributes in React.
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   readonly 'data-testid'?: string
   readonly isNotForm?: boolean
   readonly title: string

From 013a769b6c7f637e675de85d0bc0fb3f3bec6e6b Mon Sep 17 00:00:00 2001
From: somebody1234 <ehern.lee@gmail.com>
Date: Tue, 14 May 2024 23:29:00 +1000
Subject: [PATCH 25/25] Use `useLayoutEffect`

---
 app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx | 2 +-
 app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
index f1d63c529932..d1d81e96fd4e 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/InfoMenu.tsx
@@ -30,7 +30,7 @@ export default function InfoMenu(props: InfoMenuProps) {
   const { getText } = textProvider.useText()
   const [initialized, setInitialized] = React.useState(false)
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     // Change the CSS from the initial state to the final state after the first render.
     // This ensures that the CSS transition triggers.
     setInitialized(true)
diff --git a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
index 11539f7a3fa4..c3d13ad13220 100644
--- a/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
+++ b/app/ide-desktop/lib/dashboard/src/layouts/UserMenu.tsx
@@ -49,10 +49,8 @@ export default function UserMenu(props: UserMenuProps) {
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
 
-  React.useEffect(() => {
-    requestAnimationFrame(() => {
-      setInitialized(true)
-    })
+  React.useLayoutEffect(() => {
+    setInitialized(true)
   }, [])
 
   const aboutThisAppMenuEntry = (