v1.4.1: barra de pestanas al estilo Chrome

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

README.md

@@ -1,21 +1,38 @@
 # Labstream OS — App de escritorio (Windows + macOS)
 
-Envoltorio de escritorio para **Labstream OS**. Es un cliente delgado hecho con
+Cliente de escritorio para **Labstream OS**, hecho con [Tauri 2](https://tauri.app).
-[Tauri 2](https://tauri.app): abre una ventana propia (sin barra de navegador)
+Desde la v1.1.0 no es un envoltorio de una sola vista: es un **shell con pestañas**
-que carga el servidor de Labstream OS que corre en el NAS
+(multiwebview) sobre el servidor del NAS (`https://os.labstreamsas.com`).
-(`https://os.labstreamsas.com`).
 
 No contiene la app: el backend, la base de datos, OnlyOffice, etc. siguen en el
-NAS. Esto solo le da al equipo un ícono y una ventana propia en Windows y Mac.
+NAS. Esto le da al equipo un cliente nativo de verdad en Windows y Mac:
 
-Además del ícono y la ventana, el envoltorio añade comportamiento de cliente nativo:
+- **Pestañas** como en un navegador: los enlaces internos con `target="_blank"`
-
+  (documentos, entregables, exportaciones, OnlyOffice…) abren **pestaña dentro de
-- **Enlaces externos** (Drive, documentos ajenos…) abren en el **navegador del sistema**;
+  la app** — antes morían en silencio. También ⌘/Ctrl+clic y clic central.
-  la navegación del propio servidor y el **login por Authentik** se quedan dentro.
+  Atajos: ⌘/Ctrl+T nueva, ⌘/Ctrl+W cerrar, Ctrl+Tab rotar, ⌘/Ctrl+1…9 ir a la n.
+  La sesión (pestañas abiertas, activa) **se restaura** al reabrir.
+- **Zoom de interfaz**: ⌘/Ctrl `+` / `−` / `0` y Ctrl+rueda, con indicador en la
+  barra y **persistencia** entre sesiones (50%–250%).
+- **Documentos dentro de la app**: los visores/editores del propio servidor
+  (OnlyOffice, PDFs, reproductor de revisión) abren en pestañas; solo lo de OTRO
+  origen (Drive…) sale al **navegador del sistema**. El **login por Authentik**
+  sigue funcionando dentro.
 - **Notas de voz / cámara**: pide permiso de micrófono y cámara (entitlements de macOS).
 - **Descargas** (entregables, exportaciones) con el diálogo nativo de guardado.
 - **Bandeja del sistema**: cerrar la ventana la oculta; la app sigue notificando.
+  En macOS, el clic en el **Dock** también reabre la ventana, y hay **menú nativo**
+  en español (Edición/Vista/Archivo) con los atajos.
 - **Arranque automático** al iniciar sesión y **sesión persistente** (no re-loguea).
+- **Una sola instancia** (release): abrirla de nuevo enfoca la ventana existente.
+- **Menú de opciones ⋮** (v1.2.0) en la barra — también con clic derecho sobre ella:
+  pestañas, zoom, recargar, abrir la página en el navegador, **Iniciar con el
+  sistema** (elección recordada) y **Buscar actualización…** con aviso del
+  resultado. Es un popup nativo del sistema, igual en Windows y macOS, y vive
+  solo en el shell (la web app no se toca).
+
+La barra de pestañas vive en `dist/index.html` (webview local «chrome»); las
+pestañas son webviews hijos `tab-*`. Shell ↔ Rust se hablan por eventos `ls-*`.
 
 El servidor objetivo se configura en `src-tauri/src/lib.rs` → constante `SERVER_URL`.
 

dist/index.html

@@ -4,41 +4,329 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Labstream OS</title>
+    <!--
+      Barra de pestañas del shell de escritorio (webview "chrome", local).
+      Habla con Rust por eventos (__TAURI__.event):
+        recibe  ls-tabs      {tabs:[{label,title,active}], zoom}
+        emite   ls-ready, ls-new-tab, ls-activate, ls-close-tab, ls-reload, ls-zoom, ls-cycle, ls-activate-n
+    -->
     <style>
+      /* Paleta estilo Chrome: la barra es una FRANJA más oscura y la pestaña activa es una
+         tarjeta del color del contenido que se funde con él (sin línea debajo). */
+      :root {
+        --bg: #dee1e6;          /* franja de pestañas (Chrome claro) */
+        --fg: #45474a;
+        --muted: #5f6368;
+        --tab-active-bg: #ffffff;
+        --tab-active-fg: #202124;
+        --accent: #6366f1;      /* indigo-500, color de Labstream */
+        --border: #c9ccd1;      /* línea bajo la barra (la tapa la pestaña activa) */
+        --hover: rgba(255, 255, 255, 0.55);  /* píldora de hover en pestañas inactivas */
+        --btn-hover: rgba(0, 0, 0, 0.08);
+        --sep: rgba(0, 0, 0, 0.22);          /* separador fino entre pestañas inactivas */
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #202124;        /* franja (Chrome oscuro) */
+          --fg: #bdc1c6;
+          --muted: #80868b;
+          --tab-active-bg: #18181b;  /* mismo fondo que la app → pestaña fundida con el contenido */
+          --tab-active-fg: #e8eaed;
+          --border: #101013;
+          --hover: rgba(255, 255, 255, 0.08);
+          --btn-hover: rgba(255, 255, 255, 0.1);
+          --sep: rgba(255, 255, 255, 0.25);
+        }
+      }
+      * { box-sizing: border-box; }
       html, body {
         margin: 0;
         height: 100%;
-        background: #6366f1;
+        overflow: hidden;
-        color: #fff;
+        background: var(--bg);
+        color: var(--fg);
         font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+        font-size: 12.5px;
+        user-select: none;
+        -webkit-user-select: none;
+        cursor: default;
+      }
+      #bar {
         display: flex;
         align-items: center;
-        justify-content: center;
+        gap: 2px;
-        text-align: center;
+        height: 40px;
+        padding: 0 6px 0 8px;
+        border-bottom: 1px solid var(--border);
       }
-      .box { max-width: 420px; padding: 24px; }
+      #tabs {
-      h1 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
+        display: flex;
-      p { opacity: 0.85; font-size: 14px; line-height: 1.5; margin: 0; }
+        align-items: flex-end;
-      .spinner {
+        flex: 1 1 auto;
-        width: 28px; height: 28px; margin: 0 auto 20px;
+        min-width: 0;
-        border: 3px solid rgba(255,255,255,0.35);
+        /* Se extiende 1px sobre el borde inferior de la barra para que la pestaña ACTIVA
-        border-top-color: #fff; border-radius: 50%;
+           lo tape con su propio fondo y quede FUNDIDA con el contenido (look Chrome). */
-        animation: spin 0.8s linear infinite;
+        align-self: stretch;
+        margin-bottom: -1px;
+        padding: 0 4px;
+        overflow-x: auto;
+        scrollbar-width: none;
       }
-      @keyframes spin { to { transform: rotate(360deg); } }
+      #tabs::-webkit-scrollbar { display: none; }
+      .tab {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        flex: 0 1 220px;
+        min-width: 100px;
+        height: 30px;
+        margin-bottom: 5px;
+        padding: 0 6px 0 10px;
+        border-radius: 9px;         /* inactiva: píldora redondeada (hover) */
+        position: relative;
+        overflow: visible;          /* deja asomar las curvas de la base de la activa */
+      }
+      .tab:not(.active):hover { background: var(--hover); }
+      /* Separador fino a la IZQUIERDA de cada inactiva; se oculta pegado a la activa,
+         al hover y en la primera (igual que Chrome). */
+      .tab:not(.active)::before {
+        content: "";
+        position: absolute;
+        left: -1px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 16px;
+        background: var(--sep);
+      }
+      .tab:first-child::before,
+      .tab:hover::before,
+      .tab.active + .tab::before,
+      .tab:hover + .tab::before { display: none; }
+      .tab.active {
+        background: var(--tab-active-bg);
+        color: var(--tab-active-fg);
+        height: 35px;
+        margin-bottom: 0;           /* su base cae 1px SOBRE el borde de la barra y lo tapa */
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+      }
+      /* Curvas cóncavas de Chrome en la base de la pestaña activa: dos piezas de 8px con
+         un cuarto de círculo transparente que "derrama" el fondo hacia los lados. */
+      .tab.active::before,
+      .tab.active::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        width: 8px;
+        height: 8px;
+      }
+      .tab.active::before {
+        left: -8px;
+        background: radial-gradient(circle at 0 0, transparent 8px, var(--tab-active-bg) 8.5px);
+      }
+      .tab.active::after {
+        right: -8px;
+        background: radial-gradient(circle at 8px 0, transparent 8px, var(--tab-active-bg) 8.5px);
+      }
+      .tab .favicon {
+        flex: 0 0 auto;
+        width: 14px;
+        height: 14px;
+        border-radius: 3px;
+      }
+      .tab .titulo {
+        flex: 1 1 auto;
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .tab .cerrar {
+        flex: 0 0 auto;
+        width: 18px;
+        height: 18px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;         /* circulito, como el × de Chrome */
+        color: var(--muted);
+        font-size: 13px;
+        line-height: 1;
+        visibility: hidden;
+      }
+      .tab:hover .cerrar, .tab.active .cerrar { visibility: visible; }
+      .tab .cerrar:hover { background: var(--btn-hover); color: var(--tab-active-fg); }
+      button {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        color: var(--fg);
+        font: inherit;
+        border-radius: 50%;
+        cursor: default;
+        display: grid;
+        place-items: center;
+      }
+      button:hover { background: var(--btn-hover); }
+      .icono {
+        flex: 0 0 auto;
+        width: 30px;
+        margin: 2px 0 7px;
+        font-size: 15px;
+      }
+      #zoom {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 1px;
+        margin: 2px 0 7px;
+      }
+      #zoom button { height: 100%; }
+      #z-menos, #z-mas { width: 26px; font-size: 14px; }
+      #z-pct {
+        min-width: 44px;
+        padding: 0 4px;
+        font-variant-numeric: tabular-nums;
+        color: var(--muted);
+        font-size: 11.5px;
+      }
+      #z-pct.activo { color: var(--accent); font-weight: 600; }
+      #version {
+        flex: 0 0 auto;
+        margin: 2px 0 7px;
+        padding: 0 7px;
+        color: var(--muted);
+        font-size: 11px;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+      #version:hover { color: var(--accent); }
     </style>
   </head>
   <body>
-    <!--
+    <div id="bar">
-      Pantalla de respaldo. En condiciones normales la ventana carga directamente
+      <button class="icono" id="atras" title="Atrás (⌘/Ctrl+[)">←</button>
-      el servidor del NAS (app.windows[].url en tauri.conf.json), así que este
+      <button class="icono" id="adelante" title="Adelante (⌘/Ctrl+])">→</button>
-      archivo casi nunca se ve. Solo aparece si se cambia la config para arrancar
+      <div id="tabs" title=""></div>
-      en local. Es obligatorio porque Tauri exige un frontendDist existente.
+      <button class="icono" id="nueva" title="Nueva pestaña (⌘/Ctrl+T)">+</button>
-    -->
+      <button class="icono" id="recargar" title="Recargar (⌘/Ctrl+R)">⟳</button>
-    <div class="box">
+      <div id="zoom">
-      <div class="spinner"></div>
+        <button id="z-menos" title="Alejar (⌘/Ctrl+−)">−</button>
-      <h1>Labstream OS</h1>
+        <button id="z-pct" title="Restablecer zoom (⌘/Ctrl+0)">100%</button>
-      <p>Conectando con el espacio de trabajo…</p>
+        <button id="z-mas" title="Acercar (⌘/Ctrl++)">+</button>
+      </div>
+      <button id="version" title="Versión de la app · clic: buscar actualización"></button>
+      <button class="icono" id="menu" title="Opciones de la app">⋮</button>
     </div>
+    <script>
+      const T = window.__TAURI__;
+      const E = T && T.event;
+      let estado = { tabs: [], zoom: 100 };
+
+      function emitir(nombre, datos) {
+        try { E.emit(nombre, datos || {}); } catch (e) {}
+      }
+
+      const $tabs = document.getElementById("tabs");
+      const $pct = document.getElementById("z-pct");
+      const $ver = document.getElementById("version");
+
+      // Favicon de las pestañas (look Chrome): mini logo Labstream en SVG inline —
+      // cuadrado indigo con la "L" — para no depender de archivos ni de la red.
+      const FAVICON = "data:image/svg+xml," + encodeURIComponent(
+        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>" +
+        "<rect width='16' height='16' rx='4' fill='#6366f1'/>" +
+        "<path d='M5.2 3.8v7h5.6' stroke='#fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/>" +
+        "</svg>",
+      );
+
+      function render() {
+        $tabs.textContent = "";
+        for (const t of estado.tabs) {
+          const el = document.createElement("div");
+          el.className = "tab" + (t.active ? " active" : "");
+          el.title = t.title;
+
+          const fav = document.createElement("img");
+          fav.className = "favicon";
+          fav.src = FAVICON;
+          fav.alt = "";
+          el.appendChild(fav);
+
+          const titulo = document.createElement("span");
+          titulo.className = "titulo";
+          titulo.textContent = t.title || "Labstream OS";
+          el.appendChild(titulo);
+
+          const x = document.createElement("button");
+          x.className = "cerrar";
+          x.textContent = "×";
+          x.title = "Cerrar pestaña (⌘/Ctrl+W)";
+          x.addEventListener("click", (e) => {
+            e.stopPropagation();
+            emitir("ls-close-tab", { label: t.label });
+          });
+          el.appendChild(x);
+
+          el.addEventListener("click", () => emitir("ls-activate", { label: t.label }));
+          // Clic central sobre la pestaña = cerrarla (como en el navegador).
+          el.addEventListener("auxclick", (e) => {
+            if (e.button === 1) emitir("ls-close-tab", { label: t.label });
+          });
+          $tabs.appendChild(el);
+        }
+        const activa = $tabs.querySelector(".tab.active");
+        if (activa) activa.scrollIntoView({ block: "nearest", inline: "nearest" });
+
+        $pct.textContent = estado.zoom + "%";
+        $pct.classList.toggle("activo", estado.zoom !== 100);
+        $ver.textContent = estado.version ? "v" + estado.version : "";
+      }
+
+      if (E) {
+        E.listen("ls-tabs", (ev) => {
+          estado = ev.payload || estado;
+          render();
+        });
+      }
+
+      document.getElementById("atras").addEventListener("click", () => emitir("ls-nav", { dir: -1 }));
+      document.getElementById("adelante").addEventListener("click", () => emitir("ls-nav", { dir: 1 }));
+      document.getElementById("nueva").addEventListener("click", () => emitir("ls-new-tab", {}));
+      document.getElementById("recargar").addEventListener("click", () => emitir("ls-reload", {}));
+      // Menú de OPCIONES de la app (nativo, lo pinta Rust): botón ⋮ o clic derecho en la barra.
+      document.getElementById("menu").addEventListener("click", () => emitir("ls-menu", {}));
+      $ver.addEventListener("click", () => emitir("ls-check-update", {}));
+      document.getElementById("bar").addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        emitir("ls-menu", {});
+      });
+      document.getElementById("z-menos").addEventListener("click", () => emitir("ls-zoom", { dir: -1 }));
+      document.getElementById("z-mas").addEventListener("click", () => emitir("ls-zoom", { dir: 1 }));
+      $pct.addEventListener("click", () => emitir("ls-zoom", { dir: 0 }));
+      // Doble clic en el hueco libre de la barra = pestaña nueva.
+      $tabs.addEventListener("dblclick", (e) => {
+        if (e.target === $tabs) emitir("ls-new-tab", {});
+      });
+
+      // Atajos también cuando el foco está en la barra.
+      addEventListener("keydown", (e) => {
+        const mod = e.metaKey || e.ctrlKey;
+        if (!mod) return;
+        const k = e.key;
+        if (k === "t" || k === "T") { e.preventDefault(); emitir(e.shiftKey ? "ls-reopen" : "ls-new-tab", {}); }
+        else if (k === "w" || k === "W") { e.preventDefault(); emitir("ls-close-tab", {}); }
+        else if ((k === "r" || k === "R") && !e.shiftKey) { e.preventDefault(); emitir("ls-reload", {}); }
+        else if (k === "[") { e.preventDefault(); emitir("ls-nav", { dir: -1 }); }
+        else if (k === "]") { e.preventDefault(); emitir("ls-nav", { dir: 1 }); }
+        else if (k === "=" || k === "+") { e.preventDefault(); emitir("ls-zoom", { dir: 1 }); }
+        else if (k === "-") { e.preventDefault(); emitir("ls-zoom", { dir: -1 }); }
+        else if (k === "0") { e.preventDefault(); emitir("ls-zoom", { dir: 0 }); }
+        else if (k === "Tab") { e.preventDefault(); emitir("ls-cycle", { dir: e.shiftKey ? -1 : 1 }); }
+        else if (k >= "1" && k <= "9") { e.preventDefault(); emitir("ls-activate-n", { n: +k }); }
+      });
+
+      emitir("ls-ready", {});
+    </script>
   </body>
 </html>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "labstream-desktop",
-  "version": "1.0.0",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "labstream-desktop",
-      "version": "1.0.0",
+      "version": "1.4.0",
       "devDependencies": {
         "@tauri-apps/cli": "^2"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "labstream-desktop",
-  "version": "1.0.0",
+  "version": "1.4.0",
   "private": true,
   "description": "App de escritorio (Windows) que envuelve Labstream OS — cliente del servidor del NAS.",
   "scripts": {

src-tauri/Cargo.lock

@@ -1946,7 +1946,7 @@ dependencies = [
 
 [[package]]
 name = "labstream-desktop"
-version = "1.0.0"
+version = "1.4.1"
 dependencies = [
  "serde",
  "serde_json",
@@ -1955,6 +1955,7 @@ dependencies = [
  "tauri-plugin-autostart",
  "tauri-plugin-notification",
  "tauri-plugin-opener",
+ "tauri-plugin-single-instance",
  "tauri-plugin-updater",
 ]
 
@@ -3841,6 +3842,22 @@ dependencies = [
  "zbus",
 ]
 
+[[package]]
+name = "tauri-plugin-single-instance"
+version = "2.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b3214becf9ef5783c0ae99a3bb25adf5353a7a16ebf53e74b909e29205735c6c"
+dependencies = [
+ "serde",
+ "serde_json",
+ "tauri",
+ "thiserror 2.0.18",
+ "tokio",
+ "tracing",
+ "windows-sys 0.60.2",
+ "zbus",
+]
+
 [[package]]
 name = "tauri-plugin-updater"
 version = "2.10.1"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "labstream-desktop"
-version = "1.0.0"
+version = "1.4.1"
 description = "Cliente de escritorio de Labstream OS"
 authors = ["Labstream SAS"]
 edition = "2021"
@@ -14,10 +14,12 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["tray-icon"] }
+# `unstable` habilita multiwebview: varios webviews (pestañas) dentro de UNA ventana.
+tauri = { version = "2", features = ["tray-icon", "unstable"] }
 tauri-plugin-opener = "2"
 tauri-plugin-notification = "2"
 tauri-plugin-autostart = "2"
 tauri-plugin-updater = "2"
+tauri-plugin-single-instance = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"

src-tauri/capabilities/default.json

@@ -1,8 +1,9 @@
 {
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
-  "description": "Permisos por defecto del envoltorio de escritorio.",
+  "description": "Permisos del shell de escritorio: la barra local (chrome) y las pestañas remotas (tab-*).",
   "windows": ["main"],
+  "webviews": ["chrome", "tab-*"],
   "remote": {
     "urls": ["https://os.labstreamsas.com"]
   },

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Labstream OS",
-  "version": "1.0.0",
+  "version": "1.4.1",
   "identifier": "co.labstream.os",
   "build": {
     "frontendDist": "../dist"