diff --git a/src/client/components/form.rs b/src/client/components/form.rs index ce27f50..13f35e3 100644 --- a/src/client/components/form.rs +++ b/src/client/components/form.rs @@ -3,7 +3,7 @@ use ratatui::{ widgets::{Paragraph, Block, Borders}, layout::{Layout, Constraint, Direction, Rect, Margin}, style::Style, - text::{Line, Span, Text}, + text::{Line, Span}, Frame, }; use crate::client::colors::Theme; @@ -32,53 +32,56 @@ pub fn render_form( vertical: 1, }); - // Split the inner area into a single column layout - let form_chunks = Layout::default() - .direction(Direction::Vertical) - .constraints(vec![Constraint::Length(1); fields.len()]) // Each field takes 1 row + // Split the inner area into two columns: labels and inputs + let columns = Layout::default() + .direction(Direction::Horizontal) + .constraints([Constraint::Percentage(30), Constraint::Percentage(70)]) .split(inner_area); + // Create a bordered block for the input area + let input_block = Block::default() + .borders(Borders::ALL) + .border_style(Style::default().fg(theme.accent)); + + // Render the labels on the left + let label_area = columns[0]; for (i, field) in fields.iter().enumerate() { - let input = inputs[i].clone(); - let is_active = i == *current_field; - - // Split each row into two parts: label and input - let row_chunks = Layout::default() - .direction(Direction::Horizontal) - .constraints([Constraint::Percentage(30), Constraint::Percentage(70)]) - .split(form_chunks[i]); - - // Render the label on the left let label = Paragraph::new(Line::from(Span::styled( field.to_string(), Style::default().fg(theme.fg), ))); - f.render_widget(label, row_chunks[0]); + f.render_widget(label, Rect { + x: label_area.x, + y: label_area.y + i as u16, + width: label_area.width, + height: 1, + }); + } - // Render the input on the right - let input_block = Block::default() - .borders(if is_active { - Borders::ALL // Add a border around the active field - } else { - Borders::NONE - }) - .border_style(Style::default().fg(theme.accent)); // Use the accent color for the border + // Render the inputs inside the bordered block + let input_area = input_block.inner(columns[1]); + f.render_widget(input_block, columns[1]); + for (i, input) in inputs.iter().enumerate() { let input_paragraph = Paragraph::new(input.as_str()) - .block(input_block) - .style(if is_active { + .style(if i == *current_field { Style::default().fg(theme.highlight) } else { Style::default().fg(theme.fg) }); - f.render_widget(input_paragraph, row_chunks[1]); + f.render_widget(input_paragraph, Rect { + x: input_area.x, + y: input_area.y + i as u16, + width: input_area.width, + height: 1, + }); // Render the cursor in the active field - if is_active { - let cursor_x = row_chunks[1].x + input.len() as u16 + 1; // Calculate cursor position - let cursor_y = row_chunks[1].y; - f.set_cursor(cursor_x, cursor_y); // Set the cursor position + if i == *current_field { + let cursor_x = input_area.x + input.len() as u16; + let cursor_y = input_area.y + i as u16; + f.set_cursor(cursor_x, cursor_y); } } }