1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
//! Dialog widget for confirmations, warnings, and errors
//!
//! Provides a self-contained widget that implements the Widget trait.
//! Handles centering, background dimming, borders, and content rendering.
use crate::styles::theme;
use ratatui::layout::Spacing;
use ratatui::prelude::*;
use ratatui::symbols::merge::MergeStrategy;
use ratatui::widgets::{Block, Borders, Clear, Padding, Paragraph, Widget, Wrap};
/// Dialog variant for different visual styles
#[derive(Debug, Clone, Copy, Default)]
pub enum DialogVariant {
#[default]
Default,
Warning,
Error,
}
impl DialogVariant {
/// Get the prefix text for the variant
fn prefix(&self) -> &'static str {
match self {
DialogVariant::Default => "",
DialogVariant::Warning => "Warning",
DialogVariant::Error => "Error",
}
}
}
/// Dialog widget - a self-contained confirmation/warning/error dialog
pub struct Dialog<'a> {
/// Title shown in the title block
pub title: &'a str,
/// Content text to display
pub content: &'a str,
/// Width percentage (0-100), or None to auto-calculate based on content
pub width_percent: Option<u16>,
/// Minimum width in columns
pub min_width: u16,
/// Maximum width in columns
pub max_width: u16,
/// Height percentage (0-100)
pub height_percent: u16,
/// Visual variant (affects colors and title prefix)
pub variant: DialogVariant,
/// Whether to dim the background behind the dialog
pub dim_background: bool,
/// Footer text to display below the dialog (optional)
pub footer: Option<&'a str>,
/// Scroll offset for long content
pub scroll_offset: u16,
}
impl<'a> Dialog<'a> {
/// Create a new dialog with title and content
///
/// Width is automatically calculated based on content length,
/// clamped between 50-80 columns by default.
#[must_use]
pub fn new(title: &'a str, content: &'a str) -> Self {
Self {
title,
content,
width_percent: None, // Auto-calculate based on content
min_width: 60,
max_width: 80,
height_percent: 40,
variant: DialogVariant::Default,
dim_background: true,
footer: None,
scroll_offset: 0,
}
}
/// Set the width as a percentage (0-100)
/// This overrides auto-width calculation
#[must_use]
pub fn width(mut self, percent: u16) -> Self {
self.width_percent = Some(percent);
self
}
/// Set minimum width in columns (default: 60)
#[must_use]
pub fn min_width(mut self, columns: u16) -> Self {
self.min_width = columns;
self
}
/// Set maximum width in columns (default: 80)
#[must_use]
pub fn max_width(mut self, columns: u16) -> Self {
self.max_width = columns;
self
}
/// Set the height percentage (0-100)
#[must_use]
pub fn height(mut self, percent: u16) -> Self {
self.height_percent = percent;
self
}
/// Set the visual variant (affects border color and title prefix)
#[must_use]
pub fn variant(mut self, variant: DialogVariant) -> Self {
self.variant = variant;
self
}
/// Set whether to dim the background behind the dialog
#[must_use]
pub fn dim_background(mut self, dim: bool) -> Self {
self.dim_background = dim;
self
}
/// Set footer text to display below the dialog
#[must_use]
pub fn footer(mut self, footer: &'a str) -> Self {
self.footer = Some(footer);
self
}
/// Set scroll offset for long content
#[must_use]
pub fn scroll(mut self, offset: u16) -> Self {
self.scroll_offset = offset;
self
}
/// Internal rendering implementation
fn render_impl(&self, area: Rect, buf: &mut Buffer) {
let t = theme();
// Build title with variant prefix first (needed for width calculation)
let prefix = self.variant.prefix();
let title_text = if prefix.is_empty() {
self.title.to_string()
} else {
format!("{}: {}", prefix, self.title)
};
// Calculate width (auto or percentage-based)
let modal_width = if let Some(percent) = self.width_percent {
// Use percentage-based width
(f32::from(area.width) * (f32::from(percent) / 100.0)) as u16
} else {
// Auto-calculate based on content
let title_len = title_text.len() as u16;
let footer_len = self.footer.map_or(0, |f| f.len() as u16);
// Take the longest text, add padding (4 for horizontal padding * 2 sides = 8),
// borders (2), and some breathing room (10)
let suggested_width = title_len.max(footer_len) + 20;
// Clamp between min and max, and don't exceed available width.
// If the terminal is narrower than `min_width`, fall back to the
// available width so `clamp` can't be called with `min > max`.
let max_allowed = self.max_width.min(area.width.saturating_sub(4));
let min_allowed = self.min_width.min(max_allowed);
suggested_width.clamp(min_allowed, max_allowed)
};
// Calculate minimum required height for the modal
let has_footer = self.footer.is_some();
let title_height = 3u16; // 2 borders + 1 text (with horizontal padding only)
let footer_height = 3u16; // 2 borders + 1 text (with horizontal padding only)
let min_content_height = 5u16; // Minimum content height
// Total minimum height accounting for collapsed borders (each collapse saves 1 line)
let min_total_height = if has_footer {
title_height + min_content_height + footer_height - 2 // -2 for two collapsed borders
} else {
title_height + min_content_height - 1 // -1 for one collapsed border
};
// Calculate modal height
let modal_height =
(f32::from(area.height) * (f32::from(self.height_percent) / 100.0)) as u16;
let modal_height = modal_height
.max(min_total_height)
.min(area.height.saturating_sub(2));
// Center the modal
let popup_x = area.x + (area.width.saturating_sub(modal_width)) / 2;
let popup_y = area.y + (area.height.saturating_sub(modal_height)) / 2;
let popup_area = Rect::new(popup_x, popup_y, modal_width, modal_height);
// Optionally dim the background
if self.dim_background {
// Dim the entire background (page content becomes darker)
let dim = Block::default().style(t.dim_style());
Widget::render(dim, area, buf);
}
// Always clear the dialog area for clean rendering
Widget::render(Clear, popup_area, buf);
// Determine border style based on variant
let border_style = match self.variant {
DialogVariant::Default => Style::default().fg(t.border_focused),
DialogVariant::Warning => Style::default().fg(t.warning),
DialogVariant::Error => Style::default().fg(t.error),
};
// Create vertical layout with collapsed borders (web dialog style)
// Three blocks: title, content, footer
let constraints = if has_footer {
vec![
Constraint::Length(title_height),
Constraint::Min(min_content_height), // Content block (flexible)
Constraint::Length(footer_height),
]
} else {
vec![
Constraint::Length(title_height),
Constraint::Min(min_content_height), // Content block (flexible)
]
};
let layout = Layout::vertical(constraints)
.spacing(Spacing::Overlap(1)) // Collapse borders
.split(popup_area);
let border_type = t.dialog_border_type;
// Title block (top) - use horizontal padding only to save vertical space
let title_block = Block::default()
.borders(Borders::ALL)
.border_type(border_type)
.border_style(border_style)
.padding(Padding::horizontal(2))
.merge_borders(MergeStrategy::Exact)
.style(t.background_style());
let title_inner = title_block.inner(layout[0]);
Widget::render(title_block, layout[0], buf);
// Render title text as centered paragraph
let title_para = Paragraph::new(title_text)
.alignment(Alignment::Center)
.style(t.text_style().add_modifier(Modifier::BOLD));
Widget::render(title_para, title_inner, buf);
// Content block (middle) - use horizontal padding only to maximize content space
let content_block = Block::default()
.borders(Borders::ALL)
.border_type(border_type)
.border_style(border_style)
.padding(Padding::horizontal(2))
.merge_borders(MergeStrategy::Exact)
.style(t.background_style());
let content_inner = content_block.inner(layout[1]);
Widget::render(content_block, layout[1], buf);
// Clamp scroll offset to prevent scrolling past content
// Estimate total wrapped lines based on content and available width
let content_width = content_inner.width.saturating_sub(1) as usize;
let total_wrapped_lines = if content_width > 0 {
self.content
.lines()
.map(|line| {
let len = line.len();
if len == 0 {
1
} else {
len.div_ceil(content_width)
}
})
.sum::<usize>()
} else {
self.content.lines().count()
};
let visible_lines = content_inner.height as usize;
let max_scroll = total_wrapped_lines.saturating_sub(visible_lines);
let clamped_scroll = (self.scroll_offset as usize).min(max_scroll) as u16;
// Render content text (left-aligned, wrapped, with scrolling)
let content_para = Paragraph::new(self.content)
.wrap(Wrap { trim: true })
.alignment(Alignment::Left)
.style(t.text_style())
.scroll((clamped_scroll, 0));
Widget::render(content_para, content_inner, buf);
// Footer block (bottom) - optional
if has_footer {
let footer_block = Block::default()
.borders(Borders::ALL)
.border_type(border_type)
.border_style(border_style)
.padding(Padding::horizontal(2))
.merge_borders(MergeStrategy::Exact)
.style(t.background_style());
let footer_inner = footer_block.inner(layout[2]);
Widget::render(footer_block, layout[2], buf);
// Render footer text
if let Some(footer_text) = self.footer {
let footer_para = Paragraph::new(footer_text)
.alignment(Alignment::Center)
.style(t.text_style().add_modifier(Modifier::BOLD));
Widget::render(footer_para, footer_inner, buf);
}
}
}
}
impl Widget for Dialog<'_> {
fn render(self, area: Rect, buf: &mut Buffer) {
self.render_impl(area, buf);
}
}
#[cfg(test)]
mod tests {
use super::*;
fn render_at(width: u16, height: u16) {
let area = Rect::new(0, 0, width, height);
let mut buf = Buffer::empty(area);
Dialog::new("Sync with Remote", "Pushing changes to origin/main")
.footer("Enter: confirm Esc: cancel")
.render(area, &mut buf);
}
#[test]
fn renders_in_narrow_terminal_without_panic() {
// Regression for GitHub issue #52: clamp(60, 51) used to panic.
render_at(55, 24);
render_at(40, 20);
render_at(10, 10);
}
#[test]
fn renders_at_normal_size() {
render_at(120, 40);
}
}