improve scrolling

src/app.rs

@@ -1,5 +1,6 @@
 use color_eyre::eyre::Result;
 use crossterm::event::KeyCode;
+use ratatui::widgets::ListState;
 use reqwest::Client;
 use std::error;
 
@@ -15,10 +16,10 @@ pub struct App {
     pub client: Client,
     pub previous_key: KeyCode,
     pub stories: Vec<Story>,
-    pub cursor: usize,
     pub page: usize,
-    pub scroll: usize,
     pub notifications: Vec<Notification>,
+    pub state: ListState,
+    pub window_height: usize,
 }
 
 #[derive(Debug)]
@@ -50,15 +51,21 @@ impl App {
 
         let stories = App::parse(response).unwrap();
 
+        let mut state = ListState::default();
+
+        if !stories.is_empty() {
+            state.select(Some(0));
+        }
+
         Ok(Self {
             running: true,
             client,
             previous_key: KeyCode::Null,
             stories,
-            cursor: 0,
             page: 1,
-            scroll: 0,
             notifications: Vec::new(),
+            state,
+            window_height: 0,
         })
     }
 
@@ -155,7 +162,7 @@ impl App {
     }
 
     pub fn open(&mut self) -> Result<()> {
-        let story = &self.stories[self.cursor];
+        let story = &self.stories[self.state.selected().unwrap()];
         open::that(&story.link)?;
         Ok(())
     }

src/handler.rs

@@ -24,23 +24,51 @@ pub async fn handle_key_events(
         }
 
         KeyCode::Char('G') => {
-            app.cursor = app.stories.len() - 1;
+            *app.state.offset_mut() = (app.stories.len() - 1).saturating_sub(app.window_height);
+            app.state.select(Some(app.stories.len() - 1));
         }
 
         KeyCode::Char('g') => {
             if app.previous_key == KeyCode::Char('g') {
-                app.cursor = 0;
+                *app.state.offset_mut() = 0;
+                app.state.select(Some(0));
             }
         }
 
         KeyCode::Char('j') | KeyCode::Down => {
-            if app.cursor < app.stories.len() - 1 {
-                app.cursor = app.cursor.saturating_add(1);
-            }
+            let i = match app.state.selected() {
+                Some(i) => {
+                    if i < app.window_height {
+                        i + 1
+                    } else if i == app.window_height - 1 {
+                        *app.state.offset_mut() += 1;
+                        i + 1
+                    } else {
+                        i
+                    }
+                }
+                None => 0,
+            };
+
+            app.state.select(Some(i));
         }
 
         KeyCode::Char('k') | KeyCode::Up => {
-            app.cursor = app.cursor.saturating_sub(1);
+            let i = match app.state.selected() {
+                Some(i) => {
+                    if i > app.state.offset() {
+                        i - 1
+                    } else if i == app.state.offset() && app.state.offset() > 0 {
+                        *app.state.offset_mut() -= 1;
+                        i - 1
+                    } else {
+                        0
+                    }
+                }
+                None => 0,
+            };
+
+            app.state.select(Some(i));
         }
 
         KeyCode::Char('r') => {
@@ -58,7 +86,7 @@ pub async fn handle_key_events(
                 sender.send(Event::Notification(notif)).unwrap();
                 app.page = app.page.saturating_sub(1);
             }
-            app.cursor = 0;
+            app.state.select(Some(0));
         }
 
         KeyCode::Char('p') => {
@@ -70,7 +98,7 @@ pub async fn handle_key_events(
                     sender.send(Event::Notification(notif)).unwrap();
                     app.page = app.page.saturating_add(1);
                 }
-                app.cursor = 0;
+                app.state.select(Some(0));
             }
         }
 

src/ui.rs

@@ -1,5 +1,3 @@
-use std::usize;
-
 use ratatui::{
     layout::{Alignment, Constraint, Direction, Layout, Rect},
     style::{Color, Modifier, Style},
@@ -41,7 +39,7 @@ pub fn render(app: &mut App, frame: &mut Frame) {
         let chunks = Layout::default()
             .direction(Direction::Vertical)
             .constraints([Constraint::Min(1), Constraint::Length(3)].as_ref())
-            .split(frame.size());
+            .split(frame.area());
         (chunks[0], chunks[1])
     };
 
@@ -51,11 +49,14 @@ pub fn render(app: &mut App, frame: &mut Frame) {
         .wrap(Wrap { trim: true });
 
     // Body
+
+    // 2 because two lines for an item list
+    app.window_height = body_block.height as usize / 2;
+
     let items: Vec<ListItem> = app
         .stories
         .iter()
-        .enumerate()
-        .map(|(i, story)| {
+        .map(|story| {
             let first_line = vec![
                 Span::styled(" ▲ ", Style::default().fg(Color::Gray)),
                 Span::styled(
@@ -96,28 +97,16 @@ pub fn render(app: &mut App, frame: &mut Frame) {
                 Line::from(""),
             ]);
 
-            if app.cursor == i {
-                return item.style(Style::default().bg(Color::DarkGray));
-            }
-
             item
         })
         .collect();
 
-    let mut scroll = 0;
-
-    let body_block_height = body_block.height as usize - 3;
-    let items_length = items.len() * 3;
-
-    if body_block_height < items_length && app.cursor > body_block_height / 3 {
-        scroll = app.cursor - body_block_height / 3;
-    }
-
-    let list = List::new(items.as_slice()[scroll..].to_vec())
+    let list = List::new(items.to_vec())
+        .highlight_style(Style::new().bg(Color::DarkGray))
         .block(Block::default())
-        .style(Style::default().fg(Color::White));
+        .style(Style::default());
 
-    frame.render_widget(list, body_block);
+    frame.render_stateful_widget(list, body_block, &mut app.state);
     frame.render_widget(footer, footer_block);
 
     // Notifs
@@ -157,7 +146,7 @@ pub fn render(app: &mut App, frame: &mut Frame) {
             height
         };
 
-        let area = notification_rect(i as u16, notification_height, frame.size());
+        let area = notification_rect(i as u16, notification_height, frame.area());
 
         frame.render_widget(Clear, area);
         frame.render_widget(block, area);