feat(plugins): add configurable black background for ui components (#3681)

* feat(plugins): add transparent background for text and nested_list

* chore: fix formatting issue

* feat: invert flag behaviour

* feat: implement bg_black handling for table cells

* fix: order of selected and bg_black in protocol

* chore: rename from bg_black to opaque

* fix: explicit selected, if opaque and selected for text

* chore: fix formatting issues

* feat: opaque tab-bar

* feat: opaque session-manager bars

* feat: opaque ribbon in plugin manager

* feat: opaque one-line ui

* feat: opaque tab-bar in configuration plugin

2 files changed, 34 insertions, 4 deletions

diff --git a/default-plugins/session-manager/src/main.rs b/default-plugins/session-manager/src/main.rs
index 9aebb6df..3d4848af 100644
--- a/default-plugins/session-manager/src/main.rs
+++ b/default-plugins/session-manager/src/main.rs
@@ -122,10 +122,21 @@ impl ZellijPlugin for State {
     fn render(&mut self, rows: usize, cols: usize) {
         let (x, y, width, height) = self.main_menu_size(rows, cols);
 
+        let background = match self.colors.palette.theme_hue {
+            ThemeHue::Dark => self.colors.palette.black,
+            ThemeHue::Light => self.colors.palette.white,
+        };
+
         if self.is_welcome_screen {
             render_banner(x, 0, rows.saturating_sub(height), width);
         }
-        render_screen_toggle(self.active_screen, x, y, width.saturating_sub(2));
+        render_screen_toggle(
+            self.active_screen,
+            x,
+            y,
+            width.saturating_sub(2),
+            &background,
+        );
 
         match self.active_screen {
             ActiveScreen::NewSession => {
diff --git a/default-plugins/session-manager/src/ui/components.rs b/default-plugins/session-manager/src/ui/components.rs
index 5c265f54..8bc09c24 100644
--- a/default-plugins/session-manager/src/ui/components.rs
+++ b/default-plugins/session-manager/src/ui/components.rs
@@ -507,10 +507,22 @@ pub fn minimize_lines(
 pub fn render_prompt(search_term: &str, colors: Colors, x: usize, y: usize) {
     let prompt = colors.green(&format!("Search:"));
     let search_term = colors.bold(&format!("{}_", search_term));
-    println!("\u{1b}[{};{}H{} {}\n", y + 1, x, prompt, search_term);
+    println!(
+        "\u{1b}[{};{}H\u{1b}[0m{} {}\n",
+        y + 1,
+        x,
+        prompt,
+        search_term
+    );
 }
 
-pub fn render_screen_toggle(active_screen: ActiveScreen, x: usize, y: usize, max_cols: usize) {
+pub fn render_screen_toggle(
+    active_screen: ActiveScreen,
+    x: usize,
+    y: usize,
+    max_cols: usize,
+    background: &PaletteColor,
+) {
     let key_indication_text = "<TAB>";
     let (new_session_text, running_sessions_text, exited_sessions_text) = if max_cols > 66 {
         ("New Session", "Attach to Session", "Resurrect Session")
@@ -520,10 +532,12 @@ pub fn render_screen_toggle(active_screen: ActiveScreen, x: usize, y: usize, max
     let key_indication_len = key_indication_text.chars().count() + 1;
     let first_ribbon_length = new_session_text.chars().count() + 4;
     let second_ribbon_length = running_sessions_text.chars().count() + 4;
+    let third_ribbon_length = exited_sessions_text.chars().count() + 4;
     let key_indication_x = x;
     let first_ribbon_x = key_indication_x + key_indication_len;
     let second_ribbon_x = first_ribbon_x + first_ribbon_length;
     let third_ribbon_x = second_ribbon_x + second_ribbon_length;
+    let reset_x = third_ribbon_x + third_ribbon_length + 1;
     let mut new_session_text = Text::new(new_session_text);
     let mut running_sessions_text = Text::new(running_sessions_text);
     let mut exited_sessions_text = Text::new(exited_sessions_text);
@@ -538,13 +552,18 @@ pub fn render_screen_toggle(active_screen: ActiveScreen, x: usize, y: usize, max
             exited_sessions_text = exited_sessions_text.selected();
         },
     }
+    let bg_color = match background {
+        PaletteColor::Rgb((r, g, b)) => format!("\u{1b}[48;2;{};{};{}m\u{1b}[0K", r, g, b),
+        PaletteColor::EightBit(color) => format!("\u{1b}[48;5;{}m\u{1b}[0K", color),
+    };
     print_text_with_coordinates(
-        Text::new(key_indication_text).color_range(3, ..),
+        Text::new(key_indication_text).color_range(3, ..).opaque(),
         key_indication_x,
         y,
         None,
         None,
     );
+    println!("\u{1b}[{};{}H{}", y + 1, first_ribbon_x, bg_color);
     print_ribbon_with_coordinates(new_session_text, first_ribbon_x, y, None, None);
     print_ribbon_with_coordinates(running_sessions_text, second_ribbon_x, y, None, None);
     print_ribbon_with_coordinates(exited_sessions_text, third_ribbon_x, y, None, None);