going into a new canvas library structure

canvas/CANVAS_MIGRATION.md

@@ -57,7 +57,7 @@ use canvas::canvas::CanvasState;
 use canvas::canvas::CanvasAction;
 use canvas::canvas::ActionContext;
 use canvas::canvas::HighlightState;
-use canvas::canvas::CanvasTheme;
+use canvas::CanvasTheme;
 use canvas::dispatcher::ActionDispatcher;
 use canvas::canvas::ActionResult;
 ```
@@ -153,7 +153,7 @@ if editor.is_suggestions_active() {
 **New rendering:**
 ```rust
 // Canvas handles everything
-use canvas::canvas::render_canvas;
+use canvas::render_canvas_default;
 
 let active_field_rect = render_canvas(f, area, form_state, theme, edit_mode, highlight_state);
 

client/src/components/auth/login.rs

@@ -13,7 +13,8 @@ use ratatui::{
     Frame,
 };
 use crate::state::app::highlight::HighlightState;
-use canvas::canvas::{render_canvas, HighlightState as CanvasHighlightState}; // Use canvas library's render function
+use canvas::{FormEditor, render_canvas_default, render_suggestions_dropdown, DefaultCanvasTheme};
+use canvas::canvas::HighlightState as CanvasHighlightState;
 
 // Helper function to convert between HighlightState types
 fn convert_highlight_state(local: &HighlightState) -> CanvasHighlightState {
@@ -58,15 +59,17 @@ pub fn render_login(
         ])
         .split(inner_area);
 
-    // --- FORM RENDERING (Using canvas library directly) ---
+    // --- FORM RENDERING (Using new canvas API) ---
-    let canvas_highlight_state = convert_highlight_state(highlight_state);
+    let _canvas_highlight_state = convert_highlight_state(highlight_state);
-    render_canvas(
+
+    // Wrap LoginState in FormEditor
+    let editor = FormEditor::new(login_state.clone());
+
+    let input_rect = render_canvas_default(
         f,
         chunks[0],
-        login_state,        // LoginState implements CanvasState
+        &editor,
-        theme,              // Theme implements CanvasTheme
+        theme,
-        is_edit_mode,
-        &canvas_highlight_state,
     );
 
     // --- ERROR MESSAGE ---
@@ -88,7 +91,7 @@ pub fn render_login(
     // Login Button
     let login_button_index = 0;
     let login_active = if app_state.ui.focus_outside_canvas {
-        app_state.focused_button_index== login_button_index
+        app_state.focused_button_index == login_button_index
     } else {
         false
     };
@@ -115,7 +118,7 @@ pub fn render_login(
     // Return Button
     let return_button_index = 1;
     let return_active = if app_state.ui.focus_outside_canvas {
-        app_state.focused_button_index== return_button_index
+        app_state.focused_button_index == return_button_index
     } else {
         false
     };
@@ -139,6 +142,19 @@ pub fn render_login(
         button_chunks[1],
     );
 
+    // --- SUGGESTIONS DROPDOWN (if active) ---
+    if app_state.current_mode == crate::modes::handlers::mode_manager::AppMode::Edit {
+        if let Some(input_rect) = input_rect {
+            render_suggestions_dropdown(
+                f,
+                f.area(),
+                input_rect,
+                &DefaultCanvasTheme,
+                &editor,
+            );
+        }
+    }
+
     // --- DIALOG ---
     if app_state.ui.dialog.dialog_show {
         dialog::render_dialog(

client/src/components/auth/register.rs

@@ -14,9 +14,8 @@ use ratatui::{
     Frame,
 };
 use crate::state::app::highlight::HighlightState;
-use canvas::canvas::{render_canvas, HighlightState as CanvasHighlightState}; // Use canvas library's render function
+use canvas::{FormEditor, render_canvas_default, render_suggestions_dropdown, DefaultCanvasTheme};
-use canvas::autocomplete::gui::render_autocomplete_dropdown;
+use canvas::canvas::HighlightState as CanvasHighlightState;
-use canvas::autocomplete::AutocompleteCanvasState;
 
 // Helper function to convert between HighlightState types
 fn convert_highlight_state(local: &HighlightState) -> CanvasHighlightState {
@@ -62,13 +61,15 @@ pub fn render_register(
 
     // --- FORM RENDERING (Using canvas library directly) ---
     let canvas_highlight_state = convert_highlight_state(highlight_state);
-    let input_rect = render_canvas(
+
+    // Wrap RegisterState in FormEditor
+    let editor = FormEditor::new(state.clone());
+
+    let input_rect = render_canvas_default(
         f,
         chunks[0],
-        state,              // RegisterState implements CanvasState
+        &editor,
-        theme,              // Theme implements CanvasTheme
+        theme,
-        is_edit_mode,
-        &canvas_highlight_state,
     );
 
     // --- HELP TEXT ---
@@ -96,7 +97,7 @@ pub fn render_register(
     // Register Button
     let register_button_index = 0;
     let register_active = if app_state.ui.focus_outside_canvas {
-        app_state.focused_button_index== register_button_index
+        app_state.focused_button_index == register_button_index
     } else {
         false
     };
@@ -123,7 +124,7 @@ pub fn render_register(
     // Return Button
     let return_button_index = 1;
     let return_active = if app_state.ui.focus_outside_canvas {
-        app_state.focused_button_index== return_button_index
+        app_state.focused_button_index == return_button_index
     } else {
         false
     };
@@ -147,18 +148,16 @@ pub fn render_register(
         button_chunks[1],
     );
 
-    // --- AUTOCOMPLETE DROPDOWN (Using canvas library directly) ---
+    // --- AUTOCOMPLETE DROPDOWN (Using new canvas suggestions) ---
     if app_state.current_mode == AppMode::Edit {
-        if let Some(autocomplete_state) = state.autocomplete_state() {
+        if let Some(input_rect) = input_rect {
-            if let Some(input_rect) = input_rect {
+            render_suggestions_dropdown(
-                render_autocomplete_dropdown(
+                f,
-                    f,
+                f.area(),        // Frame area
-                    f.area(),        // Frame area
+                input_rect,      // Current input field rect
-                    input_rect,      // Current input field rect
+                &DefaultCanvasTheme,
-                    theme,           // Theme implements CanvasTheme
+                &editor,
-                    autocomplete_state,
+            );
-                );
-            }
         }
     }
 

client/src/components/form/form.rs

@@ -1,7 +1,7 @@
 // src/components/form/form.rs
-use crate::components::common::autocomplete;
 use crate::config::colors::themes::Theme;
-use canvas::canvas::{CanvasState, render_canvas, HighlightState};
+use canvas::{FormEditor, render_canvas_default, render_suggestions_dropdown, DefaultCanvasTheme};
+use canvas::canvas::HighlightState;
 use crate::state::pages::form::FormState;
 use ratatui::{
     layout::{Alignment, Constraint, Direction, Layout, Margin, Rect},
@@ -14,12 +14,12 @@ pub fn render_form(
     f: &mut Frame,
     area: Rect,
     form_state: &FormState,
-    fields: &[&str],
+    fields: &[&str],            // no longer needed, FormEditor handles this
-    current_field_idx: &usize,
+    current_field_idx: &usize,  // no longer needed
-    inputs: &[&String],
+    inputs: &[&String],         // no longer needed
     table_name: &str,
     theme: &Theme,
-    is_edit_mode: bool,
+    is_edit_mode: bool,         // FormEditor tracks mode internally
     highlight_state: &HighlightState,
     total_count: u64,
     current_position: u64,
@@ -62,37 +62,24 @@ pub fn render_form(
         .alignment(Alignment::Left);
     f.render_widget(count_para, main_layout[0]);
 
-    // Use the canvas library's render_canvas function
+    // --- FORM RENDERING (Using new canvas API) ---
-    let active_field_rect = render_canvas(
+    let editor = FormEditor::new(form_state.clone());
+
+    let active_field_rect = render_canvas_default(
         f,
         main_layout[1],
-        form_state,
+        &editor,
         theme,
-        is_edit_mode,
-        highlight_state,
     );
 
-    // --- RENDER RICH AUTOCOMPLETE ONLY ---
+    // --- SUGGESTIONS DROPDOWN ---
-    if form_state.autocomplete_active {
+    if let Some(active_rect) = active_field_rect {
-        if let Some(active_rect) = active_field_rect {
+        render_suggestions_dropdown(
-            // Get selected index directly from form_state
+            f,
-            let selected_index = form_state.selected_suggestion_index;
+            main_layout[1],
-
+            active_rect,
-            // Only render rich suggestions (your Hit objects)
+            &DefaultCanvasTheme,
-            if let Some(rich_suggestions) = form_state.get_rich_suggestions() {
+            &editor,
-                if !rich_suggestions.is_empty() {
+        );
-                    autocomplete::render_hit_autocomplete_dropdown(
-                        f,
-                        active_rect,
-                        f.area(),
-                        theme,
-                        rich_suggestions,
-                        selected_index,
-                        form_state,
-                    );
-                }
-            }
-            // Removed simple suggestions - we only use rich ones now!
-        }
     }
 }

client/src/config/colors/themes.rs

@@ -1,6 +1,6 @@
 // src/config/colors/themes.rs
 use ratatui::style::Color;
-use canvas::canvas::CanvasTheme;
+use canvas::CanvasTheme;
 
 #[derive(Debug, Clone)]
 pub struct Theme {
@@ -12,7 +12,7 @@ pub struct Theme {
     pub warning: Color,
     pub border: Color,
     pub highlight_bg: Color,
-    pub inactive_highlight_bg: Color,// admin panel no idea what it really is
+    pub inactive_highlight_bg: Color, // admin panel no idea what it really is
 }
 
 impl Theme {
@@ -108,4 +108,9 @@ impl CanvasTheme for Theme {
     fn warning(&self) -> Color {
         self.warning
     }
+
+    fn suggestion_gray(&self) -> Color {
+        // Neutral gray for suggestions
+        Color::Rgb(128, 128, 128)
+    }
 }

client/src/ui/handlers/render.rs

@@ -16,7 +16,6 @@ use crate::components::{
 };
 use crate::config::colors::themes::Theme;
 use crate::modes::general::command_navigation::NavigationState;
-use canvas::canvas::CanvasState;
 use crate::state::app::buffer::BufferState;
 use crate::state::app::highlight::HighlightState as LocalHighlightState;
 use canvas::canvas::HighlightState as CanvasHighlightState;

client/src/ui/handlers/ui.rs

@@ -8,7 +8,6 @@ use crate::config::storage::storage::load_auth_data;
 use crate::modes::common::commands::CommandHandler;
 use crate::modes::handlers::event::{EventHandler, EventOutcome};
 use crate::modes::handlers::mode_manager::{AppMode, ModeManager};
-use canvas::canvas::CanvasState; // Only external library import
 use crate::state::pages::form::{FormState, FieldDefinition};
 use crate::state::pages::auth::AuthState;
 use crate::state::pages::auth::LoginState;