Add color/icons/flags to Priority

[stacksjb]

The None/Low/Medium/High priority icons currently are like this:

NONE (P4) LOW (P3) MEDIUM (P2) HIGH (P1)

It would be nice if, on a terminal that supports it, colors were added to match with the official app/format. Either of these options would work:

NONE (P4) ⚫ LOW (P3) 🔵 MEDIUM (P2) 🟠 HIGH (P1) 🔴

(using emojis.. hmm, not a huge fan)

or using ANSI terminal colors and/or using the flag/penant icon, would look more like this (my favorite)

[stacksjb]

if we wanted to get reaaaally fancy, we could leave off the flag icon and the color, and only highlight the flag on the row selected... but that kind of defeats the purpose of showing the three colors (which helps me more quickly pivot to the exact priority needed without having to read them), unless we did option two.

[alanvardy]

I've noticed that I have to stare at them for a split second to grok their meaning every time too. Sounds like a good improvement.

[stacksjb]

This is possible with custom RenderConfig. It's a bit more work and probably not ideal for all the menu items, but I think for P1/P2/P3/P4 it would make sense. Here's an example code for how it would work with a custom renderconfig:

use inquire::{Select, ui::{RenderConfig, Color, StyleSheet, Attributes}};
use inquire::validator::Validation;

fn main() {
    // Define custom styles for each menu option
    let none_style = StyleSheet::new()
        .with_fg(Color::LightWhite)
        .with_attr(Attributes::Bold);
    let low_style = StyleSheet::new()
        .with_fg(Color::LightBlue)
        .with_attr(Attributes::Bold);
    let medium_style = StyleSheet::new()
        .with_fg(Color::LightYellow)
        .with_attr(Attributes::Bold);
    let high_style = StyleSheet::new()
        .with_fg(Color::LightRed)
        .with_attr(Attributes::Bold);

    // Configure the render config with custom styles
    let render_config = RenderConfig::default()
        .with_custom_option_renderer(|option, _cursor_position, _selected| {
            match option {
                "NONE (P4)" => none_style.clone(),
                "LOW (P3)" => low_style.clone(),
                "MEDIUM (P2)" => medium_style.clone(),
                "HIGH (P1)" => high_style.clone(),
                _ => StyleSheet::default(),
            }
        });

    // Define the menu options
    let options = vec!["NONE (P4)", "LOW (P3)", "MEDIUM (P2)", "HIGH (P1)"];

    // Create the Select prompt with the custom render config
    let ans = Select::new("Choose an option:", options)
        .with_render_config(render_config)
        .prompt();

    match ans {
        Ok(selection) => println!("You chose: {}", selection),
        Err(_) => println!("There was an error with the selection"),
    }
}

Not sure if this is compatible with existing code though, if you are using colored that may overwrite things?

[alanvardy]

This is cool, I'll try it out.