Modernise the UI/UX

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "1.20261106.0",
+  "version": "1.20261109.0",
   "engines": {
     "bun": ">=1.2.0"
   },
@@ -53,17 +53,17 @@
     "xxhash-wasm": "^1.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.6.5",
-    "@celldl/editor": "^0.20261105.0",
+    "@biomejs/biome": "^2.6.6",
+    "@celldl/editor": "^0.20261109.0",
     "@celldl/rdf": "^1.20260822.0",
     "@electron-toolkit/tsconfig": "^2.0.0",
     "@electron-toolkit/utils": "^4.0.0",
     "@opencor/libopencor-types": "^1.20261029.0",
     "@physiomelinks/bg2cellml": "^0.6.2",
     "@primeuix/themes": "2.0.3",
     "@primevue/auto-import-resolver": "4.5.5",
-    "@tailwindcss/postcss": "^4.3.4",
-    "@tailwindcss/vite": "^4.3.4",
+    "@tailwindcss/postcss": "^4.3.5",
+    "@tailwindcss/vite": "^4.3.5",
     "@types/bun": "^1.4.4",
     "@types/node": "^26.6.6",
     "@vitejs/plugin-vue": "^6.0.10",
@@ -83,10 +83,10 @@
     "postcss": "^8.5.32",
     "primeicons": "7.0.0",
     "primevue": "4.5.5",
-    "rollup-plugin-visualizer": "^7.1.2",
+    "rollup-plugin-visualizer": "^7.1.3",
     "stylelint": "^18.0.0",
     "stylelint-config-standard": "^41.0.0",
-    "tailwindcss": "^4.3.4",
+    "tailwindcss": "^4.3.5",
     "tailwindcss-primeui": "^0.6.1",
     "tar": "^7.5.22",
     "typescript": "^7.0.2",

src/extern/corsProxy.js

@@ -1,6 +1,6 @@
 // A simple CORS proxy handler for Cloudflare Workers (see https://workers.cloudflare.com/).
-// Note: the proxy accepts any target URL, but it only returns content that is a CellML file, a SED-ML file, an OMEX file,
-//       or a CSV file (see isCsvFile()), and that is not too large (see MAX_SIZE). Such content is returned as an
+// Note: the proxy accepts any target URL, but it only returns content that is a CellML file, a SED-ML file, an OMEX
+//       file, or a CSV file (see isCsvFile()), and that is not too large (see MAX_SIZE). Such content is returned as an
 //       opaque, sandboxed download, so that a browser never renders or executes it.
 
 const CORS_HEADERS = {
@@ -97,9 +97,9 @@ const readBytes = async (reader, maxSize) => {
 const readRest = async (reader, head) => {
   // Read the rest of some content, the start of which we have already read, and return all of it, unless it is too
   // large, in which case return null.
-  // Note: we read (up to) one more byte than allowed, so that we know whether the content is too large, in which case we
-  //       reject it without concatenating its chunks. Otherwise, we concatenate the start of the content and the rest of
-  //       it in one go.
+  // Note: we read (up to) one more byte than allowed, so that we know whether the content is too large, in which case
+  //       we reject it without concatenating its chunks. Otherwise, we concatenate the start of the content and the
+  //       rest of it in one go.
 
   const all = await readChunks(reader, MAX_SIZE + 1, [head]);
 

src/main/ApplicationWindow.ts

@@ -17,9 +17,13 @@ export class ApplicationWindow extends electron.BrowserWindow {
 
   constructor(options: electron.BrowserWindowConstructorOptions, usePreload = true) {
     // Add some common options and call our parent constructor.
-    // Note: we use backgroundColor to minimise the flickering that may occur when first showing a window.
+    // Note #1: we use backgroundColor to minimise the flickering that may occur when first showing a window.
+    // Note #2: a transparent window (e.g., our splash screen window) draws its own background, so it must keep a
+    //          transparent background.
 
-    options.backgroundColor = backgroundColor();
+    const transparent = !!options.transparent;
+
+    options.backgroundColor = transparent ? '#00000000' : backgroundColor();
     options.show = false;
     options.useContentSize = true;
 
@@ -43,19 +47,21 @@ export class ApplicationWindow extends electron.BrowserWindow {
     //       when our window gets resized), so it must match our theme, which may change while we are running (e.g., if
     //       the user changes our theme or the system one), or there would be some flickering.
 
-    const updateBackgroundColor = (): void => {
-      const color = backgroundColor();
+    if (!transparent) {
+      const updateBackgroundColor = (): void => {
+        const color = backgroundColor();
 
-      if (color && !this.isDestroyed()) {
-        this.setBackgroundColor(color);
-      }
-    };
+        if (color && !this.isDestroyed()) {
+          this.setBackgroundColor(color);
+        }
+      };
 
-    electron.nativeTheme.on('updated', updateBackgroundColor);
+      electron.nativeTheme.on('updated', updateBackgroundColor);
 
-    this.once('closed', () => {
-      electron.nativeTheme.removeListener('updated', updateBackgroundColor);
-    });
+      this.once('closed', () => {
+        electron.nativeTheme.removeListener('updated', updateBackgroundColor);
+      });
+    }
   }
 
   // Send a message to our renderer.

src/main/MainMenu.ts

@@ -99,14 +99,14 @@ export const enableDisableMainMenu = (enable: boolean): void => {
       label: 'Open...',
       accelerator: 'CmdOrCtrl+O',
       click: () => {
-        mainWindow?.open();
+        mainWindow?.showOpenDialog();
       }
     });
     fileSubMenu.push({
-      label: 'Open Remote...',
+      label: 'Open Location...',
       accelerator: 'CmdOrCtrl+Shift+O',
       click: () => {
-        mainWindow?.send('open-remote');
+        mainWindow?.send('open-location');
       }
     });
     fileSubMenu.push({