Skip to content

fix(ui): restore inset Help scrollbar and scroll-hint title #460

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
domcyrus merged 1 commit into from
Jul 10, 2026
Merged

fix(ui): restore inset Help scrollbar and scroll-hint title #460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 49 additions & 49 deletions src/ui/snapshots/rustnet_monitor__ui__snapshot_tests__help_tab.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,53 @@
source: src/ui/mod.rs
expression: output
---
╭Help──────────────────────────────────────────────────────────────────────────────────────────────╮
│RustNet Monitor - Network Connection Monitor █
│ █
│q Quit application (press twice to confirm) █
│Ctrl+C Quit immediately █
│x Clear all connections (press twice to confirm) █
│Tab, ] Next tab █
│Shift+Tab, [ Previous tab █
│1-5 Jump directly to a tab (1=Overview, 2=Details, 3=Interfaces, 4=Graph, 5=Help) █
│↑/k, ↓/j Navigate connections (wraps around) █
│g, G Jump to first/last connection (vim-style) █
│Page Up/Down, Ctrl+B/F Navigate connections by page █
│Ctrl+D/U Scroll the Details info panes █
│c Copy remote address to clipboard █
│p Toggle between service names and port numbers █
│d Toggle between hostnames and IP addresses (when --resolve-dns) █
│s Cycle through sort columns (Bandwidth, Process, etc.) █
│S Toggle sort direction (ascending/descending) █
│a Toggle process grouping (aggregate by process) █
│Space Expand/collapse group (when grouping enabled) █
│←/→ or h/l Collapse/expand group █
│t Toggle display of historic (closed) connections █
│i Toggle the System info sidebar █
│r Reset view (grouping, sort, filter) █
│Enter View connection details █
│Esc Return to overview █
│h Toggle this help screen █
│/ Enter filter mode on Overview (use ↑/↓ to navigate while typing) █
│ █
│Tabs: █
│Overview Connection list with mini traffic graph █
│Details Full details for selected connection █
│Interfaces Network interface statistics █
│Graph Traffic charts and protocol distribution █
│Help This help screen █
│ █
│Mouse Controls: █
│Click tab Switch between tabs █
│Click row Select connection █
│Scroll wheel Navigate connection list / scroll Details, Interfaces, Help █
│Double-click row Open connection details █
│Double-click group Expand/collapse process group ║
│Click field (Details) Copy field value to clipboard ║
│ ║
│Connection Colors: ║
│White Active connection (< 75% of timeout) ║
│Yellow Stale connection (75-90% of timeout) ║
│Red Critical - will be removed soon (> 90% of timeout) ║
│ ║
╭Help · ↑/↓ scroll─────────────────────────────────────────────────────────────────────────────────╮
│RustNet Monitor - Network Connection Monitor █│
│ █│
│q Quit application (press twice to confirm) █│
│Ctrl+C Quit immediately █│
│x Clear all connections (press twice to confirm) █│
│Tab, ] Next tab █│
│Shift+Tab, [ Previous tab █│
│1-5 Jump directly to a tab (1=Overview, 2=Details, 3=Interfaces, 4=Graph, 5=Help) █│
│↑/k, ↓/j Navigate connections (wraps around) █│
│g, G Jump to first/last connection (vim-style) █│
│Page Up/Down, Ctrl+B/F Navigate connections by page █│
│Ctrl+D/U Scroll the Details info panes █│
│c Copy remote address to clipboard █│
│p Toggle between service names and port numbers █│
│d Toggle between hostnames and IP addresses (when --resolve-dns) █│
│s Cycle through sort columns (Bandwidth, Process, etc.) █│
│S Toggle sort direction (ascending/descending) █│
│a Toggle process grouping (aggregate by process) █│
│Space Expand/collapse group (when grouping enabled) █│
│←/→ or h/l Collapse/expand group █│
│t Toggle display of historic (closed) connections █│
│i Toggle the System info sidebar █│
│r Reset view (grouping, sort, filter) █│
│Enter View connection details █│
│Esc Return to overview █│
│h Toggle this help screen █│
│/ Enter filter mode on Overview (use ↑/↓ to navigate while typing) █│
│ █│
│Tabs: █│
│Overview Connection list with mini traffic graph █│
│Details Full details for selected connection █│
│Interfaces Network interface statistics █│
│Graph Traffic charts and protocol distribution █│
│Help This help screen █│
│ █│
│Mouse Controls: █│
│Click tab Switch between tabs █│
│Click row Select connection █│
│Scroll wheel Navigate connection list / scroll Details, Interfaces, Help █│
│Double-click row Open connection details █│
│Double-click group Expand/collapse process group ║│
│Click field (Details) Copy field value to clipboard ║│
│ ║│
│Connection Colors: ║│
│White Active connection (< 75% of timeout) ║│
│Yellow Stale connection (75-90% of timeout) ║│
│Red Critical - will be removed soon (> 90% of timeout) ║│
│ ║│
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
47 changes: 36 additions & 11 deletions src/ui/tabs/help.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@
//! `UIState::help_scroll`.

use anyhow::Result;
use crossterm::event::{KeyEvent, MouseEvent};
use crossterm::event::{KeyEvent, MouseEvent, MouseEventKind};
use ratatui::{
Frame,
layout::Rect,
style::Style,
text::{Line, Span},
widgets::{Paragraph, Wrap},
widgets::{Padding, Paragraph, Wrap},
};

use crate::ui::{
ClickableRegions, Component, ComponentContext, Effect, HandlerContext, UIState, panel_block,
theme, try_handle_pane_scroll, try_handle_pane_wheel, widgets::scrollbar::draw_scrollbar,
theme, try_handle_pane_scroll, widgets::scrollbar::draw_scrollbar,
};

/// Help tab. Zero-sized — the scroll offset it responds to lives in
Expand Down Expand Up @@ -45,7 +45,17 @@ impl Component for HelpTab {
mouse: MouseEvent,
ctx: &mut HandlerContext<'_>,
) -> Option<Vec<Effect>> {
try_handle_pane_wheel(mouse, &mut ctx.ui_state.help_scroll)
// Three lines per wheel tick: the Help text is a long static
// page, so the single-line step shared by the data panes feels
// sluggish here.
const WHEEL_STEP: u16 = 3;
let scroll = &mut ctx.ui_state.help_scroll;
match mouse.kind {
MouseEventKind::ScrollUp => scroll.scroll_up(WHEEL_STEP),
MouseEventKind::ScrollDown => scroll.scroll_down(WHEEL_STEP),
_ => return None,
}
Some(Vec::new())
}
}

Expand Down Expand Up @@ -269,27 +279,42 @@ pub(in crate::ui) fn draw_help(f: &mut Frame, ui_state: &UIState, area: Rect) ->
// larger, but staying off the unstable rendered-line-info APIs is
// worth the last row or two of scroll range.
let total_lines = help_text.len();
let block = panel_block("Help");
let inner = block.inner(area);
let max_scroll = (total_lines as u16).saturating_sub(inner.height);
let inner_height = area.height.saturating_sub(2); // panel borders
let max_scroll = (total_lines as u16).saturating_sub(inner_height);
let scroll = ui_state.help_scroll.clamp_for_render(max_scroll);

let title = if max_scroll > 0 {
"Help · ↑/↓ scroll"
} else {
"Help"
};
// Right padding keeps the text clear of the two rightmost inner
// columns: a blank gap and the scrollbar, same arrangement as the
// Overview table.
let help = Paragraph::new(help_text)
.block(block)
.block(panel_block(title).padding(Padding::right(2)))
.style(Style::default())
.wrap(Wrap { trim: true })
.scroll((scroll, 0))
.alignment(ratatui::layout::Alignment::Left);

f.render_widget(help, area);

// Scrollbar over the right border, spanning the inner rows.
// Scrollbar one column inside the panel border so the border line
// stays intact, inset one row top and bottom to clear the title
// row and rounded corners.
let track = Rect::new(
area.x,
area.y + 1,
area.width.saturating_sub(1),
area.height.saturating_sub(2),
);
draw_scrollbar(
f,
Rect::new(area.x, inner.y, area.width, inner.height),
track,
total_lines,
scroll as usize,
inner.height as usize,
inner_height as usize,
);

Ok(())
Expand Down
Loading