Fix scrollbar style

Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "passepartui"
 description = "A TUI for pass"
-version = "0.1.2"
+version = "0.1.3"
 edition = "2021"
 authors = ["Karl Felix Schewe"]
 readme = "README.md"

README.md

@@ -10,7 +10,7 @@ I started this project as a way to practice programming in Rust while reading th
 Therefore this project is still in an alpha version, however user interaction is mostly finished.
 
 `passepartui` relies for all decryption operations on [pass](https://www.passwordstore.org/), one-time passwords (OTP) are handled by [`pass-otp`](https://github.com/tadfisher/pass-otp).
-Currently no functionality for manipulating the password store, e.g. adding or deleting a password, is implemented. For those operations use  `pass` directly from your terminal (refer to `man pass`).
+Currently no functionality for manipulating the password store, e.g. adding or deleting a password, is implemented. For those operations use `pass` directly from your terminal (refer to `man pass`).
 More on the current state of development can be found below.
 
 The name `passepartui` is a combination of "passepartout", French for "master key", and "TUI".
@@ -43,7 +43,7 @@ Type `passepartui` to run the app (provided that `~/.cargo/bin` has been added t
 
 ### Manual installation
 
-Clone the repository and change to it:
+Clone the repository and change to the directory:
 
 ```sh
 git clone [email protected]:kardwen/passepartui.git

src/components/password_table.rs

@@ -1,7 +1,7 @@
 use ratatui::{
     buffer::Buffer,
     crossterm::event::{MouseButton, MouseEvent, MouseEventKind},
-    layout::{Constraint, Position, Rect},
+    layout::{Constraint, Layout, Position, Rect},
     style::{Modifier, Style, Stylize},
     text::{Line, Span, Text},
     widgets::{
@@ -27,8 +27,8 @@ pub struct PasswordTable<'a> {
     scrollbar: Scrollbar<'a>,
     scrollbar_state: ScrollbarState,
     area: Option<Rect>,
-    content_area: Option<Rect>,
-    scrollbar_area: Option<Rect>,
+    mouse_content_area: Option<Rect>,
+    mouse_scrollbar_area: Option<Rect>,
 }
 
 impl<'a> PasswordTable<'a> {
@@ -40,7 +40,14 @@ impl<'a> PasswordTable<'a> {
         let scrollbar_state = ScrollbarState::new(length);
         let scrollbar = Scrollbar::default()
             .orientation(ScrollbarOrientation::VerticalRight)
-            .begin_symbol(None)
+            .begin_style(Style::new().bg(theme.table_header_bg))
+            .track_style(
+                Style::new()
+                    .fg(theme.table_track_fg)
+                    .bg(theme.table_track_bg),
+            )
+            .thumb_style(Style::new().fg(theme.standard_fg).bg(theme.standard_bg))
+            .begin_symbol(Some(" "))
             .end_symbol(None);
         Self {
             theme,
@@ -51,8 +58,8 @@ impl<'a> PasswordTable<'a> {
             scrollbar,
             scrollbar_state,
             area: None,
-            content_area: None,
-            scrollbar_area: None,
+            mouse_content_area: None,
+            mouse_scrollbar_area: None,
         }
     }
 
@@ -192,36 +199,36 @@ impl<'a> PasswordTable<'a> {
         self.table_state.selected()
     }
 
-    pub fn scrollbar_area(&self) -> Option<Rect> {
-        self.scrollbar_area
+    pub fn mouse_scrollbar_area(&self) -> Option<Rect> {
+        self.mouse_scrollbar_area
     }
 }
 
 impl<'a> Widget for &mut PasswordTable<'a> {
     fn render(self, area: Rect, buf: &mut Buffer) {
         self.area = Some(area);
 
-        // Exclude header (height: 1) and scrollbar_area plus tolerance from content_area
-        let content_area = Rect {
+        let layout = Layout::horizontal([Constraint::Min(1), Constraint::Length(1)]).split(area);
+
+        // Calculate areas for mouse interaction
+        let mouse_content_area = Rect {
             x: area.x,
             y: area.y + 1,
             width: area.width.saturating_sub(8),
             height: area.height.saturating_sub(1),
         };
-        let scrollbar_area_width = 8;
-        let scrollbar_area = Rect {
-            x: area.width.saturating_sub(scrollbar_area_width),
-            width: scrollbar_area_width,
-            ..content_area
+        let mouse_scrollbar_area = Rect {
+            x: area.width.saturating_sub(8),
+            width: 8,
+            ..mouse_content_area
         };
-        self.content_area = Some(content_area);
-        self.scrollbar_area = Some(scrollbar_area);
-
-        StatefulWidget::render(&self.table, area, buf, &mut self.table_state);
+        self.mouse_content_area = Some(mouse_content_area);
+        self.mouse_scrollbar_area = Some(mouse_scrollbar_area);
 
+        StatefulWidget::render(&self.table, layout[0], buf, &mut self.table_state);
         self.scrollbar
             .clone()
-            .render(scrollbar_area, buf, &mut self.scrollbar_state);
+            .render(layout[1], buf, &mut self.scrollbar_state);
     }
 }
 
@@ -230,7 +237,7 @@ impl<'a> MouseSupport for PasswordTable<'a> {
         let position = Position::new(event.column, event.row);
 
         // Mouse position on password table contents
-        if let Some(area) = self.content_area {
+        if let Some(area) = self.mouse_content_area {
             if area.contains(position) {
                 return match event.kind {
                     MouseEventKind::Down(MouseButton::Left) => {
@@ -246,7 +253,7 @@ impl<'a> MouseSupport for PasswordTable<'a> {
         }
 
         // Mouse position on the scrollbar
-        if let Some(area) = self.scrollbar_area {
+        if let Some(area) = self.mouse_scrollbar_area {
             if area.contains(position) {
                 return match event.kind {
                     MouseEventKind::Down(MouseButton::Left)

src/theme.rs

@@ -32,6 +32,8 @@ pub struct Theme {
     pub table_selected_cell_style_fg: Color,
     pub table_selected_column_style_fg: Color,
     pub table_selected_row_style_fg: Color,
+    pub table_track_bg: Color,
+    pub table_track_fg: Color,
 }
 
 impl Theme {
@@ -68,6 +70,8 @@ impl Theme {
             table_selected_cell_style_fg: tailwind::BLUE.c600,
             table_selected_column_style_fg: tailwind::BLUE.c400,
             table_selected_row_style_fg: tailwind::BLUE.c400,
+            table_track_bg: tailwind::SLATE.c800,
+            table_track_fg: tailwind::SLATE.c400,
         }
     }
 }