Merge pull request #15 from josueBarretogit/tui-widget-list-improve-appeareance

improved appearance of application

Author: josueBarretogit

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "get-blessed"
-version = "0.2.0"
+version = "0.2.1"
 edition = "2021"
 authors = ["Josue <[email protected]>"]
 readme = "README.md"
@@ -28,3 +28,4 @@ throbber-widgets-tui = "0.5.0"
 tokio = { version = "1.37.0", features = ["macros", "rt-multi-thread"] }
 crates_io_api = "0.11.0"
 type_utilities = { version = "0.1.2", features = ["bool"] } 
+tui-widget-list = "0.9.0"

Cargo.toml

@@ -64,7 +64,7 @@ pub struct Features {
 #[derive(Default)]
 pub struct CratesList {
     widget: CratesListWidget,
-    state: ListState,
+    state: tui_widget_list::ListState,
 }
 
 ///This struct holds the list of crates to be added to user's project
@@ -404,31 +404,11 @@ impl App {
     }
 
     pub fn scroll_down(&mut self) {
-        let next = match self.crates_list.state.selected() {
-            Some(index) => {
-                if index == self.crates_list.widget.crates.len().saturating_sub(1) {
-                    0
-                } else {
-                    index.saturating_add(1)
-                }
-            }
-            None => self.crates_list.state.selected().unwrap_or(0),
-        };
-        self.crates_list.state.select(Some(next));
+        self.crates_list.state.next();
     }
 
     pub fn scroll_up(&mut self) {
-        let next_index = match self.crates_list.state.selected() {
-            Some(index) => {
-                if index == 0 {
-                    self.crates_list.widget.crates.len().saturating_sub(1)
-                } else {
-                    index.saturating_sub(1)
-                }
-            }
-            None => 1,
-        };
-        self.crates_list.state.select(Some(next_index));
+        self.crates_list.state.previous();
     }
 
     pub fn scroll_up_features(&mut self) {
@@ -514,14 +494,14 @@ impl App {
     }
 
     pub fn get_current_crate_selected(&self) -> Option<(CrateItemList, usize)> {
-        self.crates_list.state.selected().map(|index| {
+        self.crates_list.state.selected.map(|index| {
             let crate_item = self.crates_list.widget.crates[index].clone();
             (crate_item, index)
         })
     }
 
     pub fn toggle_select_dependencie(&mut self) {
-        if let Some(index_crate_selected) = self.crates_list.state.selected() {
+        if let Some(index_crate_selected) = self.crates_list.state.selected {
             match self.crate_categories.widget {
                 CategoriesWidget::Clis => {
                     toggle_status_one_crate(&mut self.clis_crates[index_crate_selected]);
@@ -570,7 +550,7 @@ impl App {
     }
 
     pub fn check_docs(&self) {
-        if let Some(index_selected) = self.crates_list.state.selected() {
+        if let Some(index_selected) = self.crates_list.state.selected {
             let crate_name = &self.crates_list.widget.crates[index_selected].name;
             let url = format!("https://docs.rs/{crate_name}/latest/{crate_name}/");
 
@@ -579,7 +559,7 @@ impl App {
     }
 
     pub fn check_crates_io(&self) {
-        if let Some(index_selected) = self.crates_list.state.selected() {
+        if let Some(index_selected) = self.crates_list.state.selected {
             let url = format!(
                 "https://crates.io/crates/{}",
                 self.crates_list.widget.crates[index_selected].name

src/view/app.rs

@@ -3,14 +3,18 @@ use ratatui::{
     style::{palette::tailwind, Style},
     widgets::{
         block::{Block, Padding, Position, Title},
-        HighlightSpacing, List, ListDirection, ListItem, ListState, Paragraph, StatefulWidgetRef,
+        Borders,  List, ListDirection, ListItem, ListState, Paragraph,
+        StatefulWidgetRef, Wrap,
     },
 };
 use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
 use throbber_widgets_tui::{Throbber, ThrobberState};
+use tui_widget_list::PreRender;
 
 use crate::dependency_builder::CrateToAdd;
 
+use self::style::Stylize;
+
 #[derive(Debug, Default, Clone, PartialEq, Eq, PartialOrd, Ord)]
 pub enum ItemListStatus {
     Selected,
@@ -117,7 +121,14 @@ impl From<FeatureItemList> for ListItem<'_> {
             ItemListStatus::Unselected => ("☐", Color::default()),
         };
 
-        let line = Line::from(vec![value.name.into(), " ".into(), is_selected.into()]);
+        let line = match value.status {
+            ItemListStatus::Selected => {
+                Line::from(vec![value.name.black(), " ".into(), is_selected.black()])
+            }
+            ItemListStatus::Unselected => {
+                Line::from(vec![value.name.into(), " ".into(), is_selected.into()])
+            }
+        };
 
         ListItem::new(line).style(Style::default().bg(bg_color))
     }
@@ -169,7 +180,6 @@ impl StatefulWidgetRef for FeaturesWidgetList {
         match &self.features {
             Some(features) => {
                 let features_list = List::new(features.clone())
-                    .highlight_style(Style::default().blue())
                     .highlight_symbol(">> ")
                     .direction(ListDirection::TopToBottom);
 
@@ -212,9 +222,52 @@ pub struct CrateItemList {
     pub description: String,
     pub features: Option<Vec<FeatureItemList>>,
     pub status: ItemListStatus,
+    pub highlight_style: String,
     pub is_loading: bool,
 }
 
+impl ratatui::widgets::Widget for CrateItemList {
+    fn render(self, area: Rect, buf: &mut Buffer)
+    where
+        Self: Sized,
+    {
+        let layout = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints([Constraint::Fill(1), Constraint::Fill(4)]);
+
+        let [name_area, description_area] = layout.areas(area);
+
+        let (is_selected, bg_color) = match self.status {
+            ItemListStatus::Selected => ("✓", tailwind::BLUE.c300),
+            ItemListStatus::Unselected => ("☐", Color::default()),
+        };
+
+        let name = format!("{} {} {}", self.highlight_style, self.name, is_selected);
+
+        name.bold().blue().render(name_area, buf);
+
+        let description = match self.status {
+            ItemListStatus::Unselected => self.description.into(),
+            ItemListStatus::Selected => self.description.black(),
+        };
+
+        Paragraph::new(description)
+            .block(Block::default().borders(Borders::BOTTOM))
+            .style(Style::new().bg(bg_color))
+            .wrap(Wrap { trim: true })
+            .render(description_area, buf);
+    }
+}
+
+impl PreRender for CrateItemList {
+    fn pre_render(&mut self, context: &tui_widget_list::PreRenderContext) -> u16 {
+        if context.is_selected {
+            self.highlight_style = ">>".to_string();
+        }
+        4
+    }
+}
+
 #[derive(Clone, Default)]
 pub struct CratesToAddListWidget {
     pub crates: Vec<CrateToAdd>,
@@ -263,6 +316,7 @@ impl CrateItemList {
             features,
             status,
             is_loading: true,
+            highlight_style: String::default(),
         }
     }
 }
@@ -292,16 +346,9 @@ impl From<CrateItemList> for ListItem<'_> {
 }
 
 impl StatefulWidgetRef for CratesListWidget {
-    type State = ListState;
+    type State = tui_widget_list::ListState;
     fn render_ref(&self, area: Rect, buf: &mut Buffer, state: &mut Self::State) {
-        let block = Block::default().padding(Padding::uniform(1));
-
-        let list = List::new(self.crates.clone())
-            .block(block)
-            .highlight_style(Style::default())
-            .highlight_symbol(">> ")
-            .highlight_spacing(HighlightSpacing::Always)
-            .direction(ListDirection::TopToBottom);
+        let list = tui_widget_list::List::new(self.crates.clone());
 
         StatefulWidget::render(list, area, buf, state);
     }
@@ -333,7 +380,9 @@ impl<'a> Widget for FooterInstructions<'a> {
     {
         let instructions = Title::from(Line::from(self.instructions));
 
-        let info = Title::from(Line::from(vec!["V0.2.0".into()]))
+        let curret_version = format!("V{}", env!("CARGO_PKG_VERSION"));
+
+        let info = Title::from(Line::from(vec![curret_version.into()]))
             .position(Position::Top)
             .alignment(Alignment::Right);