now form is using a canvas

client/src/components/handlers/canvas.rs

@@ -1,51 +1,97 @@
 // src/components/handlers/canvas.rs
 use ratatui::{
     widgets::{Paragraph, Block, Borders},
-    layout::{Rect, Margin},
+    layout::{Layout, Constraint, Direction, Rect},
     style::Style,
-    text::Text,
+    text::{Line, Span},
     Frame,
+    prelude::Alignment,
 };
 use crate::config::colors::Theme;
-
-pub struct CanvasState<'a> {
-    pub content: Text<'a>,
-    pub cursor_position: (u16, u16),
-    pub scroll_offset: u16,
-}
+use crate::ui::form::FormState;
 
 pub fn render_canvas(
     f: &mut Frame,
     area: Rect,
-    state: &CanvasState,
+    form_state: &FormState,
+    fields: &[&str],
+    current_field: &usize,
+    inputs: &[&String],
     theme: &Theme,
-    is_active: bool,
     is_edit_mode: bool,
-    border_style: Style,
+    total_count: u64,
+    current_position: u64,
 ) {
-    // Render the container block
-    let container = Block::default()
+    // Get canvas areas from form
+    let (label_area, input_container_area) = super::form::render_form(
+        f,
+        area,
+        theme,
+        total_count,
+        current_position
+    );
+    // Create input container with dynamic border
+    let input_container = Block::default()
         .borders(Borders::ALL)
-        .border_style(border_style)
+        .border_style(if is_edit_mode {
+            if form_state.has_unsaved_changes {
+                Style::default().fg(theme.warning)
+            } else {
+                Style::default().fg(theme.accent)
+            }
+        } else {
+            Style::default().fg(theme.secondary)
+        })
         .style(Style::default().bg(theme.bg));
 
-    f.render_widget(container, area);
+    // Calculate input container dimensions
+    let input_block_area = Rect {
+        x: input_container_area.x,
+        y: input_container_area.y,
+        width: input_container_area.width,
+        height: fields.len() as u16 + 2,
+    };
 
-    // Inner content area
-    let inner_area = area.inner(Margin {
-        horizontal: 1,
-        vertical: 1,
-    });
+    f.render_widget(&input_container, input_block_area);
 
-    // Render the content
-    let content = Paragraph::new(state.content.clone())
-        .scroll((state.scroll_offset, 0));
-    f.render_widget(content, inner_area);
+    // Split input area into rows
+    let input_area = input_container.inner(input_block_area);
+    let input_rows = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints(vec![Constraint::Length(1); fields.len()])
+        .split(input_area);
 
-    // Set cursor position if active
-    if is_active && is_edit_mode {
-        let cursor_x = inner_area.x + state.cursor_position.0;
-        let cursor_y = inner_area.y + state.cursor_position.1;
-        f.set_cursor_position((cursor_x, cursor_y));
+    // Render labels
+    for (i, field) in fields.iter().enumerate() {
+        let label = Paragraph::new(Line::from(Span::styled(
+            format!("{}:", field),
+            Style::default().fg(theme.fg),
+        )));
+        f.render_widget(label, Rect {
+            x: label_area.x,
+            y: input_block_area.y + 1 + i as u16,
+            width: label_area.width,
+            height: 1,
+        });
+    }
+
+    // Render input fields and cursor
+    for (i, input) in inputs.iter().enumerate() {
+        let is_active = i == *current_field;
+        let input_display = Paragraph::new(input.as_str())
+            .alignment(Alignment::Left)
+            .style(if is_active {
+                Style::default().fg(theme.highlight)
+            } else {
+                Style::default().fg(theme.fg)
+            });
+
+        f.render_widget(input_display, input_rows[i]);
+
+        if is_active {
+            let cursor_x = input_rows[i].x + form_state.current_cursor_pos as u16;
+            let cursor_y = input_rows[i].y;
+            f.set_cursor_position((cursor_x, cursor_y));
+        }
     }
 }