feat(ui): tweak simplified UI (#1458)

* fix(ui): tweak simplified-ui tabs

* fix(ui): tweak simplified-ui status bar

* style(fmt): rustfmt

3 files changed, 35 insertions, 4 deletions

diff --git a/default-plugins/compact-bar/src/line.rs b/default-plugins/compact-bar/src/line.rs
index 71d3974e..077dbbd1 100644
--- a/default-plugins/compact-bar/src/line.rs
+++ b/default-plugins/compact-bar/src/line.rs
@@ -207,7 +207,7 @@ fn tab_line_prefix(
     };
     if cols.saturating_sub(prefix_text_len) >= mode_part_len {
         parts.push(LinePart {
-            part: format!("{} ", mode_part_styled_text),
+            part: format!("{}", mode_part_styled_text),
             len: mode_part_len,
         })
     }
diff --git a/default-plugins/compact-bar/src/main.rs b/default-plugins/compact-bar/src/main.rs
index 3e5e4a18..3e875a26 100644
--- a/default-plugins/compact-bar/src/main.rs
+++ b/default-plugins/compact-bar/src/main.rs
@@ -75,6 +75,7 @@ impl ZellijPlugin for State {
         }
         let mut all_tabs: Vec<LinePart> = vec![];
         let mut active_tab_index = 0;
+        let mut is_alternate_tab = false;
         for t in &mut self.tabs {
             let mut tabname = t.name.clone();
             if t.active && self.mode_info.mode == InputMode::RenameTab {
@@ -88,11 +89,13 @@ impl ZellijPlugin for State {
             let tab = tab_style(
                 tabname,
                 t.active,
+                is_alternate_tab,
                 t.is_sync_panes_active,
                 self.mode_info.style.colors,
                 self.mode_info.capabilities,
                 t.other_focused_clients.as_slice(),
             );
+            is_alternate_tab = !is_alternate_tab;
             all_tabs.push(tab);
         }
         let tab_line = tab_line(
diff --git a/default-plugins/compact-bar/src/tab.rs b/default-plugins/compact-bar/src/tab.rs
index 99348962..080b587b 100644
--- a/default-plugins/compact-bar/src/tab.rs
+++ b/default-plugins/compact-bar/src/tab.rs
@@ -23,14 +23,28 @@ pub fn render_tab(
     separator: &str,
     focused_clients: &[ClientId],
     active: bool,
+    is_alternate_tab: bool,
 ) -> LinePart {
-    let background_color = if active { palette.green } else { palette.fg };
+    let separator_width = separator.width();
+    let alternate_tab_color = match palette.theme_hue {
+        // TODO: only do this if we don't have the arrow capabilities
+        ThemeHue::Dark => palette.white,
+        ThemeHue::Light => palette.black,
+    };
+    let background_color = if active {
+        palette.green
+    } else if is_alternate_tab {
+        alternate_tab_color
+    } else {
+        palette.fg
+    };
     let foreground_color = match palette.theme_hue {
         ThemeHue::Dark => palette.black,
         ThemeHue::Light => palette.white,
     };
     let left_separator = style!(foreground_color, background_color).paint(separator);
-    let mut tab_text_len = text.width() + 2 + separator.width() * 2; // 2 for left and right separators, 2 for the text padding
+    let mut tab_text_len =
+        text.width() + (separator_width * 2) + separator.width() * (separator_width * 2); // 2 for left and right separators, 2 for the text padding
 
     let tab_styled_text = style!(foreground_color, background_color)
         .bold()
@@ -70,6 +84,7 @@ pub fn render_tab(
 pub fn tab_style(
     text: String,
     is_active_tab: bool,
+    is_alternate_tab: bool,
     is_sync_panes_active: bool,
     palette: Palette,
     capabilities: PluginCapabilities,
@@ -80,5 +95,18 @@ pub fn tab_style(
     if is_sync_panes_active {
         tab_text.push_str(" (Sync)");
     }
-    render_tab(tab_text, palette, separator, focused_clients, is_active_tab)
+    // we only color alternate tabs differently if we can't use the arrow fonts to separate them
+    let is_alternate_tab = if !capabilities.arrow_fonts {
+        false
+    } else {
+        is_alternate_tab
+    };
+    render_tab(
+        tab_text,
+        palette,
+        separator,
+        focused_clients,
+        is_active_tab,
+        is_alternate_tab,
+    )
 }