diff --git a/dist/index.html b/dist/index.html
index 7346ae1..fdf30ce 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -135,6 +135,32 @@
right: -8px;
background: radial-gradient(circle at 8px 0, transparent 8px, var(--tab-active-bg) 8.5px);
}
+ /* ── Color de pestaña ────────────────────────────────────────────────────────────
+ Misma idea que los grupos de Chrome: teñir para agrupar de un vistazo («todo lo de
+ este cliente, en verde»). El color se elige con clic derecho sobre la pestaña ▸ Color,
+ y se guarda con la sesión.
+ Va en componentes RGB sueltos (`--tc: r, g, b`) para sacar de UNA sola definición
+ tanto el tono sólido como el fondo translúcido, sin repetir nueve colores por tema.
+ La pestaña ACTIVA no se tiñe entera: tiene que seguir fundida con el contenido, así
+ que lleva el color en una franja superior — igual que Chrome. */
+ .tab[data-color="gris"] { --tc: 95, 99, 104; }
+ .tab[data-color="azul"] { --tc: 26, 115, 232; }
+ .tab[data-color="rojo"] { --tc: 217, 48, 37; }
+ .tab[data-color="amarillo"] { --tc: 249, 171, 0; }
+ .tab[data-color="verde"] { --tc: 30, 142, 62; }
+ .tab[data-color="rosa"] { --tc: 208, 24, 132; }
+ .tab[data-color="morado"] { --tc: 147, 52, 230; }
+ .tab[data-color="cian"] { --tc: 0, 123, 131; }
+ .tab[data-color="naranja"] { --tc: 250, 144, 62; }
+ .tab[data-color]:not(.active) { background: rgba(var(--tc), 0.18); }
+ .tab[data-color]:not(.active):hover { background: rgba(var(--tc), 0.32); }
+ /* Con fondo propio el separador vertical sobra: ya se ve dónde acaba cada pestaña. */
+ .tab[data-color]:not(.active)::before { display: none; }
+ .tab[data-color].active { box-shadow: inset 0 3px 0 rgb(var(--tc)); }
+ @media (prefers-color-scheme: dark) {
+ .tab[data-color]:not(.active) { background: rgba(var(--tc), 0.36); }
+ .tab[data-color]:not(.active):hover { background: rgba(var(--tc), 0.5); }
+ }
/* Reordenar arrastrando: NO se usa drag&drop de HTML5 (en el webview de la barra en
macOS los eventos no llegan), sino eventos de puntero. Se apaga el arrastre nativo de
WebKit para que no salga la imagen fantasma al mover una pestaña. */
@@ -417,6 +443,7 @@
const el = document.createElement("div");
el.className = "tab" + (t.active ? " active" : "");
el.dataset.label = t.label;
+ if (t.color) el.dataset.color = t.color; // teñido desde el menú de la pestaña
el.title = texto;
const fav = document.createElement("span");
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 17fd453..f171e1d 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -66,8 +66,25 @@ struct TabRec {
title: String,
url: String,
loading: bool, // la barra pinta un giro en el icono mientras carga
+ // Color elegido a mano desde el menú de la pestaña (None = sin teñir). Aquí solo vive el
+ // NOMBRE; el tono exacto y cómo se pinta son cosa del CSS de la barra.
+ color: Option,
}
+// Paleta de colores de pestaña, la misma idea que los grupos de Chrome: sirve para agrupar de
+// un vistazo («todo lo de este cliente en verde»). El id viaja en el payload de `ls-tabs`.
+const TAB_COLORS: &[(&str, &str)] = &[
+ ("gris", "Gris"),
+ ("azul", "Azul"),
+ ("rojo", "Rojo"),
+ ("amarillo", "Amarillo"),
+ ("verde", "Verde"),
+ ("rosa", "Rosa"),
+ ("morado", "Morado"),
+ ("cian", "Cian"),
+ ("naranja", "Naranja"),
+];
+
struct Shell {
tabs: Vec,
active: usize,
@@ -107,6 +124,10 @@ struct Persisted {
win: Option,
#[serde(default)]
tabs: Vec,
+ // Color de cada pestaña, en el mismo orden que `tabs` ("" = sin teñir). Lista aparte para
+ // que un estado.json viejo (sin colores) siga cargando tal cual.
+ #[serde(default)]
+ colors: Vec,
#[serde(default)]
active: usize,
#[serde(default)]
@@ -133,6 +154,7 @@ fn save_persisted(app: &AppHandle) {
zoom_idx: Some(s.zoom_idx),
win: s.win,
tabs: s.tabs.iter().map(|t| t.url.clone()).collect(),
+ colors: s.tabs.iter().map(|t| t.color.clone().unwrap_or_default()).collect(),
active: s.active,
autostart: s.autostart,
}
@@ -333,7 +355,7 @@ fn broadcast(app: &AppHandle) {
.tabs
.iter()
.enumerate()
- .map(|(i, t)| json!({ "label": t.label, "title": t.title, "url": t.url, "loading": t.loading, "active": i == s.active }))
+ .map(|(i, t)| json!({ "label": t.label, "title": t.title, "url": t.url, "loading": t.loading, "active": i == s.active, "color": t.color }))
.collect();
json!({
"tabs": tabs,
@@ -407,7 +429,7 @@ fn create_tab(app: &AppHandle, url: Option, activate: boo
let mut s = shell.lock().unwrap();
let label = format!("tab-{}", s.next_id);
s.next_id += 1;
- s.tabs.push(TabRec { label: label.clone(), title: "Labstream OS".into(), url: target.clone(), loading: true });
+ s.tabs.push(TabRec { label: label.clone(), title: "Labstream OS".into(), url: target.clone(), loading: true, color: None });
label
};
@@ -707,20 +729,35 @@ fn show_app_menu(app: &AppHandle) {
// del webview quedaría recortado). Recuerda en el estado sobre qué pestaña se abrió.
fn show_tab_menu(app: &AppHandle, label: &str) {
let Some(win) = main_window(app) else { return };
- let (idx, total) = {
+ let (idx, total, actual) = {
let shell = app.state::();
let mut s = shell.lock().unwrap();
let Some(i) = s.tabs.iter().position(|t| t.label == label) else { return };
s.menu_tab = Some(label.to_string());
- (i, s.tabs.len())
+ let actual = s.tabs[i].color.clone();
+ (i, s.tabs.len(), actual)
};
+ // Los ids se arman fuera del builder para poder pasarlos como &str (igual que el resto
+ // del menú) en vez de mezclar String y &str en el mismo constructor.
+ let ids: Vec = TAB_COLORS.iter().map(|(id, _)| format!("tab-color-{id}")).collect();
let build = || -> tauri::Result> {
+ // Submenú de color, con marca en el que tiene puesto ahora.
+ let mut colores: Vec> = Vec::with_capacity(TAB_COLORS.len() + 1);
+ colores.push(CheckMenuItem::with_id(app, "tab-color-ninguno", "Sin color", true, actual.is_none(), None::<&str>)?);
+ for ((cid, nombre), id) in TAB_COLORS.iter().zip(ids.iter()) {
+ let marcado = actual.as_deref() == Some(*cid);
+ colores.push(CheckMenuItem::with_id(app, id.as_str(), *nombre, true, marcado, None::<&str>)?);
+ }
+ let refs: Vec<&dyn tauri::menu::IsMenuItem> = colores.iter().map(|c| c as &dyn tauri::menu::IsMenuItem).collect();
+ let submenu = Submenu::with_items(app, "Color", true, &refs)?;
Ok(Menu::with_items(
app,
&[
&MenuItem::with_id(app, "tab-duplicate", "Duplicar pestaña", true, None::<&str>)?,
&MenuItem::with_id(app, "tab-copy-url", "Copiar enlace", true, None::<&str>)?,
&PredefinedMenuItem::separator(app)?,
+ &submenu,
+ &PredefinedMenuItem::separator(app)?,
&MenuItem::with_id(app, "tab-close", "Cerrar pestaña", true, None::<&str>)?,
&MenuItem::with_id(app, "tab-close-others", "Cerrar las demás", total > 1, None::<&str>)?,
&MenuItem::with_id(app, "tab-close-right", "Cerrar las de la derecha", idx + 1 < total, None::<&str>)?,
@@ -767,6 +804,24 @@ fn tab_menu_action(app: &AppHandle, action: &str) {
close_tab(app, &l);
}
}
+ // Teñir la pestaña (o quitarle el color). Se valida contra la paleta: un id que no
+ // esté en TAB_COLORS deja la pestaña sin color en vez de guardar cualquier cosa.
+ a if a.starts_with("tab-color-") => {
+ let elegido = &a["tab-color-".len()..];
+ let nuevo = TAB_COLORS
+ .iter()
+ .find(|(id, _)| *id == elegido)
+ .map(|(id, _)| (*id).to_string());
+ {
+ let shell = app.state::();
+ let mut s = shell.lock().unwrap();
+ if let Some(t) = s.tabs.iter_mut().find(|t| t.label == label) {
+ t.color = nuevo;
+ }
+ }
+ broadcast(app);
+ save_persisted(app);
+ }
_ => {}
}
}
@@ -1076,6 +1131,7 @@ pub fn run() {
id @ ("tab-duplicate" | "tab-copy-url" | "tab-close" | "tab-close-others" | "tab-close-right") => {
tab_menu_action(app, id)
}
+ id if id.starts_with("tab-color-") => tab_menu_action(app, id),
"autostart-toggle" => toggle_autostart(app),
"check-update" => {
#[cfg(desktop)]
@@ -1101,22 +1157,35 @@ pub fn run() {
LogicalSize::new(size.width, TAB_BAR_H),
)?;
- // Pestañas de la sesión anterior (o una nueva si no hay).
- let restore: Vec = {
+ // Pestañas de la sesión anterior (o una nueva si no hay), cada una con su color.
+ // El color se empareja con su URL ANTES de filtrar: el filtro por origen puede
+ // descartar entradas y entonces los índices de las dos listas dejarían de casar.
+ let restore: Vec<(String, String)> = {
let server = Url::parse(SERVER_URL).expect("URL del servidor válida");
saved
.tabs
.iter()
- .filter(|u| Url::parse(u).map(|p| p.origin() == server.origin()).unwrap_or(false))
+ .enumerate()
+ .filter(|(_, u)| Url::parse(u).map(|p| p.origin() == server.origin()).unwrap_or(false))
.take(12)
- .cloned()
+ .map(|(i, u)| (u.clone(), saved.colors.get(i).cloned().unwrap_or_default()))
.collect()
};
if restore.is_empty() {
create_tab(&handle, None, true);
} else {
- for url in &restore {
+ for (url, color) in &restore {
create_tab(&handle, Some(url.clone()), false);
+ if !color.is_empty() {
+ // create_tab acaba de empujar su pestaña al final de la lista.
+ let shell = handle.state::();
+ let mut s = shell.lock().unwrap();
+ if let Some(t) = s.tabs.last_mut() {
+ if t.url == *url {
+ t.color = Some(color.clone());
+ }
+ }
+ }
}
let idx = saved.active.min(restore.len() - 1);
let label = {