From 75efcf553635fcb8e495648c50cf9d570c3c31c4 Mon Sep 17 00:00:00 2001
From: Javier Ribal del Rio <javierribal@gmail.com>
Date: Sat, 10 Oct 2026 20:17:40 +0200
Subject: [PATCH] feat(electron-app): remove border

---
 .../renderer/mode-selector/index.html         | 60 +++++++++++++++----
 electron-app/src/app/modeSelector.js          | 53 ++++++++++++----
 2 files changed, 90 insertions(+), 23 deletions(-)

diff --git a/electron-app/renderer/mode-selector/index.html b/electron-app/renderer/mode-selector/index.html
index ffb1038c0..e6748d1f4 100644
--- a/electron-app/renderer/mode-selector/index.html
+++ b/electron-app/renderer/mode-selector/index.html
@@ -8,11 +8,16 @@
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
 
+    * {
+      box-sizing: border-box;
+    }
+
     html,
     body {
-      min-height: 100vh;
+      height: 100%;
       margin: 0;
       overflow: hidden;
+      background: transparent;
     }
 
     body {
@@ -21,7 +26,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: #111;
+      box-sizing: border-box;
       color: #fff;
       padding: 16px;
     }
@@ -31,13 +36,39 @@
       background: #20274c;
       padding: clamp(22px, 3.5vw, 32px);
       border-radius: 24px;
-      width: min(660px, 100%);
-      max-width: 660px;
-      max-height: calc(100vh - 48px);
+      width: min(726px, 100%);
+      max-height: calc(100vh - 32px);
       text-align: center;
       box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
       border: 1px solid rgba(237, 238, 240, 0.08);
-      overflow: hidden;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    .close-button {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      z-index: 3;
+      display: grid;
+      place-items: center;
+      width: 36px;
+      height: 36px;
+      min-height: 0;
+      padding: 0;
+      border-radius: 50%;
+      background: transparent;
+      color: #edeef0;
+    }
+
+    .close-button:hover {
+      background: rgba(237, 238, 240, 0.15);
+      transform: none;
+    }
+
+    button:focus-visible {
+      outline: 2px solid #fff;
+      outline-offset: 3px;
     }
 
     .top-logo {
@@ -50,7 +81,7 @@
     .logo-background {
       position: absolute;
       left: 50%;
-      bottom: -14px;
+      bottom: 0;
       width: clamp(260px, 60vw, 380px);
       max-width: 90%;
       transform: translateX(-50%);
@@ -217,7 +248,7 @@
       }
 
       .logo-background {
-        bottom: -12px;
+        bottom: 0;
       }
 
       .button-grid {
@@ -233,6 +264,11 @@
 
 <body>
   <div class="card">
+    <button class="close-button" id="close-selector" type="button" aria-label="Close Control Station" title="Close Control Station">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path d="m6 6 12 12M18 6 6 18" />
+      </svg>
+    </button>
     <img src="src/Subsystem.png" alt="Departamento" class="logo-background" />
     <div class="top-logo">
       <img src="src/logo.svg" alt="Logo Hyperloop UPV" class="logo-main" />
@@ -254,11 +290,13 @@ <h1>Control Station</h1>
     </div>
   </div>
   <script>
+    document.getElementById('close-selector').addEventListener('click', () => window.close());
+
     const sendMode = (mode) => {
       if (window.electronAPI && window.electronAPI.setInitialMode) {
-        window.electronAPI.setInitialMode(mode).catch(() => { }).finally(() => window.close());
+        window.electronAPI.setInitialMode(mode).catch(() => { });
       } else {
-        try { window.ipcRenderer && window.ipcRenderer.send('set-initial-mode', mode); window.close(); } catch (e) { }
+        try { window.ipcRenderer && window.ipcRenderer.send('mode-selected', mode); } catch (e) { }
       }
     };
 
@@ -330,4 +368,4 @@ <h1>Control Station</h1>
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/electron-app/src/app/modeSelector.js b/electron-app/src/app/modeSelector.js
index 526965ce0..43a5186ec 100644
--- a/electron-app/src/app/modeSelector.js
+++ b/electron-app/src/app/modeSelector.js
@@ -3,7 +3,7 @@
  * @description Mode selector window and logic for initial app mode selection.
  */
 
-import { BrowserWindow, ipcMain } from "electron";
+import { app, BrowserWindow, ipcMain, screen } from "electron";
 import fs from "fs";
 import path from "path";
 import { startBackend } from "../processes/backend.js";
@@ -32,15 +32,26 @@ const VALID_MODES = {
 async function showModeSelector(screenWidth, screenHeight) {
   return new Promise(async (resolve, reject) => {
     let mainWindow = null;
+    let modeSelected = false;
+    const { x, y, width, height } = screen.getPrimaryDisplay().bounds;
 
     const selectorWindow = new BrowserWindow({
-      width: 920,
-      height: 680,
-      useContentSize: true,
-      resizable: true,
-      modal: true,
-      parent: mainWindow,
-      show: true,
+      // Cover the desktop without native fullscreen, which can make transparent
+      // windows opaque or move them to a separate desktop space. A 1px inset also
+      // prevents the compositor from treating a screen-sized window as fullscreen.
+      x: x + 1,
+      y: y + 1,
+      width: width - 2,
+      height: height - 2,
+      frame: false,
+      transparent: true,
+      backgroundColor: "#00000000",
+      fullscreen: false,
+      fullscreenable: false,
+      maximizable: false,
+      resizable: false,
+      hasShadow: false,
+      show: false,
       webPreferences: {
         preload: path.join(getAppPath(), "preload.js"),
         contextIsolation: true,
@@ -49,28 +60,46 @@ async function showModeSelector(screenWidth, screenHeight) {
       title: "Select Mode",
     });
 
+    selectorWindow.on("closed", () => {
+      ipcMain.removeListener("mode-selected", onModeSelected);
+      // Closing the selector cancels startup, including return-to-selector flows
+      // where the previous application's windows are still hidden.
+      if (!modeSelected) app.quit();
+    });
+
     const selectorPath = path.join(getAppPath(), "renderer", "mode-selector", "index.html");
 
     if (!fs.existsSync(selectorPath)) {
       logger.electron.warning("Mode selector UI not found, using default testing-view");
+      modeSelected = true;
+      selectorWindow.close();
       resolve({ mode: "default", view: VALID_MODES.default, mainWindow: null });
       return;
     }
 
     logger.electron.info(`Mode selector found: ${selectorPath}`);
 
+    ipcMain.on("mode-selected", onModeSelected);
+
     try {
       await selectorWindow.loadFile(selectorPath);
-      selectorWindow.show();
-      selectorWindow.focus();
+      if (!selectorWindow.isDestroyed()) {
+        selectorWindow.show();
+        selectorWindow.focus();
+      }
     } catch (err) {
       logger.electron.error("Failed to load selector UI:", err);
+      modeSelected = true;
+      selectorWindow.close();
       resolve({ mode: "default", view: VALID_MODES.default, mainWindow: null });
       return;
     }
 
     // Listen for mode selection from renderer
-    ipcMain.once("mode-selected", async (_event, mode) => {
+    async function onModeSelected(event, mode) {
+      if (event.sender !== selectorWindow.webContents || modeSelected) return;
+      modeSelected = true;
+      ipcMain.removeListener("mode-selected", onModeSelected);
       try {
         const view = VALID_MODES[mode] || VALID_MODES.default;
 
@@ -103,7 +132,7 @@ async function showModeSelector(screenWidth, screenHeight) {
           selectorWindow.close();
         } catch (e) {}
       }
-    });
+    }
   });
 }